/* ==========================================================================
   La Coquille de Massiac — feuille de style principale
   Palette : crème / oxblood / doré — Fraunces + Inter + Bebas Neue
   ========================================================================== */

:root{
  --cream:#e6d9bd;
  --cream-2:#f0e4c8;
  --cream-3:#f7efdd;
  --taupe:#bfb8ac;
  --ink:#191714;
  --muted:#54524d;
  --ox:#511c14;         /* oxblood — sections sombres */
  --ox-d:#341009;       /* presque noir chaud — footer */
  --gold:#c79a3e;
  --gold-d:#a87f2c;
  --red:#da2916;
  --line:rgba(25,23,20,.14);
  --maxw:1180px;
  --narrow:820px;
  --r:2px;
  --shadow:0 10px 30px rgba(52,16,9,.10);
  --shadow-lg:0 22px 60px rgba(52,16,9,.16);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);background:var(--cream-2);
  line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;line-height:1.08;font-weight:800;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5.2vw,4rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.5rem)}
h3{font-size:clamp(1.1rem,1.8vw,1.35rem)}
p{margin-bottom:1rem}
p:last-child{margin-bottom:0}
/* Sans cela les titres collent au paragraphe suivant. Les composants qui définissent
   leur propre marge (.lf-cell-start h2, .products-text h2…) restent prioritaires,
   editorial.css étant chargée après cette feuille. */
h2:not(:last-child){margin-bottom:1.1rem}
h3:not(:last-child){margin-bottom:.65rem}
.eyebrow + h1,.eyebrow + h2,.eyebrow + h3{margin-top:.1rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ox);color:var(--cream);padding:.8rem 1.4rem;
}
.skip:focus{left:0}

.wrap{width:min(100% - 2.4rem,var(--maxw));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.4rem,var(--narrow))}
.center{text-align:center}
.h-sm{font-size:clamp(1.35rem,2.4vw,1.9rem)}
.lede{font-size:1.08rem;color:var(--muted);max-width:60ch;margin-inline:auto}
.lede-sm{font-size:.95rem;color:var(--muted)}
.note{font-size:.9rem;color:var(--muted)}
.highlight{
  border-left:3px solid var(--gold);padding:.85rem 0 .85rem 1.1rem;
  background:rgba(199,154,62,.08);
}

.eyebrow{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.22em;font-size:.95rem;
  color:var(--gold);text-transform:uppercase;display:inline-block;margin-bottom:.8rem;
}
.eyebrow.center{display:block}

/* ---------------------------------------------------------------- boutons */
.btn{
  display:inline-block;padding:.9rem 1.8rem;border-radius:var(--r);
  font-weight:600;font-size:.92rem;letter-spacing:.02em;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
  border:1.5px solid transparent;text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-d)}
.btn-dark{background:var(--ox);color:var(--cream-2)}
.btn-dark:hover{background:var(--ox-d)}
.btn-ghost{border-color:rgba(255,255,255,.65);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-outline{border-color:var(--ox);color:var(--ox)}
.btn-outline:hover{background:var(--ox);color:var(--cream-2)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.6rem}
.btn-row.center-row{justify-content:center}

/* ---------------------------------------------------------------- header */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:1rem clamp(1.2rem,4vw,3rem);
  transition:background .35s,box-shadow .35s,padding .35s;
}
#topbar.compact{
  background:var(--cream-2);box-shadow:0 6px 24px rgba(52,16,9,.10);
  padding:.4rem clamp(1.2rem,4vw,3rem);
}
.brand{justify-self:center;line-height:0}
.brand-logo{height:62px;width:auto;transition:height .35s}
#topbar.compact .brand-logo{height:44px}
.logo-dark{display:none}
#topbar.compact .logo-cream{display:none}
#topbar.compact .logo-dark{display:block}

.nav-side{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.9rem)}
.nav-left{justify-self:start}
.nav-right{justify-self:end}
.nav-side a{
  color:#fff;font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  position:relative;transition:color .2s;white-space:nowrap;
}
.nav-side a:not(.btn-shop)::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;
  background:var(--gold);transition:width .25s;
}
.nav-side a:not(.btn-shop):hover::after,
.nav-side a[aria-current="page"]::after{width:100%}
#topbar.compact .nav-side a{color:var(--ink)}
.btn-shop{
  border:1.5px solid rgba(255,255,255,.55);color:#fff !important;
  padding:.45rem 1rem;letter-spacing:.12em;transition:.25s;
}
.btn-shop:hover{background:var(--gold);border-color:var(--gold)}
#topbar.compact .btn-shop{border-color:var(--gold);color:var(--gold) !important}
#topbar.compact .btn-shop:hover{color:#fff !important}

