/* Domaine Bassin 18 · direction du 19 octobre au soir (demande de Maoni : « on voit très peu le domaine », « aucun effet wow »).
   Le domaine devient le héros, et une signature de fête court sur tout le site :
   la guirlande d'ampoules qui s'allume, les étiquettes de table posées sur les photos, les cadres à liseré de faire-part,
   les petits tirages en arche et les surtitres en étiquette. Cette feuille se charge en dernier. */
:root { --or: #E8B54A; --or-clair: #FFD98A; --liseré: rgba(184, 140, 60, 0.5); }

/* — 1. les cadres : un liseré de faire-part dans le passe-partout — */
.cadre::after { content: ""; position: absolute; inset: 3.5px; border: 1px solid var(--liseré); border-radius: calc(var(--rayon) - 3.5px); pointer-events: none; }
.sombre .cadre::after { border-color: rgba(232, 181, 74, 0.38); }
.heros-cadre::after { border-radius: 27px; }

/* — 2. les surtitres deviennent de petites étiquettes de table — */
.surtitre::before { width: 20px; height: 12px; flex: none; background: var(--terre); clip-path: polygon(0 50%, 32% 0, 100% 0, 100% 100%, 32% 100%); -webkit-mask: radial-gradient(circle 2px at 36% 50%, transparent 95%, #000 100%); mask: radial-gradient(circle 2px at 36% 50%, transparent 95%, #000 100%); }
.sombre .surtitre::before, .fond-terre .surtitre::before, .fond-lagon .surtitre::before { background: var(--or); }

/* — 3. la guirlande d'ampoules — */
.guirlande-zone { position: absolute; z-index: 6; left: -3%; right: -3%; top: -40px; pointer-events: none; }
.guirlande { display: block; width: 100%; height: auto; overflow: visible; color: #4A3F33; }
.sombre .guirlande, .guirlande-sombre .guirlande { color: #CDB894; }
.gl-halo { opacity: 0; }
.gl-verre { opacity: 0.5; }
html:not(.js) .gl-halo { opacity: 0.85; }
html:not(.js) .gl-verre { opacity: 1; }
.vu .gl-halo { animation: gl-allume 0.5s calc(var(--d) * 85ms + 0.35s) forwards, gl-scintille 2.8s calc(var(--d) * 85ms + 1.6s) ease-in-out infinite alternate; }
.vu .gl-verre { animation: gl-verre 0.5s calc(var(--d) * 85ms + 0.35s) forwards; }
@keyframes gl-allume { from { opacity: 0; } 55% { opacity: 1; } to { opacity: 0.85; } }
@keyframes gl-verre { to { opacity: 1; } }
@keyframes gl-scintille { from { opacity: 0.85; } to { opacity: 0.58; } }
@media (prefers-reduced-motion: reduce) { .gl-halo, .vu .gl-halo { animation: none !important; opacity: 0.85; } .gl-verre, .vu .gl-verre { animation: none !important; opacity: 1; } }

/* — 4. les étiquettes de table posées sur les photos — */
.etiquette { --tx: -18px; --ty: calc(-100% - 26px); --oy: calc(100% + 26px); position: absolute; z-index: 5; left: var(--x); top: var(--y); transform: translate(var(--tx), var(--ty)) rotate(var(--r, 0deg)); transform-origin: 18px var(--oy);
  display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 13px 8px 26px; border-radius: 7px; white-space: nowrap;
  background: radial-gradient(circle 3.2px at 13px 50%, rgba(18, 24, 23, 0.55) 70%, transparent 76%), radial-gradient(circle 5.5px at 13px 50%, rgba(184, 140, 60, 0.55) 60%, transparent 66%), var(--papier);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(184, 140, 60, 0.35);
  font-size: 13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--basalte); }
.etiquette b { font-family: var(--titre); font-style: italic; font-weight: 400; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--terre); }
/* le fil et l'épingle, du coin de l'étiquette jusqu'au point exact de la photo */
.etiquette::before { content: ""; position: absolute; left: 17px; top: 100%; width: 1.5px; height: 22px; background: linear-gradient(var(--terre), rgba(180, 81, 45, 0.6)); }
.etiquette::after { content: ""; position: absolute; left: 12px; top: calc(100% + 20px); width: 11px; height: 11px; border-radius: 50%; background: var(--terre); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 2px 8px rgba(0, 0, 0, 0.4); }
.et-g { --tx: calc(-100% + 18px); transform-origin: calc(100% - 18px) var(--oy); }
.et-bas { --ty: 26px; --oy: -26px; }
.et-bas::before { top: auto; bottom: 100%; background: linear-gradient(rgba(180, 81, 45, 0.6), var(--terre)); }
.et-bas::after { top: auto; bottom: calc(100% + 20px); }
.et-g::before { left: auto; right: 17px; }
.et-g::after { left: auto; right: 12px; }
.js .etiquette { opacity: 0; }
.js .heros .etiquette, .js .vu .etiquette { animation: etiquette-arrive 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 0.16s + 0.9s); }
.js .vu .etiquette { animation-delay: calc(var(--i, 0) * 0.16s + 0.5s); }
@keyframes etiquette-arrive { from { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(calc(var(--r, 0deg) - 18deg)); translate: 0 -10px; } 60% { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(calc(var(--r, 0deg) + 4deg)); } to { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--r, 0deg)); translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .js .etiquette { opacity: 1; animation: none !important; } }
@media (max-width: 760px) {
  .etiquette { left: var(--xm, var(--x)); top: var(--ym, var(--y)); font-size: 12px; padding: 7px 11px 7px 24px; }
  .etiquette b { font-size: 14.5px; }
  .etiquette[data-tel="non"] { display: none; }
}

/* — 5. les petits tirages en arche, glissés au bord des grandes photos — */
.tirage-petit { position: absolute; z-index: 5; margin: 0; width: 196px; padding: 8px 8px 0; border-radius: 999px 999px 16px 16px; background: var(--papier); rotate: var(--r, -4deg); box-shadow: 0 24px 40px -22px rgba(18, 24, 23, 0.6), inset 0 0 0 1px rgba(184, 140, 60, 0.35); }
.tirage-petit img { display: block; width: 100%; aspect-ratio: 4 / 4.7; object-fit: cover; object-position: var(--pos, 50% 45%); border-radius: 999px 999px 10px 10px; }
.tirage-petit figcaption { padding: 7px 4px 10px; text-align: center; font-family: var(--titre); font-style: italic; font-size: 16px; line-height: 1.15; color: var(--basalte); }
.js .heros .tirage-petit { animation: tirage-arrive 1.2s var(--ease) 0.6s both; }
@keyframes tirage-arrive { from { opacity: 0; translate: 0 40px; rotate: calc(var(--r, -4deg) - 10deg); } to { opacity: 1; translate: 0 0; rotate: var(--r, -4deg); } }
@media (prefers-reduced-motion: reduce) { .js .heros .tirage-petit { animation: none; } }

/* — 6. les photos s'ouvrent comme un carton qu'on déplie — */
.js [data-apparait="photo"] .cadre-image { clip-path: inset(7% 5% 7% 5% round 18px); transition: clip-path 1.4s var(--ease); }
.js [data-apparait="photo"].vu .cadre-image { clip-path: inset(0 round 18px); }
@media (prefers-reduced-motion: reduce) { .js [data-apparait="photo"] .cadre-image { clip-path: none; transition: none; } }

/* — 7. les hauts de page : le domaine en grand, la guirlande au-dessus — */
.heros .heros-cadre .cadre-image img { object-position: var(--pos, 50% 50%) !important; transform: none !important; transform-origin: 50% 50% !important; animation: zoom-lent 30s ease-in-out infinite alternate !important; }
@media (prefers-reduced-motion: reduce) { .heros .heros-cadre .cadre-image img { animation: none !important; } }
.heros .heros-cadre .cadre-image { animation: ouverture 1.5s var(--ease) both; }
@keyframes ouverture { from { clip-path: inset(9% 7% 9% 7% round 24px); } to { clip-path: inset(0 round 24px); } }
@media (prefers-reduced-motion: reduce) { .heros .heros-cadre .cadre-image { animation: none; } }
.heros-ecume, .heros-gps, .heros-arche, .heros-arche-cadre { display: none !important; }
.heros-cadre .cadre-image::after { background: linear-gradient(180deg, rgba(18, 24, 23, 0.3) 0%, rgba(18, 24, 23, 0) 30%) !important; }

@media (max-width: 760px) {
  .heros, .fond-confettis.heros, .fond-ciel.heros { display: flex; flex-direction: column; padding: 30px var(--gouttiere) 0; }
  .heros > .heros-cadre { height: clamp(230px, 37svh, 380px); min-height: 0; max-height: none; width: 100%; }
  .heros-contenu { color: var(--basalte); padding: 22px 2px 0; margin: 0; align-self: stretch; }
  .heros .surtitre, .fond-confettis .heros-contenu .surtitre { color: var(--lagon-fonce); font-size: 12px; letter-spacing: 0.12em; margin-bottom: 10px; }
  .heros h1 em { color: var(--lagon-fonce); }
  .heros h1 { font-size: clamp(28px, 8vw, 34px); }
  .heros-usage h1 { font-size: clamp(26px, 7.2vw, 31px); }
  .heros-contenu { padding-top: 18px; }
  .heros .pastille { background: var(--papier); border-color: var(--trait); color: var(--basalte); }
  .heros .pastilles { margin: 14px 0; }
  .heros .bouton-plein { background: var(--lagon-fonce); color: var(--chaux); }
  .heros .bouton-trait-clair { background: transparent; border-color: rgba(18, 24, 23, 0.35); color: var(--basalte); }
  .heros-suite { padding: 18px 2px 0; font-size: 17px; }
  .heros .guirlande-zone { top: -26px; left: -8px; right: -8px; }
  .heros .tirage-petit { display: none; }
  .heros-usage .score { top: auto; bottom: 14px; }
}

@media (min-width: 761px) {
  .heros { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); padding: 70px var(--gouttiere) 72px; min-height: 0; }
  .heros > .heros-cadre { height: clamp(460px, calc(100svh - var(--entete-h) - 170px), 640px); min-height: 0; max-height: none; max-width: 860px; }
  .heros h1 { font-size: clamp(44px, 4.3vw, 66px); }
  .heros-usage h1 { font-size: clamp(40px, 3.9vw, 60px); }
  .heros .tirage-petit { left: -58px; bottom: -40px; }
  .heros-etiquette { left: auto; right: -30px; bottom: 54px; }
  .fond-ciel.heros, .fond-confettis.heros { padding-top: 90px; }
  .fond-ciel .heros-cadre { height: clamp(460px, calc(100svh - var(--entete-h) - 170px), 640px); }
}

