:root{--creme:#f7ede4;--creme2:#f1e2d3;--terre:#b4643f;--terre-f:#8f4c2e;--olive:#7c8a5a;--ardoise:#5a6d8c;
--brun:#3d3229;--doux:#77685c;--disp:"Lora",serif;--txt:"Mukta",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--txt);background:var(--creme);color:var(--brun);line-height:1.8;font-size:1.04rem;padding-bottom:5.5rem}
a{color:var(--terre-f)}
img{max-width:100%;display:block}

/* ruban de navigation flottant */
nav.ruban{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:80;background:rgba(61,50,41,.94);
 border-radius:999px;padding:.5rem .9rem;display:flex;gap:.15rem;flex-wrap:wrap;justify-content:center;box-shadow:0 10px 30px rgba(61,50,41,.35);max-width:min(96vw,760px)}
nav.ruban a{color:var(--creme);text-decoration:none;font-size:.85rem;letter-spacing:.02em;padding:.4rem .8rem;border-radius:999px;white-space:nowrap}
nav.ruban a:hover{background:rgba(247,237,228,.16)}
nav.ruban a.ici{background:var(--terre);color:#fff}

/* seuil plein écran */
.seuil{min-height:92vh;display:flex;align-items:center;position:relative;overflow:hidden}
.seuil .fond-photo{position:absolute;inset:0}
.seuil .fond-photo img{width:100%;height:100%;object-fit:cover}
.seuil .voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(61,50,41,.25),rgba(61,50,41,.62))}
.seuil .parole{position:relative;z-index:2;width:min(860px,92%);margin-inline:auto;color:#fdf7f0;text-align:center}
.seuil .qui{font-size:.85rem;letter-spacing:.3em;text-transform:uppercase;color:#f0d9c4}
.seuil h1{font-family:var(--disp);font-weight:500;font-size:clamp(2.2rem,6vw,4rem);line-height:1.18;margin:1rem 0}
.seuil .verset{font-family:var(--disp);font-style:italic;font-size:clamp(1.05rem,2.4vw,1.4rem);color:#f6e7d6;max-width:44ch;margin:0 auto}
.seuil .descendre{display:inline-block;margin-top:2.2rem;color:#fdf7f0;text-decoration:none;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid rgba(253,247,240,.6);padding-bottom:.35rem}

/* vagues et arches */
.vague{display:block;width:100%;height:70px;margin-top:-1px}
.clairiere{width:min(880px,92%);margin-inline:auto;padding:3.4rem 0}
.clairiere.vaste{width:min(1080px,94%)}
.petit-mot{font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;color:var(--terre)}
h2.chant{font-family:var(--disp);font-weight:500;font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.22;margin:.6rem 0 1.2rem;color:var(--brun)}
p.riviere{margin-bottom:1.15rem;max-width:66ch;color:#54473c}
p.riviere a{font-weight:600}
.verset-libre{font-family:var(--disp);font-style:italic;font-size:1.25rem;color:var(--ardoise);border-left:3px solid var(--olive);border-radius:0 18px 18px 0;background:var(--creme2);padding:1.2rem 1.6rem;max-width:56ch;margin:1.6rem 0}

/* galets (blocs organiques) */
.jardin{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.8rem}
.galet{flex:1 1 260px;background:#fff;border-radius:26px 60px 26px 60px;padding:1.7rem 1.5rem;box-shadow:0 6px 22px rgba(61,50,41,.08)}
.galet:nth-child(2){border-radius:60px 26px 60px 26px;background:var(--creme2)}
.galet:nth-child(3){border-radius:34px 34px 70px 34px}
.galet h3{font-family:var(--disp);font-weight:500;font-size:1.3rem;color:var(--terre-f);margin-bottom:.5rem}
.galet p{font-size:.96rem;color:#5d5044}
.galet .trait{width:46px;height:26px;margin-bottom:.7rem}

/* mission arche */
.arche{background:var(--brun);color:#f6ead9;border-radius:200px 200px 0 0;margin-top:3rem;padding:4.4rem 1.4rem 3rem;text-align:center}
.arche .petit-mot{color:#e8b98f}
.arche blockquote{font-family:var(--disp);font-style:italic;font-size:clamp(1.05rem,2.3vw,1.45rem);line-height:1.75;max-width:62ch;margin:1.4rem auto}
.arche .src{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:#d8ba9b}
.arche p.riviere{color:#e9d9c6;margin:1.4rem auto 0;max-width:62ch}

/* photos fenêtres */
.fenetres{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:stretch}
figure.fenetre{flex:1 1 300px;margin:0}
figure.fenetre img{width:100%;height:340px;object-fit:cover;border-radius:150px 150px 22px 22px}
figure.fenetre figcaption{font-size:.85rem;color:var(--doux);padding:.7rem .4rem 0;font-style:italic}

/* bouton graine */
.graine{display:inline-block;background:var(--olive);color:#fff;text-decoration:none;font-weight:600;letter-spacing:.04em;
 padding:.85rem 1.8rem;border-radius:999px 999px 999px 4px;transition:.4s ease-out}
.graine:hover{background:var(--terre);transform:translateY(-2px)}
.graine.claire{background:transparent;color:var(--brun);border:2px solid var(--brun)}
.graine.claire:hover{background:var(--brun);color:var(--creme)}

/* formulaire lettre */
form.lettre{max-width:600px;background:#fff;border-radius:34px 34px 34px 90px;padding:2rem 1.8rem;box-shadow:0 8px 26px rgba(61,50,41,.09)}
.sillon{margin-bottom:1.1rem}
.sillon label{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);display:block;margin-bottom:.35rem;font-weight:600}
.sillon input,.sillon textarea,.sillon select{width:100%;border:1.5px solid var(--creme2);border-radius:14px;background:var(--creme);padding:.7rem .9rem;font-family:var(--txt);font-size:1rem;color:var(--brun)}
.sillon input:focus,.sillon textarea:focus{outline:none;border-color:var(--olive)}
#form-ok{display:none;margin-top:1.1rem;background:#eef2e6;border:1.5px solid var(--olive);border-radius:16px;padding:.95rem 1.1rem;color:#4a5a33;font-weight:600}
.colline-carte{border-radius:26px;overflow:hidden;border:3px solid #fff;box-shadow:0 8px 26px rgba(61,50,41,.12);margin-top:1.2rem}
.colline-carte iframe{display:block;width:100%;height:360px;border:0}

/* pied colline */
footer.colline{margin-top:3.4rem}
footer.colline .courbe{display:block;width:100%;height:80px}
footer.colline .fond{background:var(--olive);color:#f4f0e4;text-align:center;padding:0 1.2rem 2.2rem;margin-top:-2px}
footer.colline p{max-width:66ch;margin:0 auto .7rem;font-size:.95rem}
footer.colline a{color:#fdf3d9}
footer.colline .menu{display:flex;gap:1.1rem;flex-wrap:wrap;justify-content:center;margin:.9rem 0;font-size:.85rem}
footer.colline .fin{font-size:.78rem;color:#e4e6cf;letter-spacing:.08em}

@media(max-width:640px){.seuil{min-height:86vh}figure.fenetre img{height:260px}}