.burger{display:none;flex-direction:column;gap:5px;padding:.5rem;justify-self:end}
.burger span{display:block;width:26px;height:2px;background:#fff;transition:.3s}
#topbar.compact .burger span{background:var(--ink)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menu plein ecran. Il n'etait qu'une pile de liens centres : meme typo, meme
   taille, aucune hierarchie, et une arrivee instantanee. On garde le parti pris
   centre, qui va bien a la marque, mais on ajoute ce qui manquait — une cascade
   a l'ouverture, la page courante marquee, et un pied qui donne le telephone et
   l'adresse sans avoir a fermer le menu. */
.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--ox-d);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:2.2rem;padding:5.5rem 1.4rem 2.2rem;overflow-y:auto;
}
.mobile-menu[hidden]{display:none}
.mobile-menu::before{
  /* filigrane discret, meme geste que le rideau d'arrivee */
  content:"";position:absolute;inset:auto -12% -18% auto;width:min(70vw,340px);aspect-ratio:1;
  background:url("../assets/spiral.webp") no-repeat center/contain;opacity:.06;pointer-events:none;
}
.mm-nav{display:flex;flex-direction:column;align-items:center;gap:.15rem;width:100%;max-width:340px}
.mobile-menu a{
  color:var(--cream);font-family:'Fraunces',serif;font-size:1.45rem;font-weight:600;
}
.mm-nav a{
  display:block;width:100%;text-align:center;padding:.62rem 0;
  border-bottom:1px solid rgba(240,228,200,.1);
  opacity:0;transform:translateY(12px);
  animation:mmEntree .42s cubic-bezier(.2,.8,.3,1) forwards;
}
.mm-nav a:last-child{border-bottom:0;color:var(--gold)}
.mm-nav a[aria-current="page"]{color:var(--gold)}
.mm-nav a[aria-current="page"]::after{
  content:"";display:block;width:26px;height:2px;background:var(--gold);margin:.45rem auto 0;
}
@keyframes mmEntree{to{opacity:1;transform:none}}
.mm-nav a:nth-child(1){animation-delay:.04s}
.mm-nav a:nth-child(2){animation-delay:.08s}
.mm-nav a:nth-child(3){animation-delay:.12s}
.mm-nav a:nth-child(4){animation-delay:.16s}
.mm-nav a:nth-child(5){animation-delay:.2s}
.mm-nav a:nth-child(6){animation-delay:.24s}
.mm-nav a:nth-child(7){animation-delay:.28s}
.mobile-menu a:hover{color:var(--gold)}

.mm-pied{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;
  opacity:0;animation:mmEntree .42s .34s ease forwards;
}
.mm-tel{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Inter',sans-serif !important;font-size:.98rem !important;
  color:var(--gold) !important;letter-spacing:.08em;
  border:1px solid rgba(199,154,62,.5);padding:.6rem 1.3rem;border-radius:var(--r);
}
.mm-tel svg{width:17px;height:17px}
.mm-tel:hover{background:var(--gold);color:var(--ox-d) !important;border-color:var(--gold)}
.mm-adresse{font-size:.8rem;color:rgba(240,228,200,.55);line-height:1.6}
.mm-adresse span{display:block;color:rgba(240,228,200,.4);margin-top:.15rem}

