/* — Passe 2 (directeur artistique, 19 octobre) : des fonds à thème tirés du lieu, des ornements au trait, du mouvement continu — */
:root {
  --sable: #EFE3CF; --dore: #F3DDA6; --soleil: #E8B54A;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .09 0 0 0 0 .09 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --roche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='r' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='5' lighting-color='%23384440'%3E%3CfeDistantLight azimuth='225' elevation='32'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  --confettis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg opacity='.32'%3E%3Crect x='20' y='30' width='9' height='4' rx='1' fill='%23B4512D' transform='rotate(30 24 32)'/%3E%3Crect x='120' y='18' width='9' height='4' rx='1' fill='%2358908F' transform='rotate(-20 124 20)'/%3E%3Ccircle cx='180' cy='90' r='3' fill='%23E8B54A'/%3E%3Crect x='70' y='110' width='10' height='4' rx='1' fill='%23E8B54A' transform='rotate(70 75 112)'/%3E%3Ccircle cx='30' cy='170' r='3' fill='%2358908F'/%3E%3Crect x='150' y='170' width='9' height='4' rx='1' fill='%23B4512D' transform='rotate(-50 154 172)'/%3E%3Ccircle cx='100' cy='60' r='2.5' fill='%23E39B78'/%3E%3C/g%3E%3C/svg%3E");
  --quadrillage: linear-gradient(rgba(47, 95, 94, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 95, 94, 0.08) 1px, transparent 1px);
}

/* — les ornements : toujours derrière le texte, en partie hors cadre — */
.orn { display: block; width: 100%; height: auto; overflow: visible; }
.orn-bord { position: absolute; z-index: 0; pointer-events: none; width: min(62vw, 420px); opacity: 0.3; }
.orn-bord-droite { right: -14vw; top: 6%; }
.orn-bord-gauche { left: -10vw; bottom: 4%; }
@media (min-width: 900px) { .orn-bord { opacity: 0.42; } .orn-bord-droite { right: -90px; } .orn-bord-gauche { left: -80px; } }
.bande-espace > .large, .section > .large { position: relative; z-index: 1; }

/* — les fonds — */
.fond-grain { background: var(--grain), var(--chaux); }
.fond-plan { background: var(--grain), radial-gradient(ellipse at 15% 0%, rgba(220, 233, 230, 0.8), transparent 55%), var(--chaux); overflow: hidden; }
.heros-plan { position: absolute; inset: 0; z-index: 0; color: var(--lagon); opacity: 0.42; pointer-events: none; }
.heros-plan .orn { width: 100%; height: 100%; }
.heros > .heros-cadre, .heros > .heros-contenu, .heros > .heros-suite { position: relative; z-index: 1; }
.heros > .heros-contenu { z-index: 3; }
.fond-nuit { background: var(--grain-clair), radial-gradient(ellipse at 80% 10%, rgba(88, 144, 143, 0.22), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(180, 81, 45, 0.16), transparent 50%), var(--basalte); }
.fond-roche { background: var(--grain-clair), linear-gradient(180deg, rgba(18, 24, 23, 0.55), rgba(18, 24, 23, 0.82)), var(--roche), var(--basalte); }
.fond-terre { position: relative; overflow: hidden; background: var(--grain), radial-gradient(ellipse at 10% 0%, rgba(227, 155, 120, 0.45), transparent 55%), var(--terre); color: var(--chaux); }
.fond-route { position: relative; overflow: hidden; background: var(--grain), radial-gradient(ellipse at 100% 0%, rgba(227, 155, 120, 0.18), transparent 50%), var(--chaux); }
.fond-quadrille { background: var(--grain), var(--quadrillage), var(--chaux); background-size: auto, 28px 28px, 28px 28px, auto; }
.fond-sable { position: relative; overflow: hidden; background: var(--grain), radial-gradient(ellipse at 90% 10%, rgba(243, 221, 166, 0.7), transparent 60%), var(--sable); }
.fond-ecume { position: relative; overflow: hidden; background: var(--grain), radial-gradient(ellipse at 0% 0%, rgba(255, 255, 255, 0.7), transparent 55%), var(--ecume); }
.fond-confettis { position: relative; overflow: hidden; background: var(--grain), var(--confettis), radial-gradient(ellipse at 50% 0%, rgba(243, 221, 166, 0.6), transparent 60%), var(--chaux); }
.fond-lagon { position: relative; overflow: hidden; background: var(--grain-clair), radial-gradient(ellipse at 100% 0%, rgba(88, 144, 143, 0.6), transparent 55%), var(--lagon-fonce); color: var(--chaux); }

