/* Page micro-aventures : direction « le lieu porte la page » (design-taste-frontend).
   Polices hébergées sur le site (aucune requête vers un tiers). */
@font-face{font-family:Gambarino;src:url(/fonts/gambarino-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(/fonts/general-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(/fonts/general-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  --bg:#ffffff;--surface:#f4eee4;--ink:#2b2f2e;--muted:#3f4544;
  --accent:#34504f;--accent-ink:#fff;--field:#34504f;--field-ink:#fff;
  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:1.125rem;
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2.25rem,1.3rem + 3.2vw,4rem);--step-h2:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);
  --marge:clamp(16px,5vw,72px);
  --display:Gambarino,Georgia,"Times New Roman",serif;
  --texte:"General Sans",Arial,Helvetica,sans-serif;
  --ressort:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.micro{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.55 var(--texte);-webkit-font-smoothing:antialiased}
.micro img{display:block;max-width:100%;height:auto}
.micro a{color:inherit}
.micro :focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.micro .sr{position:absolute;left:-9999px}
.micro .sr:focus{left:12px;top:12px;z-index:100;background:#fff;padding:8px 12px}
.micro h1,.micro h2,.micro h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:.95;margin:0;text-wrap:balance}
.micro p{margin:0 0 1em}

/* ---------- première image ---------- */
.m-hero{position:relative;height:100svh;min-height:560px;color:#fff;overflow:hidden;background:#222;isolation:isolate}
.m-hero .fond{position:absolute;inset:0;z-index:-2}
.m-hero .fond img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.m-hero .fond img.on{opacity:1}
.m-hero .fond img{transform:scale(1.04);animation:derive 26s ease-in-out infinite alternate}
@keyframes derive{to{transform:scale(1.12) translate3d(-1.2%,.6%,0)}}
.m-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:-1;background:linear-gradient(to top,rgba(18,22,14,.7),rgba(18,22,14,0))} /* taste-skill-ignore : voile neutre sous le titre */
.m-hero::after{content:"";position:absolute;left:0;right:0;top:0;height:30%;z-index:-1;background:linear-gradient(to bottom,rgba(18,22,14,.62),rgba(18,22,14,0))} /* taste-skill-ignore : voile neutre sous la navigation */
.m-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px var(--marge)}
.m-nav .nom{font:700 17px/1 var(--texte);text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.m-nav .nom img{width:34px;height:34px;border-radius:50%;background:#fff}
.m-nav .droite{display:flex;align-items:center;gap:26px}
.m-nav .m-bouton{min-height:44px;padding:0 20px}
.m-nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-size:17px;font-weight:700}
.m-nav a{text-decoration:none;display:inline-block;padding:10px 2px;transition:opacity .2s}
.m-nav a:hover{opacity:.7}
.m-bas{position:absolute;left:0;right:0;bottom:0;padding:0 var(--marge) clamp(18px,3.2vh,34px)}
.m-bas .rangee{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(6px,1.2vh,14px)}
.m-bas .soutien{font-weight:500;font-size:18px;line-height:1.4;max-width:30ch;margin:0}
.micro .m-bouton{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;background:var(--bg);color:var(--ink);font:500 16px/1 var(--texte);text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:transform .25s var(--ressort),background .2s}
.micro .m-bouton:hover{background:#fff;transform:translateY(-2px)}
.micro .m-bouton:active{transform:scale(.97)}
.micro .m-bouton.plein{background:var(--accent);color:var(--accent-ink)}
.micro .m-bouton.plein:hover{background:#223a39;color:var(--accent-ink)}
.m-hero h1{font-size:12.6vw;line-height:.86;letter-spacing:-.03em;white-space:nowrap;margin:0 auto;width:max-content;max-width:none;text-align:center}

/* ---------- sections ---------- */
.m-sec{padding:clamp(70px,10vw,130px) var(--marge)}
.grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px)}

/* intro */
.m-intro{padding-top:clamp(70px,14vh,140px);padding-bottom:clamp(90px,11vw,150px)}
.m-intro .para{grid-column:7/13;margin:0;font:400 clamp(24px,1.8vw,26px)/1.28 var(--display);letter-spacing:-.01em;text-indent:3em;text-wrap:pretty}
.m-intro .photo{grid-column:1/4;grid-row:1;align-self:end;margin-bottom:-60px}
.m-intro .photo img{width:100%;aspect-ratio:1/1;object-fit:cover}
.m-intro .note{grid-column:1/3;grid-row:2;font-size:14px;line-height:1.45;color:var(--ink);margin:96px 0 0;max-width:180px}

/* six formules */
.m-show{position:relative;height:auto;min-height:100svh;padding:0;color:#fff;background:#222;isolation:isolate;display:flex;flex-direction:column}
.m-show>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.m-show::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(20,22,16,.42)}
.m-show .texte{padding:clamp(60px,10vh,120px) var(--marge) 40px 18%;max-width:900px}
.m-show .texte h2{font-size:var(--step-head);margin:0 0 .35em}
.m-show .texte p{font-size:clamp(22px,1.8vw,26px);line-height:1.3;max-width:34ch}
.slips{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:auto;padding:0 var(--marge);align-items:end}
.slip{appearance:none;border:0;border-radius:0;text-align:left;background:var(--bg);color:var(--ink);font:400 16px/1.45 var(--texte);padding:20px 18px 26px;cursor:pointer;transition:transform .35s var(--ressort),background .2s;transform-origin:50% 100%}
.slip:nth-child(1){min-height:34svh}.slip:nth-child(2){min-height:40svh}.slip:nth-child(3){min-height:30svh}
.slip:nth-child(4){min-height:44svh}.slip:nth-child(5){min-height:36svh}.slip:nth-child(6){min-height:42svh}
.slip:nth-child(2){transform:rotate(-1.2deg)}.slip:nth-child(5){transform:rotate(1.4deg)}
.slip:hover{transform:translateY(-10px) rotate(0)}
.slip b{display:block;font:500 18px/1.3 var(--texte);margin-bottom:6px}
.slip .tiret{display:block;color:var(--muted);letter-spacing:.2em;margin-bottom:8px;overflow:hidden;white-space:nowrap}
.slip .etat{display:block;margin-top:14px;font:500 14px/1 var(--texte);color:var(--accent)}
.slip[aria-pressed="true"]{background:var(--field);color:var(--field-ink)}
.slip[aria-pressed="true"] .tiret,.slip[aria-pressed="true"] .etat{color:#cfe0df}
.slip[aria-pressed="true"]{transform:translateY(-14px) rotate(0)}

/* journée : rangée à faire glisser */
.m-moments{padding-left:0;padding-right:0}
.m-moments .tete{display:flex;justify-content:space-between;align-items:center;padding:0 var(--marge);margin-bottom:22px}
.m-moments h2{font-size:var(--step-h2)}
.m-moments .fleches{display:flex;gap:8px}
.fleche{width:48px;height:48px;border:0;border-radius:0;background:var(--ink);color:var(--bg);font:500 20px/1 var(--texte);cursor:pointer;transition:transform .2s var(--ressort),background .2s}
.fleche:hover{background:var(--accent);transform:translateY(-2px)}
.fleche:active{transform:scale(.94)}
.barre{height:6px;background:var(--surface);margin:0 var(--marge) 34px;position:relative}
.barre i{position:absolute;left:0;top:0;bottom:0;width:20%;background:var(--ink);transition:left .15s linear,width .15s linear}
.rangee-m{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--marge);padding:0 var(--marge) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rangee-m::-webkit-scrollbar{display:none}
.moment{flex:0 0 280px;scroll-snap-align:start}
.moment .legende{font:500 18px/1.3 var(--texte);margin:0 0 .45em}
.moment p.t{font-size:16px;line-height:1.5;color:var(--ink);margin:0}
.moment .espace{display:block}
.moment .vue{aspect-ratio:4/5;background:var(--surface);overflow:hidden;position:relative}
.moment .vue img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ressort)}
.moment:hover .vue img{transform:scale(1.05)}
.moment .vue.champ{background:var(--field);color:var(--field-ink);display:flex;align-items:flex-end;padding:20px}
.moment .vue.champ.sable{background:var(--surface);color:var(--ink)}
.moment .vue.champ span{font:400 clamp(28px,2.4vw,35px)/1 var(--display);letter-spacing:-.02em}
.moment .cr{font-size:14px;color:var(--muted);margin-top:8px}
.moment .cr a{text-decoration:underline;text-underline-offset:3px}

/* galerie, paires décalées */
.m-gal{background:var(--surface);padding-top:clamp(60px,9vw,130px);padding-bottom:clamp(20px,4vw,60px)}
.paire{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);margin-bottom:clamp(70px,13vh,150px)}
.paire figure{margin:0}
.paire img{width:100%;height:100%;object-fit:cover}
.paire figcaption{font-size:14px;line-height:1.4;color:var(--ink);margin-top:10px}
.p1 .a{grid-column:1/6}.p1 .a img{aspect-ratio:3/4}
.p1 .b{grid-column:7/13;margin-top:16vh}.p1 .b img{aspect-ratio:5/4}
.p2 .a{grid-column:6/13}.p2 .a img{aspect-ratio:3/2}
.p2 .b{grid-column:1/5;grid-row:1;margin-top:14vh}.p2 .b img{aspect-ratio:4/5}
.p3 .a{grid-column:7/13}.p3 .a img{aspect-ratio:3/4}
.p3 .b{grid-column:1/7;grid-row:1;margin-top:12vh}.p3 .b img{aspect-ratio:5/4}
.clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ressort)}
.clip.vu{clip-path:inset(0)}

