@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/atkinson-hyperlegible-next.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700.woff2) format("woff2")}

:root{
  --papier:#F4F1E8;
  --papier-appuye:#EAE5D8;
  --carte:#FBF9F4;
  --encre:#18282A;
  --mousse:#2E5B45;
  --mousse-fonce:#234836;
  --ajonc:#EDB21C;
  --ajonc-clair:#F4C64B;
  --gris:#4E5C5A;
  --filet:#D8D1C0;
  --filet-sombre:#34474A;
  --pale:#CFC9BB;
  --repere:#A8400F;
  --repere-fond:#FBE9E1;
  --titres:"Barlow Condensed","Arial Narrow",sans-serif;
  --texte:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,sans-serif;
  --gouttiere:clamp(20px,5vw,72px);
  --rayon:clamp(12px,1.6vw,24px);
  --sortie:cubic-bezier(.16,1,.3,1);
  --ombre:0 1px 2px rgba(24,40,42,.05),0 12px 28px -18px rgba(24,40,42,.2);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

html{scrollbar-color:var(--mousse) var(--papier-appuye);scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;text-size-adjust:100%}

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--texte);
  font-size:18px;
  line-height:1.55;
}

main{flex:1 0 auto}
img,svg{display:block}
img{max-width:100%}
h1,h2,h3,p,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
p{text-wrap:pretty}

a{color:var(--mousse);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--mousse-fonce)}
::selection{background:var(--ajonc);color:var(--encre)}
:focus-visible{outline:3px solid var(--mousse);outline-offset:3px}
.bandeau :focus-visible,.contact :focus-visible,.pied :focus-visible{outline-color:var(--ajonc)}

h1,h2,.titre-carte{font-family:var(--titres);font-weight:700;text-wrap:balance}
h1{font-size:clamp(44px,5.8vw,84px);line-height:.95}
h2{font-size:clamp(32px,3.4vw,50px);line-height:1.05}
h3{font-size:20px;line-height:1.3}
.titre-carte{font-size:28px;line-height:1.1}

