@font-face{font-family:Youngish;src:url(/a/typo/young.woff2) format("woff2");font-display:swap}
@font-face{font-family:Mulie;src:url(/a/typo/mulish.woff2) format("woff2");font-weight:200 1000;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fdf1ea;color:#2a1b2e;font:17px/1.62 Mulie,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.tiroir-titre,.bienvenue-titre,.cp-ville{font-family:Youngish,Georgia,serif;font-weight:400;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,1.4rem + 3vw,3.4rem);margin:.2em 0 .4em}
h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);margin:0 0 .7em}
h3{font-size:1.2rem;margin:0}
a{color:#b8392b}
a:hover{color:#2a1b2e}
img{max-width:100%;display:block}
p{margin:0 0 1em}
button{font:inherit;cursor:pointer}
*:focus-visible{outline:3px dashed #b9a3e3;outline-offset:3px}

.top{display:flex;align-items:center;gap:1.4rem;padding:1rem clamp(1rem,5vw,3rem)}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#2a1b2e;font-weight:800;font-size:.95rem;line-height:1.1;margin-right:auto}
.logo svg{width:46px;height:30px}
.logo b{color:#e2513f;font-weight:900}
.menu{display:flex;gap:1.2rem}
.menu a{color:#2a1b2e;text-decoration:none;font-weight:700}
.menu a:hover{color:#e2513f}
.join{border:0;border-radius:40px;background:#e2513f;color:#fff;font-weight:800;padding:.65em 1.3em;box-shadow:0 4px 0 #a8382a;transition:transform .12s}
.join:hover{transform:translateY(-2px)}
.join.big{font-size:1.08rem;padding:.85em 1.6em}
@media (max-width:700px){.menu{display:none}.top{gap:.6rem}}

#page{max-width:1160px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem) 4rem}
.chemin{font-size:.9rem;color:#7a5f6e}
.chemin a{color:inherit}
.chapeau{font-size:1.2rem;color:#4a3446}

.intro{display:grid;gap:2rem;align-items:center;padding:1.5rem 0 2.5rem}
@media (min-width:900px){.intro{grid-template-columns:1.3fr .9fr}}
.carte-postale{position:relative;background:#fff;border-radius:6px;padding:1.6rem 1.6rem 1.2rem;transform:rotate(1.5deg);box-shadow:0 18px 40px -22px rgba(42,27,46,.5);border:10px solid #fff;outline:2px dashed #e7c9bd;outline-offset:-18px}
.cp-ville{font-size:2rem;margin:0}
.cp-code{font-weight:900;letter-spacing:.2em;color:#e2513f}
.carte-postale dl{margin:0;display:grid;gap:.4rem}
.carte-postale dl div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid #f3e4dc;padding-bottom:.3rem}
.carte-postale dt{color:#7a5f6e;font-size:.9rem}
.carte-postale dd{margin:0;font-weight:800;text-align:right}

.mur{margin:2rem 0 3rem}
.mots{columns:3 260px;column-gap:1.3rem}
.mot{break-inside:avoid;display:block;margin:0 0 1.3rem;padding:1.2rem 1.2rem 1rem;border-radius:4px 22px 22px 22px;box-shadow:0 10px 24px -18px rgba(42,27,46,.6)}
.mot.t0{background:#ffe1d8;transform:rotate(-.8deg)}
.mot.t1{background:#e8e0f7;transform:rotate(.6deg)}
.mot.t2{background:#dcefe0;transform:rotate(-.4deg)}
.mot.t3{background:#fff2cf;transform:rotate(.9deg)}
.visage{width:64px;height:64px;border-radius:50%;object-fit:cover;float:right;margin:0 0 .5rem .8rem;border:3px solid #fff}
.mot h3 a,.mot h1 a{color:#2a1b2e;text-decoration:none}
.mot .elle-cherche{font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#b8392b;margin:.2rem 0 .6rem}
.mot .mot-texte{font-size:1.02rem}
.mot .ou{font-size:.85rem;color:#7a5f6e;margin:0 0 .5rem}
.affinites{list-style:none;padding:0;margin:0 0 .8rem;display:flex;flex-wrap:wrap;gap:.35rem}
.affinites li{background:rgba(255,255,255,.7);border-radius:20px;padding:.05rem .65rem;font-size:.8rem;font-weight:700}
.repondre{border:2px solid #2a1b2e;background:transparent;border-radius:30px;padding:.35em 1em;font-weight:800;font-size:.9rem}
.repondre:hover{background:#2a1b2e;color:#fff}
.mot-seul{max-width:560px;margin:1rem auto 2rem}
.mot-seul .mot{transform:none;padding:1.8rem}
.mot-seul h1{font-size:2rem}
.mot.mini{transform:rotate(-2deg);max-width:320px}
.pile .mot.mini:nth-child(2){transform:rotate(2deg) translateX(40px)}
.pile .mot.mini:nth-child(3){transform:rotate(-1deg) translateX(10px)}

.proches{margin:2.5rem 0}
.defile{list-style:none;padding:0 0 .8rem;margin:0 0 1rem;display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory}
.defile li{scroll-snap-align:start;flex:none}
.defile a{display:flex;flex-direction:column;min-width:150px;background:#fff;border-radius:18px;padding:.8rem 1rem;text-decoration:none;color:#2a1b2e;border:2px solid #f3e4dc}
.defile a:hover{border-color:#e2513f}
.defile span{font-size:.85rem;color:#7a5f6e}

.reperes{margin:3rem 0}
.trois{display:grid;gap:1rem}
@media (min-width:800px){.trois{grid-template-columns:repeat(3,1fr)}}
.repere{background:#2a1b2e;color:#fbe9e2;border-radius:22px;padding:1.3rem;margin:0;font-size:1rem}
.repere::before{content:"";display:block;width:26px;height:16px;margin-bottom:.7rem;background:radial-gradient(circle at 8px 8px,#e2513f 7px,transparent 8px),radial-gradient(circle at 18px 8px,#b9a3e3 7px,transparent 8px)}

.questions{max-width:780px;margin:3rem 0}
.qr{padding:1rem 0;border-top:2px dotted #e7c9bd}
.qr h3{font-size:1.15rem;margin-bottom:.4rem}
.qr p{margin:0;color:#4a3446}

.trouver{display:grid;grid-template-columns:1fr auto;gap:.5rem;max-width:520px;margin:1rem 0}
.trouver label{grid-column:1/-1;font-weight:800}
.trouver input{border:2px solid #2a1b2e;border-radius:30px;padding:.75em 1.1em;font:inherit;background:#fff}
.trouver button{border:0;border-radius:30px;background:#2a1b2e;color:#fff;font-weight:800;padding:0 1.3em}
.pistes{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem;margin:0}
.pistes[hidden]{display:none}
.pistes a{background:#fff;border:2px solid #b9a3e3;border-radius:20px;padding:.15rem .8rem;text-decoration:none;color:#2a1b2e;font-weight:700;font-size:.9rem}
.autre{background:#fff;border-radius:28px;padding:1.4rem 1.6rem;margin-top:3rem}

.etapes-rondes ol{list-style:none;padding:0;display:grid;gap:1rem}
@media (min-width:760px){.etapes-rondes ol{grid-template-columns:repeat(3,1fr)}}
.etapes-rondes li{background:#fff;border-radius:30px;padding:1.2rem 1.4rem;font-weight:700;display:flex;gap:.9rem;align-items:center}
.etapes-rondes span{flex:none;width:44px;height:44px;border-radius:50%;background:#b9a3e3;display:grid;place-items:center;font-family:Youngish,serif;font-size:1.3rem}
.tuiles{list-style:none;padding:0;display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.tuiles a{display:flex;flex-direction:column;background:#fff;border-radius:20px;padding:.9rem 1rem;text-decoration:none;color:#2a1b2e;border-bottom:4px solid #9cc5a1}
.tuiles span{font-size:.85rem;color:#7a5f6e}
.villes-phares,.nuage,.etapes-rondes{margin:2.6rem 0}
.nuage-liste{line-height:2.2}
.nuage-liste a{font-family:Youngish,serif;text-decoration:none;color:#2a1b2e;margin-right:.6rem}
.nuage-liste a:hover{color:#e2513f}
.nuage-liste .p1{font-size:1rem}.nuage-liste .p2{font-size:1.25rem}.nuage-liste .p3{font-size:1.5rem}.nuage-liste .p4{font-size:1.8rem}

.tete{max-width:820px;margin:1rem 0 2rem}
.regions{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.region{background:#fff;border-radius:24px;padding:1.2rem 1.4rem}
.region h2{font-size:1.4rem;margin-bottom:.2rem}
.region h2 a{color:#2a1b2e;text-decoration:none}
.region p{font-size:.9rem;color:#7a5f6e}
.region .liens{color:#2a1b2e;line-height:1.9}
.dep{margin:2rem 0}
.dep h2 span{font-family:Mulie,sans-serif;font-size:.9rem;font-weight:900;background:#b9a3e3;border-radius:20px;padding:.1rem .6rem;vertical-align:middle}
.colonnes{list-style:none;padding:0;columns:4 180px}
.colonnes li{padding:.2rem 0}

.lecture{max-width:720px;background:#fff;border-radius:30px;padding:clamp(1.4rem,4vw,2.8rem);margin-top:1.5rem}
.lecture h2{font-size:1.5rem;margin-top:1.6em}

.bas{background:#2a1b2e;color:#e9d8df;padding:2.4rem clamp(1rem,5vw,3rem)}
.bas a{color:#fff}
.bas-logo{display:flex;gap:.7rem;align-items:center;font-weight:700}
.bas-logo svg{width:46px;height:30px;flex:none}
.bas-note{font-size:.85rem;opacity:.8;margin-top:1rem}

.voile{position:fixed;inset:0;background:rgba(42,27,46,.45);z-index:40}
.voile[hidden]{display:none}
.tiroir{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:#fff;z-index:41;padding:2rem 1.6rem;overflow-y:auto;box-shadow:-20px 0 50px -30px #2a1b2e;transform:translateX(0);transition:transform .25s}
.tiroir[hidden]{display:block;transform:translateX(105%);visibility:hidden}
.fermer{position:absolute;top:.8rem;right:.8rem;border:0;background:#fdf1ea;border-radius:50%;width:40px;height:40px;font-size:1rem}
.tiroir-titre{font-size:1.9rem;margin:0 0 .4rem}
.tiroir-pour{color:#b8392b;font-weight:800}
.tiroir-pour[hidden]{display:none}
.forme{display:grid;gap:.8rem;margin:1.2rem 0}
.forme label{display:grid;gap:.3rem;font-weight:800;font-size:.92rem}
.forme input[type=email],.forme input[type=password]{border:2px solid #e7c9bd;border-radius:14px;padding:.75em .9em;font:inherit}
.forme input:focus{border-color:#e2513f;outline:none}
.forme .case{display:flex;gap:.5rem;align-items:flex-start;font-weight:600}
.forme .case input{accent-color:#e2513f;margin-top:.35rem}
.deja summary{cursor:pointer;font-weight:800;color:#7a5f6e}
.oups{color:#b8392b;font-weight:800}
.oups[hidden]{display:none}
.direct{display:block;font-size:.88rem;margin-top:1.5rem;color:#7a5f6e}

.bienvenue{position:fixed;inset:0;z-index:60;background:radial-gradient(circle at 30% 30%,#ffd6c9,#e8e0f7 60%,#dcefe0);display:grid;place-items:center;padding:1rem}
.bienvenue[hidden]{display:none}
.bienvenue-carte{background:#fff;border-radius:34px;padding:2rem 1.8rem;max-width:430px;text-align:center}
.bienvenue-carte svg{width:72px;height:48px;margin:0 auto .6rem}
.bienvenue-titre{font-size:1.9rem;margin:0 0 .6rem}
.sortir{display:block;margin-top:1rem;color:#7a5f6e;font-size:.9rem}
@media (prefers-reduced-motion:reduce){.tiroir,.join{transition:none}.mot{transform:none!important}}