/* ------------------------------------------------------------ palette
   Tout se règle ici : changer ces valeurs suffit à recolorer le site. */
:root{
 --fond:#FFF8F1;      /* crème pêche : cartes, barre */
 --encre:#4A3438;     /* titres */
 --texte:#6B5559;     /* corps de texte */
 --doux:#8C7478;      /* texte secondaire */
 --rose:#B9546C;      /* accent principal, rose des fleurs */
 --or:#E3A93B;        /* accent secondaire, cœur jaune des fleurs */
 --trait:#F0D6CF;     /* bordures */
 /* Voiles posés sur l'aquarelle de fond : plus l'opacité est basse, plus les fleurs se voient */
 --voile:rgb(255 248 241 / .84);
 --voile-rose:rgb(253 236 232 / .78);
 --voile-hero:rgb(255 248 241 / .5);
 --g:clamp(20px,5vw,72px);
 --pile:clamp(56px,9vw,112px);
 --duo:clamp(36px,6vw,80px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
section[id]{scroll-margin-top:clamp(76px,13vh,104px)}
body{margin:0;background:var(--fond);color:var(--texte);
 font-family:'Cormorant Garamond',Garamond,Georgia,serif;
 font-size:clamp(18px,1rem + 0.35vw,21px);line-height:1.62;
 -webkit-font-smoothing:antialiased;overflow-x:clip}
/* Aquarelle de fleurs, fixe derrière toute la page. Un calque fixe plutôt que
   background-attachment:fixed, qui ne fonctionne pas sur iPhone. */
body::before{content:"";position:fixed;inset:0;z-index:-1;
 background:url(/images/fleurs.webp) center/cover no-repeat}
img,svg{max-width:100%}
h1,h2,h3{margin:0;line-height:1.08;color:var(--encre);font-weight:500;text-wrap:balance}
p{margin:0}
p+p{margin-top:1em}
a{color:var(--encre)}
a:hover{color:var(--rose)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:var(--g)}
.sec{padding-block:var(--pile);background:var(--voile)}
.roseau{background:var(--voile-rose)}
.petit{font-family:'Jost',system-ui,sans-serif;font-size:.72em;letter-spacing:.16em;text-transform:uppercase}

/* ------------------------------------------------------------ barre */
.barre{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--fond) 94%,transparent);
 -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--trait)}
.barre .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding-block:14px}
.marque{font-style:italic;font-size:clamp(20px,4.2vw,26px);color:var(--encre);text-decoration:none;white-space:nowrap}
.menu{display:flex;flex-wrap:wrap;gap:4px 24px;order:3;width:100%}
.menu a{color:var(--texte);text-decoration:none;padding-block:4px;font-size:clamp(16px,1.8vw,18px)}
.bouton{display:inline-block;padding:10px 24px;border:1px solid var(--encre);border-radius:999px;
 font-family:'Jost',system-ui,sans-serif;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--encre);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.bouton:hover{background:var(--encre);color:var(--fond)}
.bouton.plein{background:var(--encre);color:var(--fond)}
.bouton.plein:hover{background:var(--rose);border-color:var(--rose)}
.droite{display:flex;align-items:center;gap:14px}
.langues{display:flex;font-family:'Jost',system-ui,sans-serif;font-size:13px;letter-spacing:.1em}
.langues a{color:var(--doux);text-decoration:none;padding:6px 5px}
.langues a+a::before{content:"·";color:var(--trait);margin-right:10px;margin-left:-5px}
.langues a[aria-current]{color:var(--encre);font-weight:500}
@media (min-width:900px){.menu{order:0;width:auto;gap:32px}.barre .wrap{padding-block:18px}.droite{gap:22px}}

/* ------------------------------------------------------------ en-tête */
.hero{text-align:center;padding-top:clamp(48px,8vw,96px);
 background:radial-gradient(ellipse 70% 60% at 50% 40%,rgb(255 248 241 / .9),var(--voile-hero))}
.hero .wrap{display:flex;flex-direction:column;align-items:center}
.hero .sur{font-style:italic;font-size:clamp(18px,2.4vw,24px)}
.hero h1{margin-top:.3em;font-size:clamp(44px,9vw,96px);letter-spacing:.02em}
.hero h1 .et{font-style:italic;color:var(--rose);font-size:.7em;padding-inline:.1em}
.hero .date{margin-top:1.4em;color:var(--encre)}
.hero .lieu-h{margin-top:.4em;font-style:italic;font-size:clamp(18px,2.4vw,24px)}
.hero .actions{margin-top:2em}

/* compte à rebours */
.compte{display:flex;justify-content:center;gap:clamp(10px,3vw,28px);margin-top:1.8em}
.compte>div{display:flex;flex-direction:column;align-items:center;min-width:clamp(62px,15vw,92px);
 padding:.5em .4em .6em;background:rgb(255 248 241 / .7);border:1px solid var(--trait);border-radius:6px}
.compte .n{font-size:clamp(30px,6vw,48px);line-height:1.05;color:var(--encre);font-variant-numeric:tabular-nums lining-nums}
.compte .u{color:var(--rose);font-size:clamp(10px,2.2vw,12px);margin-top:.35em}
.compte-fin{font-style:italic;color:var(--rose);font-size:clamp(24px,4vw,34px)}