/* — 8. le moment fort des pages : une grande photo du domaine, ses étiquettes et leur légende — */
.grand-tirage-section { position: relative; overflow: clip; }
.gt-grille { display: grid; gap: 54px; align-items: center; }
.gt-grille > * { min-width: 0; }
.grand-tirage { margin: 34px 0 0; }
.grand-tirage .cadre-image { aspect-ratio: var(--ratio, 4 / 3); }
.grand-tirage .cadre-image img { object-position: var(--pos, 50% 50%); }
.grand-tirage .guirlande-zone { top: -46px; }
.plan-table { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.plan-table li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; padding: 14px 16px; border-radius: 14px; background: rgba(245, 242, 236, 0.06); border: 1px solid var(--trait-clair); }
.plan-table b { grid-row: span 2; font-family: var(--titre); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1; color: var(--or); }
.plan-table strong { font-size: 17px; font-weight: 700; color: var(--chaux); }
.plan-table span { font-size: 16px; color: rgba(245, 242, 236, 0.72); }
.grand-tirage-section:not(.sombre) .plan-table li { background: var(--papier); border-color: var(--trait); }
.grand-tirage-section:not(.sombre) .plan-table strong { color: var(--basalte); }
.grand-tirage-section:not(.sombre) .plan-table span { color: rgba(18, 24, 23, 0.72); }
.grand-tirage-section:not(.sombre) .plan-table b { color: var(--terre); }
.gt-lumiere { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 70% 30%, rgba(232, 181, 74, 0.14), transparent 70%); }
@media (max-width: 760px) {
  .grand-tirage .cadre-image { aspect-ratio: var(--ratio-tel, var(--ratio, 4 / 3)); }
  .grand-tirage .cadre-image img { object-position: var(--pos-tel, var(--pos, 50% 50%)); }
  .grand-tirage .guirlande-zone { top: -30px; left: -8px; right: -8px; }
}
@media (min-width: 900px) {
  .gt-grille { grid-template-columns: minmax(0, 0.64fr) minmax(0, 1.36fr); gap: 64px; }
  .gt-portrait .gt-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .gt-portrait .grand-tirage { max-width: 560px; justify-self: end; width: 100%; }
}