/* — les trois espaces, chacun sur son fond — */
.espaces-tete { padding-bottom: 24px; }
.bande-espace { position: relative; overflow: hidden; padding: 64px var(--gouttiere); }
.bande-espace .espace { position: relative; z-index: 1; }
.fond-jardin { background: var(--grain), radial-gradient(ellipse at 100% 0%, rgba(255, 255, 255, 0.6), transparent 50%), var(--ecume); }
.fond-jardin .orn-bord { color: var(--lagon-fonce); }
.fond-salle { background: var(--grain), var(--quadrillage), var(--chaux); background-size: auto, 32px 32px, 32px 32px, auto; }
.fond-salle .orn-bord { color: var(--lagon); }
.fond-villa { background: var(--grain), radial-gradient(ellipse at 0% 100%, rgba(243, 221, 166, 0.8), transparent 55%), var(--sable); }
.fond-villa .orn-bord { color: var(--terre); width: min(48vw, 300px); }
.espace-chiffre { color: var(--lagon-fonce); }
.fond-villa .espace-chiffre { color: var(--terre); }
.villa-vignettes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; max-width: 420px; }
.villa-vignettes .cadre { padding: 5px; border-radius: 18px; }
.villa-vignettes .cadre-image { aspect-ratio: 1; border-radius: 13px; }
@media (min-width: 900px) { .bande-espace { padding: 110px var(--gouttiere); } }