.relief{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.relief::before{content:"";position:absolute;top:0;left:0;right:0;height:max(300%,calc(100% + var(--course,0) * .35px));background:url(images/courbes-de-niveau.svg) 50% 0/max(1100px,111vw) auto repeat-y;transform-origin:50% 0;transform:translate3d(0,calc(var(--defilement,0) * -.35px),0) scale(calc(1 + var(--defilement,0) * .00003));will-change:transform}

.icone{flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.conteneur{box-sizing:content-box;max-width:1200px;margin:0 auto;padding:0 var(--gouttiere)}
.pile{display:flex;flex-direction:column}

.entete{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--filet);background:var(--papier);transition:box-shadow .2s var(--sortie)}
.defile .entete{box-shadow:0 10px 24px -18px rgba(24,40,42,.28)}
.entete-ligne{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.marque{display:flex;align-items:center;min-width:0;min-height:44px}
.marque img{height:clamp(30px,9vw,48px);width:auto;max-width:100%;object-fit:contain;object-position:0 50%}

.bouton,.bouton-pilule{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background-color .16s var(--sortie),color .16s var(--sortie);
}
.bouton{min-height:56px;padding:0 22px;border-radius:12px;font-size:18px}
.bouton-pilule{flex-shrink:0;min-height:44px;padding:0 14px;border:1.5px solid var(--encre);border-radius:999px;color:var(--encre);font-size:15px}
.bouton-pilule:hover{background:var(--papier-appuye);color:var(--encre)}
.bouton-plein{background:var(--mousse);color:#fff}
.bouton-plein:hover{background:var(--mousse-fonce);color:#fff}
.bouton-contour{border:1.5px solid var(--encre);color:var(--encre)}
.bouton-contour:hover{background:var(--papier-appuye);color:var(--encre)}
.bouton-clair{flex:1 1 260px;max-width:360px;padding:0 24px;background:var(--papier);color:var(--mousse-fonce)}
.bouton-clair:hover{background:#fff;color:var(--mousse-fonce)}
.bouton-appel{min-height:52px;padding:0 18px;font-size:inherit;background:var(--ajonc);color:var(--encre)}
.bouton-appel:hover{background:var(--ajonc-clair);color:var(--encre)}

.photo{width:100%;object-fit:cover;border-radius:var(--rayon);background:var(--papier-appuye);box-shadow:var(--ombre)}

.ouverture{padding-top:clamp(36px,6vw,88px)}
.ouverture .pile{gap:clamp(28px,3.5vw,48px)}
.ouverture-haut{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px clamp(32px,5vw,80px)}
.ouverture-haut h1{flex:1 1 520px;min-width:0}
.ouverture-texte{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:22px}
.chapo{font-size:clamp(18px,1.5vw,21px)}
.boutons{display:flex;flex-wrap:wrap;gap:12px}
.boutons .bouton{flex:1 1 auto}
.photo-ouverture{height:clamp(240px,46vw,640px);object-position:50% 45%}

.essentiel{padding-top:clamp(28px,3.5vw,48px)}
.fiche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fiche>div{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--filet);border-radius:14px;background:var(--carte);box-shadow:var(--ombre)}
.fiche dt{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--gris)}
.fiche dt .icone,.liste-coches .icone{color:var(--mousse)}
.fiche dd{font-family:var(--titres);font-weight:700;font-size:clamp(22px,2vw,28px);line-height:1.1}

.pratique{padding:clamp(56px,7vw,112px) 0}
.deux-colonnes{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(32px,4vw,64px)}
.deux-colonnes>*{flex:1 1 380px;min-width:0}
.texte{display:flex;flex-direction:column;gap:18px}
.photo-pratique{height:clamp(300px,40vw,560px);object-position:50% 62%}

.saisons{padding-bottom:clamp(56px,7vw,112px)}
.saisons .pile{gap:clamp(24px,3vw,40px)}
.saisons-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px}
.saisons-tete h2{flex:1 1 420px;min-width:0}
.saisons-tete p{flex:1 1 340px;min-width:0;max-width:520px}
.galerie{display:grid;gap:16px}
.galerie .photo{height:clamp(240px,28vw,400px)}
.photo-foret{object-position:50% 60%}
.photo-lande{object-position:50% 68%}
.photo-cote{object-position:55% 60%}

.bandeau{padding:clamp(44px,5.5vw,80px) 0;background:var(--mousse);color:#fff}
.bandeau-ligne{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px}
.bandeau-texte{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:12px}
.bandeau-texte p{max-width:560px;color:var(--papier)}

.rejoindre{padding:clamp(56px,7vw,112px) 0}
.rejoindre .pile{gap:clamp(28px,3.5vw,48px)}
.rejoindre-intro{display:flex;flex-direction:column;gap:16px;max-width:720px}
.etapes{display:grid;gap:16px}
.etapes li{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--filet);border-radius:16px;background:var(--carte);box-shadow:var(--ombre)}
.numero{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--ajonc);font-family:var(--titres);font-weight:700;font-size:24px}
.rejoindre-bas{display:flex;flex-wrap:wrap;gap:16px}
.rejoindre-bas>*{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;border-radius:16px;box-shadow:var(--ombre)}
.a-prevoir{gap:12px;padding:24px;border:1px solid var(--filet);background:var(--carte)}
.liste-coches li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:12px 0}
.liste-coches li+li{border-top:1px solid var(--filet)}
.liste-coches .icone{margin-top:2px}
.contact{gap:14px;padding:28px;background:var(--encre);color:var(--papier)}
.contact .titre-carte{color:#fff}
.contact p{color:var(--pale)}
.contact .courrier{font-size:15px}
.a-completer{padding:0 4px;border-radius:4px;background:var(--repere-fond);color:var(--repere);font-weight:700;white-space:nowrap}

.pied{background:var(--encre);color:var(--papier);font-size:16px}
.pied-ligne{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px 48px;padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.pied-marque{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:12px}
.pied-marque img{align-self:flex-start;height:44px;width:auto}
.pied-marque p{color:var(--pale)}
.pied nav{display:flex;flex-wrap:wrap;gap:0 24px}
.pied nav a{display:flex;align-items:center;min-height:44px;color:var(--ajonc)}
.pied nav a:hover{color:var(--ajonc-clair)}
.pied-note{flex:1 1 100%;padding-top:16px;border-top:1px solid var(--filet-sombre);font-size:14px;color:var(--pale)}

.page-texte{padding:clamp(40px,6vw,88px) 0 clamp(56px,7vw,112px)}
.page-texte .pile{gap:clamp(28px,3.5vw,40px)}
.page-texte h1{font-size:clamp(40px,5vw,64px)}
.page-texte section{display:flex;flex-direction:column;gap:10px;max-width:68ch}
.page-texte h2{font-size:clamp(26px,2.6vw,34px)}
.page-texte .bouton{align-self:flex-start}

@media (min-width:700px){
  .galerie,.etapes{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:760px){
  .fiche{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .relief::before{transform:none}
  .bouton,.bouton-pilule,.entete{transition:none}
}