/* L'EAU VIVE — La Chapelle-Viviers (86)
   Mobile d'abord. Les media queries ENRICHISSENT, elles ne rattrapent pas.
   Construction reprise du design Base44 : pas de cartes bordees, du contenu
   pose sur la page, des filets fins, et un ecart de tailles tres marque. */

:root{
  --nuit:#121412;      /* presque noir, fond des sections sombres */
  --encre:#1A1C1A;     /* texte sur creme */
  --encre-2:#4A514A;
  --creme:#F2EFE9;
  --creme-2:#E7E2D9;
  --sauge:#8A9A82;     /* l'accent : vert sauge */
  --foret:#2D3A2F;
  --titre:"Cormorant Garamond", Georgia, serif;
  --texte:"Inter", system-ui, -apple-system, sans-serif;
  --sortie:cubic-bezier(.22,1,.36,1);
  --g:22px; --barre:60px;
}
*{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--texte);
  font-size:15px;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px))}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 1rem}
h1,h2,h3{margin:0;font-family:var(--titre);font-weight:300;line-height:1}
[id]{scroll-margin-top:80px}
.wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 var(--g)}

/* L'ETIQUETTE en petites capitales — c'est le seul repere decoratif du site,
   et il porte une information (le nom de la section). */
.eti{font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--encre-2);margin:0 0 1.6rem;font-weight:500}
.sombre .eti{color:var(--sauge)}

/* L'ECART DE TAILLES fait tout le travail : titre enorme, texte petit. */
.titre{font-size:clamp(2.6rem,10vw,5.6rem);letter-spacing:-.02em;margin:0 0 1.6rem}
.titre i{font-style:italic;color:var(--sauge)}
.sombre .titre{color:var(--creme)}
.chapo{font-family:var(--titre);font-size:clamp(1.15rem,4.4vw,1.6rem);line-height:1.4;
  font-weight:300;max-width:34ch;margin:0 0 2rem;color:var(--encre)}
.sombre .chapo{color:rgba(242,239,233,.9)}
.txt{font-size:.95rem;color:var(--encre-2);max-width:60ch}
.sombre .txt{color:rgba(242,239,233,.66)}

.sec{padding:76px 0 80px}
.sombre{background:var(--nuit);color:var(--creme)}

/* ── BARRE DU HAUT : elle s'efface quand on descend ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  gap:1rem;padding:.8rem var(--g);
  transition:transform .5s var(--sortie),background .4s var(--sortie),
             opacity .35s var(--sortie)}
/* En haut de page la barre n'a pas de fond : ses liens tombaient sur la partie
   claire de la piece montee et devenaient illisibles. Un voile descendant les
   protege, et il s'efface des que la barre prend son fond plein. */
.nav{isolation:isolate}
.nav::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(18,20,18,.78),rgba(18,20,18,0));
  transition:opacity .4s var(--sortie)}
.nav.pose::after{opacity:0}
.nav.pose{background:rgba(18,20,18,.9);backdrop-filter:blur(14px) saturate(150%)}
.nav.partie{transform:translateY(-110%);opacity:0;pointer-events:none}
.nav__mark{font-family:var(--titre);font-size:1.3rem;color:var(--creme);flex:1;
  letter-spacing:.01em;transition:color .3s var(--sortie)}
.nav__mark:hover{color:var(--sauge)}
.nav__l{display:none}
.nav__tel{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--creme);border:1px solid rgba(242,239,233,.3);padding:.6rem .9rem;
  white-space:nowrap;transition:border-color .35s var(--sortie),
             background .35s var(--sortie),color .35s var(--sortie)}
.nav__tel:hover{border-color:var(--sauge);background:var(--sauge);color:var(--nuit)}

/* ── ACCUEIL : plein ecran, sombre, la piece montee posee dessus ── */
.hero{position:relative;min-height:calc(100svh - var(--barre));background:var(--nuit);color:var(--creme);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:96px 0 34px;overflow:hidden}
/* une lueur chaude derriere la piece, pour qu'elle ne flotte pas dans le vide */
.hero::before{content:"";position:absolute;right:-18%;top:6%;width:120%;height:86%;
  background:radial-gradient(ellipse at 60% 45%,rgba(138,154,130,.22),transparent 62%);
  pointer-events:none}