@media (prefers-reduced-motion:reduce){
  .mm-nav a,.mm-pied{animation:none;opacity:1;transform:none}
}

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative;display:grid;place-items:center;text-align:center;
  min-height:min(88vh,760px);padding:8rem 1.2rem 4rem;color:#fff;overflow:hidden;
}
.hero-page{min-height:min(62vh,560px)}
.hero-short{min-height:min(48vh,440px)}
.hero-page{background-image:var(--hero-img);background-size:cover;background-position:center}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* La vidéo de fond d'un hero. La règle vivait dans accueil.css, donc n'existait
   que sur l'accueil : toutes les autres pages n'avaient qu'une image de fond.
   L'image reste posée en background-image et sert de secours — elle s'affiche
   tant que la vidéo n'est pas chargée, et pour de bon quand le visiteur est en
   économie de données ou a demandé moins d'animations. */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(52,16,9,.62),rgba(52,16,9,.42) 45%,rgba(52,16,9,.78));
}
.hero-inner{position:relative;max-width:820px}
.hero-inner h1{color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.hero-sub{margin-top:1.1rem;font-size:clamp(1rem,1.6vw,1.2rem);color:rgba(255,255,255,.9)}
.hero-scroll{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  color:#fff;font-size:1.5rem;opacity:.8;animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}

/* ---------------------------------------------------------------- sections */
.section{padding:clamp(3.5rem,7vw,6rem) 0}
.section.alt{background:var(--cream-3)}
.crumb{background:var(--cream-3);border-bottom:1px solid var(--line);padding:.7rem 0;font-size:.82rem}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;color:var(--muted)}
.crumb li+li::before{content:"›";margin-right:.45rem;opacity:.6}
.crumb a:hover{color:var(--gold-d);text-decoration:underline}

.intro-band{padding:clamp(3.5rem,7vw,6rem) 0}
.intro-grid,.quali-grid,.visite-grid,.gamme-split,.camping-grid,.infos-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;
}
.gamme-split.reverse figure{order:2}
.intro-media img,.quali-grid figure img,.visite-media img,.gamme-split figure img,.infos-media img{
  border-radius:var(--r);box-shadow:var(--shadow-lg);
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem)}

/* ---------------------------------------------------------------- piliers */
.piliers{background:var(--ox);color:var(--cream-2);padding:clamp(3.5rem,7vw,6rem) 0}
.piliers h2{color:#fff}
.piliers-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.6rem;margin-top:2.6rem;
}
.piliers-grid article{
  border:1px solid rgba(230,217,189,.22);padding:1.8rem 1.4rem;border-radius:var(--r);
  transition:background .3s,border-color .3s;
}
.piliers-grid article:hover{background:rgba(199,154,62,.12);border-color:var(--gold)}
.piliers-grid h3{color:var(--gold);margin-bottom:.6rem}
.piliers-grid p{font-size:.95rem;color:rgba(240,228,200,.85)}

/* ---------------------------------------------------------------- produits */
.p-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:1.6rem;margin-top:2.4rem;
}
.p-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s;
}
.p-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.p-media{display:block;background:var(--cream-3);aspect-ratio:1;overflow:hidden}
.p-media img{width:100%;height:100%;object-fit:contain;padding:1.1rem;transition:transform .4s}
.p-card:hover .p-media img{transform:scale(1.05)}
.p-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.p-body h3{font-size:1.06rem;margin-bottom:.5rem}
.p-body h3 a:hover{color:var(--gold-d)}
.p-desc{font-size:.88rem;color:var(--muted);flex:1}
.p-foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);
}
.p-price{font-family:'Fraunces',serif;font-weight:800;font-size:1.15rem;color:var(--ox)}
.p-price small{font-size:.68rem;font-weight:400;color:var(--muted);display:block;font-family:'Inter',sans-serif}
.p-link{
  font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-d);border-bottom:1px solid currentColor;padding-bottom:1px;
}
.p-link:hover{color:var(--ox)}

/* fiche produit */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.product-detail{padding-top:clamp(2.5rem,5vw,4rem)}
.pd-media{background:var(--cream-3);border-radius:var(--r);padding:2rem;box-shadow:var(--shadow)}
.pd-media img{width:100%;object-fit:contain}
.pd-price{font-family:'Fraunces',serif;font-size:2rem;font-weight:800;color:var(--ox);margin:.6rem 0 1.2rem}
.pd-price small{font-size:.8rem;font-weight:400;color:var(--muted);font-family:'Inter',sans-serif}
.pd-desc{font-size:1.03rem}
.pd-formats{margin-top:1rem;font-size:.94rem}
.pd-points{list-style:none;margin:1.4rem 0;display:grid;gap:.55rem}
.pd-points li{position:relative;padding-left:1.6rem;font-size:.93rem;color:var(--muted)}
.pd-points li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700}

/* ---------------------------------------------------------------- listes */
.check-list{list-style:none;display:grid;gap:.6rem;margin:1.2rem 0}
.check-list li{position:relative;padding-left:1.7rem}
.check-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  background:var(--gold);border-radius:50%;
}