/* — 9. les trois espaces de l'accueil : des photos plus grandes, une étiquette de table sur chacune, un petit tirage — */
.espace .cadre { overflow: visible; }
.espace .cadre .etiquette { --x: 9%; --y: 0%; }
@media (max-width: 760px) { .espace .cadre .etiquette { --xm: 12%; --ym: 0%; } }
.espace .tirage-petit { width: 150px; right: -14px; bottom: -36px; }
.espace .tirage-petit figcaption { font-size: 14px; }
@media (max-width: 899px) { .espace .tirage-petit { width: 118px; right: -4px; bottom: -30px; } .espace .tirage-petit figcaption { font-size: 13px; padding-bottom: 8px; } }
.espace .cadre-image { aspect-ratio: 4 / 3.3; }
@media (min-width: 900px) {
  .espace { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 80px; }
  .espace .cadre { max-width: 860px; }
  .espace .tirage-petit { right: auto; left: -52px; bottom: -44px; }
}
.etiquette { pointer-events: none; }
.equipe-tirage { overflow: visible; margin-top: 30px; }
.equipe-tirage .guirlande-zone { top: -44px; }
@media (max-width: 760px) { .equipe-tirage .guirlande-zone { top: -28px; left: -8px; right: -8px; } .equipe-tirage .etiquette { font-size: 11px; } }
@media (max-width: 760px) {
  .et-bas-tel { --ty: 26px; --oy: -26px; }
  .et-bas-tel::before { top: auto; bottom: 100%; }
  .et-bas-tel::after { top: auto; bottom: calc(100% + 20px); }
}
@media (min-width: 761px) { .fond-confettis.heros { padding-top: 140px; } }