.brin{display:block;width:84px;height:17px;margin:.9em auto 0;color:var(--rose)}
.entete{text-align:center;max-width:720px;margin-inline:auto}
.entete h2{font-size:clamp(34px,5.4vw,56px)}
.chapo{margin-top:1em;font-style:italic;font-size:clamp(18px,2.2vw,22px)}

/* ------------------------------------------------------------ mot d'accueil */
.accueil p{max-width:680px;margin-inline:auto;text-align:center}
.accueil p:first-child{color:var(--encre);font-size:clamp(20px,2.8vw,26px)}

/* ------------------------------------------------------------ deux colonnes */
.duo{display:grid;gap:var(--duo)}
@media (min-width:900px){.duo{grid-template-columns:1.25fr 1fr;align-items:start}}
.adr{font-style:italic;color:var(--doux);margin-top:.4em}
.txt h2{font-size:clamp(34px,5vw,52px)}
.txt .brin{margin-inline:0}
.txt p{margin-top:1em}
.portrait{display:block;width:100%;max-width:560px;height:auto;margin-top:1.4em;
 border-radius:3px;box-shadow:0 10px 30px rgb(74 52 56 / .12)}

/* galerie de souvenirs : colonnes façon mosaïque, portraits et paysages mélangés */
.galerie{columns:2;column-gap:clamp(12px,2.4vw,28px);margin-top:clamp(36px,5vw,60px)}
@media (min-width:900px){.galerie{columns:3}}
.galerie img{display:block;width:100%;height:auto;margin-bottom:clamp(12px,2.4vw,28px);break-inside:avoid;
 border-radius:3px;box-shadow:0 10px 30px rgb(74 52 56 / .12)}

.fiche{background:var(--fond);border:1px solid var(--trait);border-radius:4px;padding:clamp(22px,3vw,36px)}
.fiche .tete{color:var(--doux);margin-bottom:.8em}
.info{display:flex;justify-content:space-between;gap:16px;padding-block:.7em;border-top:1px solid var(--trait)}
.info .lab{color:var(--doux)}
.info .v{color:var(--encre);text-align:right}

/* ------------------------------------------------------------ programme */
.jours{display:grid;gap:clamp(40px,5vw,56px);margin-top:clamp(40px,6vw,72px)}
@media (min-width:900px){.jours{grid-template-columns:repeat(3,1fr);gap:40px}}
.jour h3{font-size:clamp(30px,4vw,40px)}
.jour .sous{display:block;color:var(--rose);margin-top:.3em;margin-bottom:1.2em}
.etape{position:relative;padding:0 0 1.3em 26px;border-left:1px solid var(--trait)}
.etape:last-child{border-left-color:transparent}
.etape::before{content:"";position:absolute;left:-5px;top:.45em;width:9px;height:9px;border-radius:50%;
 background:var(--fond);border:1px solid var(--rose)}
.etape .h{display:block;color:var(--doux)}
.etape .t{color:var(--encre);font-size:1.1em;line-height:1.3}
.etape .s{font-style:italic;font-size:.94em}

/* ------------------------------------------------------------ où dormir */
.zones{display:grid;gap:clamp(32px,4vw,48px);margin-top:clamp(40px,6vw,64px)}
@media (min-width:900px){.zones{grid-template-columns:repeat(2,1fr)}}
.z-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;
 padding-bottom:.6em;border-bottom:1px solid var(--encre)}
.z-tete h3{font-size:clamp(24px,3vw,30px)}
.z-dist{color:var(--doux)}
.adr-l{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding-block:.8em;border-bottom:1px solid var(--trait)}
.adr-l .nom{color:var(--encre);text-decoration:none;font-size:1.08em}
.adr-l .nom:hover{text-decoration:underline;text-decoration-thickness:1px}
.adr-l .det{display:block;font-style:italic;font-size:.9em}
.adr-l .prix{color:var(--encre);text-align:right;white-space:nowrap}
.adr-l .prix span{display:block;font-size:.8em;color:var(--doux);font-style:italic}

/* ------------------------------------------------------------ venir */
.cartes{display:grid;gap:20px;margin-top:clamp(40px,6vw,64px)}
@media (min-width:700px){.cartes{grid-template-columns:repeat(3,1fr)}}
.carte{background:var(--fond);border:1px solid var(--trait);border-radius:4px;padding:clamp(22px,3vw,32px)}
.carte h3{font-size:clamp(24px,3vw,28px);margin-top:.3em;margin-bottom:.5em}
.carte .ico{width:34px;height:34px;color:var(--rose)}

/* ------------------------------------------------------------ questions */
.faq{max-width:760px;margin:clamp(40px,6vw,64px) auto 0}
.faq details{border-bottom:1px solid var(--trait);padding-block:.9em}
.faq summary{cursor:pointer;color:var(--encre);font-size:1.1em;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--rose);font-family:'Jost',sans-serif;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:.6em}

/* ------------------------------------------------------------ réponse */
.reponse{text-align:center}
.reponse .bouton{margin-top:2em;padding:14px 34px}
.reponse .limite{margin-top:1.2em;color:var(--doux);font-style:italic}

/* ------------------------------------------------------------ pied */
.pied{background:var(--voile);padding-block:clamp(48px,7vw,80px);text-align:center;border-top:1px solid var(--trait)}
.pied .nom{font-style:italic;color:var(--encre);font-size:clamp(26px,4.4vw,36px)}
.pied .ou{color:var(--doux);margin-top:.4em}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}