/* ---------------------------------------------------------------- ancres / filtres */
.anchors{background:var(--ox);position:sticky;top:0;z-index:50;padding:.75rem 0}
.anchors .wrap{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.anchors a,.filter{
  color:var(--cream-2);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.42rem .95rem;border:1px solid rgba(230,217,189,.3);border-radius:var(--r);
  transition:.25s;
}
.anchors a:hover,.filter:hover{background:rgba(199,154,62,.25);border-color:var(--gold)}
.filter.is-active{background:var(--gold);border-color:var(--gold);color:#fff}

/* ---------------------------------------------------------------- avis */
.avis{background:var(--ox-d);color:var(--cream-2);padding:clamp(3.5rem,7vw,6rem) 0}
.avis h2{color:#fff}
.avis-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.6rem;margin-top:2.4rem;
}
.avis-card{
  border:1px solid rgba(230,217,189,.2);padding:1.8rem;border-radius:var(--r);
  background:rgba(230,217,189,.04);
}
.avis-card p{font-size:.95rem;color:rgba(240,228,200,.9);font-style:italic}
.avis-card cite{
  display:block;margin-top:1.1rem;font-style:normal;font-weight:600;
  color:var(--gold);font-size:.92rem;
}
.avis-card cite span{color:rgba(240,228,200,.55);font-weight:400;font-size:.82rem}
.stars{color:var(--gold);letter-spacing:.15em;margin-bottom:.8rem}

.fp-avis{display:grid;gap:1rem}
.fp-card{background:#fff;border-left:3px solid var(--gold);padding:1.2rem 1.4rem;border-radius:var(--r);box-shadow:var(--shadow)}
.fp-card p{font-size:.9rem;color:var(--muted)}
.fp-card cite{display:block;margin-top:.7rem;font-style:normal;font-weight:600;font-size:.88rem}
.fp-card cite span{color:var(--muted);font-weight:400}
.camping-home{background:var(--cream-3);padding:clamp(3.5rem,7vw,6rem) 0}

/* ---------------------------------------------------------------- blog */
.blog-home{padding:clamp(3.5rem,7vw,6rem) 0}
.art-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.8rem;margin-top:2.4rem}
.art-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .3s,box-shadow .3s}
.art-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.art-media{display:block;aspect-ratio:16/10;overflow:hidden}
.art-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.art-card:hover .art-media img{transform:scale(1.06)}
.art-body{padding:1.4rem}
.art-body h2,.art-body h3{font-size:1.12rem;margin-bottom:.6rem;line-height:1.25}
.art-body h2 a:hover,.art-body h3 a:hover{color:var(--gold-d)}
.art-body p{font-size:.9rem;color:var(--muted);margin-bottom:1rem}

.article{padding:clamp(2.5rem,6vw,4.5rem) 0}
.article .chapeau{
  font-size:1.12rem;color:var(--ox);border-left:3px solid var(--gold);
  padding-left:1.2rem;margin-bottom:2.4rem;
}
.article h2{margin:2.4rem 0 .9rem}
.article p{font-size:1.02rem}
.art-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.8rem;padding-top:2rem;border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- galerie */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem}
.gal-item{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:#fff}
.gal-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s}
.gal-item:hover img{transform:scale(1.05)}
.gal-item figcaption{padding:.75rem 1rem;font-size:.84rem;color:var(--muted)}
.mini-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:2.2rem}
.mini-gal img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shadow)}
.gal-video{width:100%;border-radius:var(--r);box-shadow:var(--shadow-lg);margin-top:1.8rem}

/* ---------------------------------------------------------------- FAQ */
.faq{padding:clamp(3.5rem,7vw,6rem) 0;background:var(--cream-3)}
.faq-list{margin-top:2.2rem;display:grid;gap:.7rem}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.faq-item summary{
  padding:1.1rem 1.4rem;font-weight:600;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--gold);line-height:1}
.faq-item[open] summary::after{content:"–"}
.faq-a{padding:0 1.4rem 1.3rem;color:var(--muted);font-size:.96rem}