/* — les usages : la teinte du fond suit l'usage montré — */
.usages { position: relative; overflow: hidden; }
.teintes { position: absolute; inset: 0; z-index: 0; }
.teintes i { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease); }
.teintes i.actif { opacity: 1; }
.t-dore { background: var(--grain), radial-gradient(ellipse at 85% 15%, rgba(243, 221, 166, 0.95), transparent 60%), #F7EEDC; }
.t-quadrille { background: var(--grain), var(--quadrillage), var(--chaux); background-size: auto, 28px 28px, 28px 28px, auto; }
.t-fanions { background: var(--grain), var(--confettis), #F6F0E6; }
.t-faisceaux { background: var(--grain), repeating-linear-gradient(118deg, transparent 0 90px, rgba(180, 81, 45, 0.12) 90px 91px), #F3EEE6; }
.usages .large { position: relative; z-index: 1; }
@media (min-width: 1000px) {
  .usages-grille { align-items: stretch; }
  .usages-photo { align-self: start; top: calc(var(--entete-h) + 24px); }
  .usages-tete { margin-bottom: 30px; }
}

/* — le haut de page de l'accueil : écume et zoom lent — */
.heros-ecume { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 24%; z-index: 2; overflow: hidden; border-radius: 0 0 24px 24px; opacity: 0.6; pointer-events: none; }
.heros-ecume .orn { width: 100%; height: 100%; }
.ecume-vague { animation: ecume 7s ease-in-out infinite; animation-play-state: paused; }
.ecume-vague.e1 { animation-duration: 9s; animation-delay: -3s; }
.ecume-vague.e2 { animation-duration: 11s; animation-delay: -6s; }
@keyframes ecume { 0% { stroke-dashoffset: 0; transform: translateX(0); opacity: 0.4; } 50% { opacity: 1; transform: translateX(-12px); } 100% { stroke-dashoffset: -88; transform: translateX(0); opacity: 0.4; } }
.heros-cadre .cadre-image img { animation: zoom-lent 30s ease-in-out infinite alternate; }
@keyframes zoom-lent { from { transform: scale(1); } to { transform: scale(1.08); } }

/* — le mouvement continu ne tourne qu'à l'écran — */
.en-vue .ecume-vague, .en-vue .houle, .en-vue .ampoule, .en-vue .fanion, .en-vue .point-onde, .en-vue .faisceaux-piste { animation-play-state: running; }
.houle { animation: houle 9s linear infinite; animation-play-state: paused; }
.houle.h2 { animation-duration: 13s; } .houle.h3 { animation-duration: 17s; }
@keyframes houle { to { transform: translateX(-160px); } }
.orn-crique .houle { animation-name: houle-courte; }
@keyframes houle-courte { to { transform: translateX(-120px); } }
.point-onde { transform-box: fill-box; transform-origin: center; animation: onde 2.2s var(--ease) infinite; animation-play-state: paused; }
@keyframes onde { from { transform: scale(1); opacity: 0.9; } to { transform: scale(4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ecume-vague, .houle, .ampoule, .fanion, .point-onde, .faisceaux-piste, .heros-cadre .cadre-image img { animation: none !important; }
}

/* — avis sur terre rouge — */
.fond-terre .surtitre { color: #FCE1CF; }
.fond-terre h2 em { color: #FCE1CF; }
.fond-terre .chapeau { color: rgba(245, 242, 236, 0.86); }
.fond-terre .note-chiffre { color: var(--chaux); }
.fond-terre .note-sous .etoiles { color: #F6D27A; }
.fond-terre .repartition b { background: rgba(255, 255, 255, 0.22); }
.fond-terre .repartition i { background: var(--chaux); }
.fond-terre .repartition li span:last-child { color: rgba(245, 242, 236, 0.75); }
.fond-terre .orn-bord { color: var(--chaux); opacity: 0.2; }
.fond-terre .bande-avis .avis-carte { box-shadow: 0 18px 30px -24px rgba(0, 0, 0, 0.5); color: var(--basalte); }
.fond-terre .bande-avis .avis-t2 { color: var(--chaux); }

/* — infos : la route N2 en lacets — */
.plan-acces { margin: 0; padding: 14px 14px 6px; border-radius: var(--rayon); background: var(--grain), var(--papier); border: 1px solid var(--trait); }
.plan-acces-dessin { color: var(--terre); }
.plan-acces .orn { width: 100%; height: auto; }

/* — fin de page : le coucher de soleil sur l'océan, qui se fond dans le pied — */
.couchant { position: relative; overflow: hidden; background: var(--grain-clair), radial-gradient(ellipse at 70% 100%, rgba(217, 120, 74, 0.45), transparent 55%), linear-gradient(180deg, #121817 0%, #1B2629 45%, #3A2C34 100%); padding-bottom: 0; }
.couchant > .large, .couchant > .encart-contenu { position: relative; z-index: 1; }
.couchant-scene { position: relative; z-index: 0; height: 190px; margin: 34px calc(var(--gouttiere) * -1) 0; }
.couchant-scene .orn { position: absolute; inset: 0; width: 100%; height: 100%; }
.couchant .bulle-tel { background: rgba(14, 26, 24, 0.82); }
@media (min-width: 900px) { .couchant-scene { height: 300px; margin-top: 10px; } }
.pied { background: var(--grain-clair), var(--basalte); position: relative; overflow: hidden; }

/* — micro-interactions sur tout ce qui se touche — */
.bouton { position: relative; overflow: hidden; isolation: isolate; }
.bouton::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.8s var(--ease); }
@media (hover: hover) { .bouton:hover::after { transform: translateX(120%); } }
.vignette, .usage, .voisine, .avis-carte, .filtre, .pastille, .espace-faits li { transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background-color 0.3s; }
@media (hover: hover) {
  .avis-carte:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 20px 34px -22px rgba(0, 0, 0, 0.45); }
  .espace-faits li:hover { transform: translateY(-2px); }
  .filtre:hover { background: rgba(245, 242, 236, 0.12); }
}
.vignette:active, .usage:active, .voisine:active, .avis-carte:active, .filtre:active { transform: scale(0.98); }