/* questions */
.m-faq{background:var(--surface);padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);padding-left:var(--marge);padding-right:var(--marge)}
.m-faq .col{grid-column:1/6;padding:clamp(70px,10vw,130px) 0}
.m-faq h2{font-size:var(--step-h2);margin-bottom:.5em}
.m-faq .faits{font-size:18px;margin:0 0 2.2em;padding:0;list-style:none}
.m-faq .faits li{margin:.3em 0}
.m-faq details{margin:0 0 28px}
.m-faq summary{font:500 18px/1.35 var(--texte);cursor:pointer;list-style:none;position:relative;padding-right:34px;min-height:44px}
.m-faq summary::-webkit-details-marker{display:none}
.m-faq summary::after{content:"";position:absolute;right:6px;top:.55em;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .3s var(--ressort)}
.m-faq details[open] summary::after{transform:rotate(-135deg);top:.8em}
.m-faq details p{font-size:18px;color:var(--ink);margin:.7em 0 0;max-width:46ch}
.m-faq .boutons{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:34px}
.m-faq .lien{font:500 18px var(--texte);text-underline-offset:5px}
.m-faq .vis{grid-column:7/13;position:relative;margin-top:0;padding-bottom:80px}
.m-faq .vis .haute{height:100%;min-height:560px;object-fit:cover;width:100%;aspect-ratio:3/4}
.m-faq .vis .carre{position:absolute;left:-40px;bottom:120px;width:34%;aspect-ratio:1/1;object-fit:cover}