/* ---------------------------------------------------------------- CTA */
.cta-band{
  background:linear-gradient(135deg,var(--ox),var(--ox-d));color:var(--cream-2);
  padding:clamp(3rem,6vw,4.5rem) 0;
}
.cta-band h2{color:#fff;margin-bottom:.8rem}
.cta-band p{color:rgba(240,228,200,.85);max-width:58ch;margin-inline:auto}

/* ---------------------------------------------------------------- infos */
.infos{padding:clamp(3.5rem,7vw,6rem) 0}
.infos-list{list-style:none;display:grid;gap:1.1rem;margin:1.6rem 0}
.infos-list li{display:grid;gap:.15rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.infos-list strong{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.16em;font-size:.82rem;
  color:var(--gold-d);text-transform:uppercase;font-weight:400;
}
.infos-list a:hover{color:var(--gold-d);text-decoration:underline}

/* ---------------------------------------------------------------- maillage */
/* Le bloc etait une pile de pastilles identiques, centrees, qui retombaient en
   escalier : des rangees de largeurs differentes, aucune hierarchie entre les
   villes et les pages de fond, et pas la moindre information. C'est devenu une
   grille reguliere ou chaque ville affiche son temps de route — releve sur la
   page correspondante. */
.maillage{background:var(--cream-3);padding:clamp(3rem,6vw,4.5rem) 0;border-top:1px solid var(--line)}
.maillage-head{text-align:center;max-width:58ch;margin:0 auto clamp(1.8rem,3.5vw,2.6rem)}
.maillage-head h2{font-size:clamp(1.5rem,2.8vw,2.15rem);margin:.35rem 0 .6rem}
.maillage-head p{color:var(--muted);font-size:.94rem}

.maillage-list{
  list-style:none;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.maillage-list a{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:.8rem;row-gap:.1rem;align-items:center;height:100%;
  padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;transition:border-color .25s,transform .25s,box-shadow .25s;
}
.maillage-list a:hover{
  border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(28,9,4,.08);
}
.ml-ico{
  grid-row:1 / span 2;width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;background:rgba(199,154,62,.13);color:var(--gold-d);
}
.ml-ico svg{width:16px;height:16px}
.ml-nom{font-family:'Oswald','Inter',sans-serif;font-weight:600;font-size:1rem;color:var(--ink);line-height:1.2}
.ml-sous{font-size:.76rem;color:var(--muted);letter-spacing:.01em}
.maillage-list a:hover .ml-nom{color:var(--gold-d)}

/* Seconde ligne : pages pro et articles. Volontairement plus discrete — ce sont
   des pages connexes, pas la carte du secteur. */
.maillage-plus-t{
  text-align:center;margin:clamp(2rem,4vw,2.8rem) 0 1rem;
  font-family:'Bebas Neue',sans-serif;letter-spacing:.22em;text-transform:uppercase;
  font-size:.82rem;color:var(--gold-d);
}
.maillage-plus{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem .6rem;justify-content:center;
}
.maillage-plus a{
  display:inline-block;padding:.45rem 1rem;border:1px solid var(--line);
  border-radius:var(--r);font-size:.86rem;color:var(--muted);transition:.25s;
}
.maillage-plus a:hover{border-color:var(--gold);color:var(--gold-d)}

/* ---------------------------------------------------------------- contact */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.c-form{display:grid;gap:1.1rem;margin-top:1.6rem}
.c-form label{display:grid;gap:.35rem;font-size:.86rem;font-weight:500}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.c-form input,.c-form textarea,.c-form select{
  font:inherit;font-size:.95rem;padding:.75rem .9rem;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;transition:border-color .2s;color:var(--ink);
}
.c-form select{
  appearance:none;cursor:pointer;padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354524d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:16px;
}
.c-form input:focus,.c-form textarea:focus,.c-form select:focus{border-color:var(--gold);outline:none}
.f-check{grid-template-columns:auto 1fr;align-items:start;gap:.6rem !important;font-weight:400;color:var(--muted)}
.f-check input{width:1.05rem;height:1.05rem;margin-top:.2rem}
.hp{position:absolute;left:-9999px}
.c-form button{justify-self:start}
.contact-aside{background:var(--cream-3);padding:1.8rem;border-radius:var(--r)}
.c-map{width:100%;height:280px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:1.2rem}

/* ---------------------------------------------------------------- boutique */
.shop-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}
.shop-ways article{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.7rem}
.shop-ways h2{font-size:1.2rem;margin-bottom:.6rem}
.shop-ways p{font-size:.92rem;color:var(--muted);margin-bottom:1rem}

/* ---------------------------------------------------------------- légal / merci */
.legal{padding-top:clamp(7rem,12vw,9rem)}
.legal h1{margin-bottom:2rem}
.legal h2{font-size:1.25rem;margin:2.2rem 0 .7rem}
.legal p{font-size:.96rem;color:var(--muted)}
.legal a{color:var(--gold-d);text-decoration:underline}
.merci{padding-top:clamp(8rem,14vw,11rem)}
.merci a{color:var(--gold-d)}

.gamme-head{max-width:64ch;margin-bottom:.5rem}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--ox-d);color:rgba(240,228,200,.8);padding-top:clamp(3rem,6vw,4.5rem)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.4rem;padding-bottom:3rem}
.f-brand img{height:64px;width:auto;margin-bottom:1.1rem}
.f-brand p{font-size:.9rem;max-width:38ch}
.f-ue{height:auto !important;max-width:280px;margin-top:1.4rem;background:#fff;padding:.5rem;border-radius:var(--r)}
.site-footer h3{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.18em;
  font-size:.95rem;color:var(--gold);text-transform:uppercase;margin-bottom:1rem;
}
.site-footer ul{list-style:none;display:grid;gap:.55rem;font-size:.88rem}
.site-footer a:hover{color:var(--gold)}
.f-contact li{line-height:1.5}
.footer-bar{border-top:1px solid rgba(230,217,189,.15);padding:1.2rem 0}
.footer-bar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;font-size:.82rem}
.footer-bar a{color:var(--gold)}
.footer-bar a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------------------------------------------------------------- responsive */
@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .pd-grid{grid-template-columns:1fr}
}
/* En-tete : 8 liens + bouton Boutique + panier, de part et d autre d un logo centre.
   Entre 1100 et 1450 px ca ne tient plus — les liens venaient toucher le logo (ecart
   mesure a 0 px a 1300). On resserre l espacement et le corps de texte dans cette
   plage plutot que de basculer tout le monde sur le menu burger. */