.hero__in{position:relative;z-index:2}
.hero__eti{font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;
  color:rgba(242,239,233,.55);margin:0 0 1.4rem}
.hero__t{font-size:clamp(3.6rem,19vw,10rem);line-height:.84;letter-spacing:-.025em;
  color:var(--creme)}
.hero__s{font-family:var(--titre);font-style:italic;font-weight:300;
  font-size:clamp(1.3rem,5.6vw,2.4rem);line-height:1.2;
  color:rgba(242,239,233,.82);margin:1.1rem 0 0;max-width:22ch}
.hero__bas{display:none;justify-content:space-between;align-items:flex-end;
  gap:1rem;margin-top:2.4rem;font-size:9.5px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(242,239,233,.45);line-height:1.8}
.hero__bas b{font-weight:500;color:rgba(242,239,233,.62)}
/* Sur telephone la piece montee se place EN HAUT et le texte dessous : posee
   en bas, elle passait par-dessus le titre et le rendait illisible.
   Un voile sombre assure la lisibilite quoi qu'il arrive. */
.hero__img{position:absolute;z-index:1;right:-8%;top:3%;width:74%;max-width:350px;
  pointer-events:none;opacity:.88}
.hero__img img{width:100%;height:auto;will-change:transform}
.hero::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:66%;
  pointer-events:none;
  background:linear-gradient(to top,var(--nuit) 34%,rgba(18,20,18,.88) 66%,transparent)}

/* ── DEUX COLONNES : titre a gauche, details a droite ── */
.duo{display:grid;gap:2.4rem}
.det{border-top:1px solid var(--creme-2);padding-top:1.1rem;margin-top:1.1rem}
.sombre .det{border-top-color:rgba(242,239,233,.16)}
.det:first-child{border-top:0;margin-top:0;padding-top:0}
.det h3{font-size:1.5rem;margin:0 0 .45rem;transition:color .35s var(--sortie)}
.det p{font-size:.92rem;color:var(--encre-2);margin:0}
.sombre .det p{color:rgba(242,239,233,.62)}
.det__n{font-size:9.5px;letter-spacing:.28em;color:var(--sauge);display:block;
  margin:0 0 .5rem;font-family:var(--texte);font-weight:500}
.det:hover h3{color:var(--sauge)}

/* ── LISTE EN FILETS : les formules, les evenements ── */
.fil{list-style:none;margin:0;padding:0}
.fil li{border-top:1px solid var(--creme-2);padding:.72rem 0;font-size:.93rem;
  display:flex;align-items:baseline;gap:.9rem;
  transition:padding-left .4s var(--sortie),color .3s var(--sortie)}
.sombre .fil li{border-top-color:rgba(242,239,233,.16);color:rgba(242,239,233,.72)}
.fil li:hover{padding-left:.55rem;color:var(--encre)}
.sombre .fil li:hover{color:var(--creme)}
.fil li b{font-family:var(--texte);font-weight:500;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sauge);flex:none;width:2.2rem}

/* ── LES PHOTOS : grandes, pleine largeur, jamais en vignette ── */
.vue{margin:2.6rem 0 0}
.vue img{width:100%;height:auto}
.vue figcaption{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--encre-2);margin-top:.8rem}
.sombre .vue figcaption{color:rgba(242,239,233,.5)}

/* ── INFOS PRATIQUES ── */
.pratique{display:grid;gap:1.8rem;margin-top:2.4rem}
.bloc__t{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sauge);margin:0 0 .7rem}
.bloc p,.bloc a{font-size:.95rem;line-height:1.75;color:rgba(242,239,233,.78);margin:0}
.bloc a{border-bottom:1px solid rgba(242,239,233,.24);
  transition:border-color .3s var(--sortie),color .3s var(--sortie)}
.bloc a:hover{color:var(--sauge);border-bottom-color:var(--sauge)}

.act{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.4rem}
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;
  align-items:center;justify-content:center;min-height:50px;padding:0 1.5rem;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  border:1px solid currentColor;
  transition:color .4s var(--sortie),transform .35s var(--sortie)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;
  transform:translateX(-101%);transition:transform .5s var(--sortie)}