/* appel : trois photos puis un champ */
.m-cta .trio{display:grid;grid-template-columns:repeat(3,1fr);height:40svh;min-height:240px}
.m-cta .trio img{width:100%;height:100%;object-fit:cover}
.m-cta .champ{background:var(--field);color:var(--field-ink);min-height:44svh;padding:clamp(40px,6vw,80px) var(--marge);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);position:relative}
.m-cta .dit{grid-column:1/8}
.m-cta .dit h2{font-size:var(--step-h2);line-height:1.12;margin:0 0 1em;max-width:22ch}
.m-cta .dit h2 a{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px;transition:text-decoration-color .2s}
.m-cta .dit h2 a:hover{text-decoration-color:#cfe0df}
.m-cta .dit p{font-size:18px;max-width:46ch}
.m-cta .resume{font:500 18px/1.4 var(--texte);color:#cfe0df;min-height:2.8em;margin:0 0 1em}
.m-cta .moi{grid-column:11/13;align-self:end;justify-self:end;width:150px}
.m-cta .moi img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* pied de page */
.m-pied{background:var(--ink);color:var(--bg);min-height:92svh;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(28px,5vw,56px) var(--marge) 20px}
.m-pied .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;font-size:16px;line-height:1.5}
.m-pied ul{list-style:none;margin:0;padding:0}
.m-pied li{margin:.15em 0}
.m-pied .cols b{display:block;font-weight:500;color:#fff;margin-bottom:.4em}
.m-pied .cols a{text-decoration:none;display:inline-block;padding:3px 0}
.m-pied .cols a:hover{text-decoration:underline}
.m-pied .mot{align-self:end;margin:0;width:100%}
.m-pied .mot svg{display:block;width:100%;height:auto}
.m-pied .legal{font-size:14px;color:#b7b2a2;margin:14px 0 0;max-width:110ch}
.m-pied .legal a{text-decoration:underline}

/* apparition */
.js .m-rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ressort),transform .9s var(--ressort);transition-delay:var(--d,0s)}
.js .m-rv.vu{opacity:1;transform:none}

@media (max-width:1100px){
  .m-nav ul{display:none}
}
@media (max-width:860px){
  .m-nav ul{gap:14px;font-size:14px}
  .m-nav ul{display:none}
  .m-hero h1{font-size:15.2vw;white-space:normal;text-align:left;line-height:.9;width:auto;margin:0}
  .m-bas .rangee{align-items:flex-start;flex-direction:column;gap:14px}
  .m-nav .m-bouton{padding:0 14px;font-size:14px;min-height:44px}
  .m-nav .droite{gap:12px}
  .m-intro .para{grid-column:1/13;font-size:22px;text-indent:0}
  .m-intro .photo{grid-column:7/13;grid-row:2;margin:34px 0 0;align-self:start}
  .m-intro .photo img{aspect-ratio:4/5}
  .m-intro .note{grid-column:1/7;grid-row:2;align-self:end;margin:34px 0 0}
  .m-show .texte{padding-left:var(--marge)}
  .slips{grid-template-columns:repeat(6,34vw);overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:0}
  .slip{scroll-snap-align:start}
  .moment{flex-basis:72vw}
  .moment .espace{height:40px!important}
  .m-moments .fleches{display:none}
  .paire{display:block;margin-bottom:64px}
  .paire figure{margin:0 0 64px}
  .p1 .a{width:70%}.p1 .b{width:84%;margin-left:auto;margin-top:0}
  .p2 .a{width:100%}.p2 .b{width:56%;margin-top:0}
  .p3 .a{width:84%;margin-left:auto}.p3 .b{width:70%;margin-top:0}
  .m-faq{display:block;padding:0}
  .m-faq .col{padding:48px var(--marge) 56px}
  .m-faq .vis{order:-1;padding:0}
  .m-faq .vis .haute{aspect-ratio:4/5;min-height:0}
  .m-faq .vis .carre{left:auto;right:12px;bottom:-30px;width:38%}
  .m-cta .trio{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}
  .m-cta .trio img:first-child{grid-column:1/3;aspect-ratio:4/3;height:auto}
  .m-cta .trio img{aspect-ratio:1/1;height:auto}
  .m-cta .champ{display:block;padding-bottom:140px}
  .m-cta .moi{position:absolute;right:var(--marge);bottom:30px;width:96px}
  .m-pied .cols{grid-template-columns:1fr 1fr;gap:32px 18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .m-hero .fond img{animation:none;transform:none;transition:none}
  .js .m-rv,.clip{opacity:1;transform:none;clip-path:none;transition:none}
  .slip,.m-bouton,.fleche{transition:none}
}

.indice{display:none;margin:0;padding:0 var(--marge) 10px;font-size:14px;font-weight:500}
@media (max-width:860px){.indice{display:block}.m-show .indice{color:#fff}.indice-m{padding-bottom:12px}}

/* v6 : palette d'avant */
.m-pied{background:#1e302f}
.m-show{background:#1e302f}
.m-cta .champ{background:#34504f}
.m-hero{background:#1e302f}
.m-gal{background:#f4eee4}
.m-faq{background:#f4eee4}
.moment .vue.champ.sable{background:#f4eee4}
.slip .etat{color:#34504f}

/* Logo de la barre : la boussole s'oriente à l'arrivée (même animation que sur les autres pages) */
.m-nav .nom .emb{position:relative;display:block;width:34px;height:34px;flex:none}
.m-nav .nom .emb img{display:block;width:100%;height:100%}
html.logo-anime .m-nav .nom .emb img{animation:boussole 1.5s cubic-bezier(.22,.9,.3,1) .1s both}
@keyframes boussole{0%{transform:rotate(-80deg) scale(.86)}58%{transform:rotate(10deg) scale(1.04)}78%{transform:rotate(-3.5deg) scale(1)}100%{transform:none}}
html.logo-anime .m-nav .nom .emb::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #fff;opacity:0;animation:halo 1.4s ease-out .9s forwards;pointer-events:none}
@keyframes halo{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}
html.logo-anime .m-nav .nom .nom-texte{animation:ecrit .9s cubic-bezier(.3,.7,.2,1) .7s both}
@keyframes ecrit{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){html.logo-anime .m-nav .nom *{animation:none!important}}