@media (min-width:1101px) and (max-width:1450px){
  .nav-side{gap:.85rem}
  .nav-side a{font-size:.72rem;letter-spacing:.07em}
  .btn-shop{padding:.5rem .9rem}
  .panier-ouvrir{width:36px;height:36px}
  #topbar{padding-left:1.2rem;padding-right:1.2rem}
}
/* Sous 1100 px, meme resserre, l en-tete complet ne tient pas : place au burger.
   (Le seuil etait a 860 px, ce qui laissait une zone de 240 px d en-tete casse.) */
@media (max-width:1100px){
  /* Le menu passe au burger, MAIS le panier doit rester atteignable : c est le seul
     acces au recapitulatif de commande. On garde donc .nav-right en flex et on n y
     masque que les liens. Sans ca, impossible d ouvrir son panier sur telephone. */
  .nav-left{display:none}
  .nav-right{display:flex;justify-self:end;gap:.6rem}
  .nav-right > *:not(.panier-ouvrir){display:none}
  .burger{display:flex}
  #topbar{grid-template-columns:1fr auto auto;column-gap:.6rem}
  .brand{justify-self:start}
  .panier-ouvrir{border-color:rgba(255,255,255,.4)}
  .intro-grid,.quali-grid,.visite-grid,.gamme-split,.camping-grid,.infos-grid,.two-col{
    grid-template-columns:1fr;
  }
  .gamme-split.reverse figure{order:0}
  .hero{min-height:min(80vh,640px);padding-top:6.5rem}
  .anchors{position:static}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .p-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
  .p-body{padding:.9rem 1rem 1.1rem}
  .p-body h3{font-size:.95rem}
  .btn{padding:.8rem 1.4rem;font-size:.88rem}
  .btn-row{gap:.6rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* Contenu réservé aux lecteurs d'écran et aux robots : présent dans le DOM et
   restitué à la synthèse vocale, mais retiré du rendu visuel. Ne pas remplacer par
   display:none ni visibility:hidden — les deux le rendraient inaccessible. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ------------------------------------------------- maillage sur petit écran */
/* Une colonne : deux cartes côte à côte sur 375 px couperaient les noms de
   ville. La grille auto-fit le ferait d'elle-même, on force pour être sûr. */
@media (max-width: 700px) {
  .maillage-list { grid-template-columns: 1fr; gap: .55rem; }
  .maillage-list a { padding: .8rem .9rem; }
  .maillage-head { text-align: left; }
  .maillage-plus { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); }
  .maillage-plus li { border-bottom: 1px solid var(--line); }
  .maillage-plus a {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .8rem .2rem; border: 0; border-radius: 0;
  }
  .maillage-plus a::after { content: "›"; color: var(--gold); font-size: 1.15rem; line-height: 1; }
  .maillage-plus-t { text-align: left; }
}