.btn:hover::before{transform:none}
.btn:hover{transform:translateY(-2px)}
.btn--plein{background:var(--sauge);border-color:var(--sauge);color:var(--nuit)}
.btn--plein::before{background:var(--creme)}
.sombre .btn{color:var(--creme)}
.sombre .btn:hover{color:var(--nuit)}
.btn--plein:hover,.sombre .btn--plein:hover{color:var(--nuit)}

/* ── PLAN ── */
.plan{line-height:0}
.plan iframe{width:100%;height:320px;border:0;display:block;
  filter:saturate(.5) contrast(.95);transition:filter .6s var(--sortie)}
.plan:hover iframe{filter:none}

/* ── PIED ── */
.pied{background:var(--nuit);color:rgba(242,239,233,.6);padding:44px 0 30px;
  font-size:.86rem}
.pied__n{font-family:var(--titre);font-size:1.9rem;color:var(--creme);margin:0 0 .6rem;
  font-weight:300}
.pied__l{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.4rem;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase}
.pied__l a{transition:color .3s var(--sortie)}
.pied__l a:hover{color:var(--sauge)}
.pied__ml{margin-top:2rem;padding-top:1.2rem;font-size:.74rem;line-height:1.6;
  border-top:1px solid rgba(242,239,233,.14);color:rgba(242,239,233,.4)}

/* ── BARRE D'ACTION TELEPHONE : deux gestes, pas trois ── */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  background:var(--nuit);border-top:1px solid rgba(242,239,233,.16);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.barre a{flex:1;display:flex;align-items:center;justify-content:center;
  min-height:var(--barre);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--creme);transition:background .25s var(--sortie)}
.barre a+a{border-left:1px solid rgba(242,239,233,.16)}
.barre a:active{background:rgba(242,239,233,.1)}
.barre a:first-child{background:var(--sauge);color:var(--nuit)}

.jauge{position:fixed;top:0;left:0;height:2px;background:var(--sauge);width:0;
  z-index:70;pointer-events:none}

/* ── APPARITIONS — un geste par type de bloc, jamais deux fois le meme ── */
.rev{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--sortie),transform .9s var(--sortie)}
.rev.vu{opacity:1;transform:none}
.det.rev{transform:translateY(20px)}
.vue.rev{opacity:0;clip-path:inset(0 0 100% 0);transform:none}
.vue.rev.vu{opacity:1;clip-path:inset(0 0 0 0);
  transition:opacity .5s var(--sortie),clip-path 1.1s var(--sortie)}
.fil li.rev{opacity:0;transform:translateX(-14px)}
.fil li.rev.vu{opacity:1;transform:none}
.no-js .rev{opacity:1;transform:none;clip-path:none}

@media (min-width:760px){
  :root{--g:38px}
  body{padding-bottom:0;font-size:16px}
  .barre{display:none}
  .sec{padding:110px 0 118px}
  .hero{padding:120px 0 44px}
  .hero{min-height:100svh}
  .hero__bas{display:flex;max-width:520px}
  .hero__img{width:46%;max-width:520px;right:2%;top:auto;bottom:0;opacity:1}
  .hero::after{display:none}   /* le texte est a gauche, la piece a droite */
  .duo{grid-template-columns:1fr 1fr;gap:4rem}
  .pratique{grid-template-columns:repeat(3,1fr);gap:2.6rem}
  .plan iframe{height:440px}
  .vue{margin-top:3.4rem}
}
@media (min-width:1100px){
  .nav__l{display:flex;gap:2.2rem;font-size:10px;letter-spacing:.26em;
    text-transform:uppercase;color:rgba(242,239,233,.7)}
  .nav__l a{position:relative;padding-bottom:3px;transition:color .3s var(--sortie)}
  .nav__l a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:var(--sauge);transform:scaleX(0);transform-origin:left;
    transition:transform .4s var(--sortie)}
  .nav__l a:hover{color:var(--creme)}
  .nav__l a:hover::after{transform:scaleX(1)}
  .sec{padding:140px 0 148px}
  .duo{grid-template-columns:.85fr 1fr;gap:6rem}
  .hero__img{width:40%;max-width:560px;right:5%;top:auto;bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rev{opacity:1!important;transform:none!important;clip-path:none!important}
  .jauge{display:none}
  html{scroll-behavior:auto}
}