/* ── fonts.css ── */
/* Polices auto-hebergees - generees depuis Google Fonts le 09/09/2026.
Pourquoi : le vers fonts.googleapis.com etait une requete bloquante vers
un tiers en tete de rendu, seul point technique jamais traite de l'audit.
Deux choix qui divisent le poids :
- POLICES VARIABLES (wght@300..600 plutot que 300;400;500;600) : Inter passe de
141 Ko en 3 fichiers a 47 Ko en un seul, pour les memes graisses.
- Sous-ensembles latin et latin-ext uniquement (le site est en francais).
Pour regenerer : reprendre l'URL css2 ci-dessous, filtrer latin/latin-ext,
telecharger les .woff2 et reecrire les src en ../assets/fonts/.
family=Fraunces:ital,opsz,wght@0,9..144,400..800;1,9..144,400..600
family=Inter:wght@300..600 family=Bebas+Neue family=Oswald:wght@500..600 */
@font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../assets/fonts/bebasneue-400-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bebas Neue';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../assets/fonts/bebasneue-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400 600;
font-display: swap;
src: url(../assets/fonts/fraunces-400-600-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400 600;
font-display: swap;
src: url(../assets/fonts/fraunces-400-600-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(../assets/fonts/fraunces-400-800-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(../assets/fonts/fraunces-400-800-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 600;
font-display: swap;
src: url(../assets/fonts/inter-300-600-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 600;
font-display: swap;
src: url(../assets/fonts/inter-300-600-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url(../assets/fonts/oswald-500-600-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url(../assets/fonts/oswald-500-600-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ── style.css ── */
/* ==========================================================================
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}
/* 16 px MINIMUM sur écran tactile, et ce n'est pas un choix esthétique.
Safari sur iPhone ZOOME la page dès qu'on touche un champ dont la police fait
moins de 16 px. Les champs étaient à .95rem, soit 15,2 px : au premier appui
dans « Nom », la page grossissait et se mettait à glisser latéralement — d'où
l'impression de pouvoir partir sur la droite. La page ne débordait pourtant
d'aucun pixel, c'est le navigateur qui changeait d'échelle.
Le zoom reste possible à deux doigts, on ne bloque rien. */
@media (max-width: 860px) {
.c-form input, .c-form textarea, .c-form select { font-size: 16px; }
}
.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; }
}
/* ── editorial.css ── */
/* ==========================================================================
La Coquille de Massiac — design éditorial
Reconstruit d'après la structure de l'ancienne page « la ferme »
(l'ancien style.css ayant été perdu). Sert de gabarit à la page ferme,
aux 7 pages locales et à la page produits.
========================================================================== */
/* ---------------------------------------------------------------- HERO FERME */
.lf-hero{
position:relative;min-height:min(94vh,820px);display:grid;align-items:end;
padding:clamp(6rem,12vw,9rem) clamp(1.2rem,5vw,4rem) clamp(3rem,6vw,5rem);
overflow:hidden;color:#fff;
}
.lf-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.lf-hero-veil{
position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(52,16,9,.55) 0%,rgba(52,16,9,.30) 40%,rgba(28,9,4,.88) 100%);
}
.lf-hero-inner{
position:relative;z-index:2;width:min(100%,var(--maxw));margin-inline:auto;
display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,5vw,4.5rem);align-items:end;
}
.lf-hero-head h1{
font-size:clamp(2.6rem,7.5vw,5.6rem);color:#fff;letter-spacing:-.02em;
text-shadow:0 6px 40px rgba(0,0,0,.4);
}
.lf-hero-rule{display:block;width:74px;height:3px;background:var(--gold);margin:1.5rem 0 1.3rem}
.lf-hero-head p{max-width:46ch;color:rgba(255,255,255,.88);font-size:clamp(.98rem,1.4vw,1.1rem)}
.lf-card{
background:rgba(20,9,5,.62);backdrop-filter:blur(9px);
border:1px solid rgba(230,217,189,.22);padding:1.8rem 1.7rem;border-radius:var(--r);
}
.lf-card h2{font-size:1.15rem;color:var(--gold);margin-bottom:1.1rem}
.lf-card dl{display:grid;gap:.9rem;margin-bottom:1.5rem}
.lf-card dt{
font-family:'Bebas Neue',sans-serif;letter-spacing:.18em;text-transform:uppercase;
font-size:.76rem;color:rgba(255,255,255,.55);
}
.lf-card dd{font-size:.94rem;color:#fff;line-height:1.45}
.lf-card .btn{width:100%;background:var(--gold);color:#fff;border-color:var(--gold)}
.lf-card .btn:hover{background:var(--gold-d);border-color:var(--gold-d)}
/* ---------------------------------------------------------------- WAYPOINTS (accès) */
/* La bande deborde sur telephone : quatre etapes de trajet ne tiennent pas dans
375 px. Elle affichait donc une barre de defilement grise en travers du
bandeau sombre — laide, et rien n'indiquait qu'il y avait quelque chose a
voir. La barre est masquee, un degrade signale la suite, et main.js fait
defiler la bande une fois toute seule quand elle entre a l'ecran. */
.lf-way{background:var(--ox-d);color:var(--cream);padding:1.5rem clamp(1.2rem,5vw,4rem);
overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.lf-way::-webkit-scrollbar{display:none}
.lf-way{
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,rgba(0,0,0,.15) 100%);
mask-image:linear-gradient(90deg,#000 0,#000 86%,rgba(0,0,0,.15) 100%);
transition:mask-image .3s ease,-webkit-mask-image .3s ease;
}
/* arrive au bout : plus rien a annoncer, le degrade disparait */
.lf-way.au-bout{-webkit-mask-image:none;mask-image:none}
.lf-way-inner{
width:min(100%,var(--maxw));margin-inline:auto;
display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.4rem);min-width:max-content;
}
.lf-stop{display:flex;flex-direction:column;gap:.15rem;position:relative;padding-left:1.1rem;white-space:nowrap}
.lf-stop-dot{
position:absolute;left:0;top:.42em;width:8px;height:8px;border-radius:50%;
background:var(--gold);box-shadow:0 0 0 4px rgba(199,154,62,.18);
}
.lf-stop b{font-family:'Oswald','Inter',sans-serif;font-weight:600;font-size:.94rem;letter-spacing:.02em}
.lf-stop span{font-size:.74rem;color:rgba(230,217,189,.6);letter-spacing:.05em}
.lf-way-line{flex:1;min-width:28px;height:1px;background:linear-gradient(90deg,rgba(199,154,62,.5),rgba(199,154,62,.15))}
/* ---------------------------------------------------------------- COLLAGE (lieu / carte / visite) */
.lf-collage{
position:relative;background:var(--cream-2);
padding:0 clamp(1.2rem,5vw,4rem) clamp(3rem,6vw,5rem);
display:grid;grid-template-columns:1.02fr .98fr;column-gap:clamp(2rem,5vw,4.5rem);
}
/* La bande sombre est un ITEM de grille placé dans la 1re rangée : elle épouse donc
exactement la hauteur du bloc « Le lieu », quel que soit le texte. Les marges
négatives la font déborder jusqu'aux bords de l'écran (full-bleed).
Ne pas la passer en position:absolute — la règle `.lf-collage > *{position:relative}`
la remettrait dans le flux et le texte blanc se retrouverait sur fond crème. */
.lf-darkband{
grid-column:1 / -1;grid-row:1;z-index:0;background:var(--ox-d);
margin-inline:calc(-1 * clamp(1.2rem,5vw,4rem));
}
.lf-collage > *{position:relative}
.lf-cell-start{
grid-column:1;grid-row:1;z-index:2;color:var(--cream-2);
padding:clamp(3rem,6vw,4.6rem) 0 clamp(2.4rem,4vw,3.4rem);align-self:start;
}
.lf-cell-start h2{color:#fff;font-size:clamp(2.2rem,5vw,3.6rem);margin:.4rem 0 1rem}
.lf-cell-start p{color:rgba(240,228,200,.82);max-width:44ch}
.lf-pt{
font-family:'Bebas Neue',sans-serif;letter-spacing:.22em;text-transform:uppercase;
font-size:.9rem;color:var(--gold);
}
.lf-pt.dark{color:var(--gold-d)}
.lf-photos{
grid-column:2;grid-row:1 / span 2;z-index:3;
display:flex;gap:clamp(.8rem,1.6vw,1.4rem);align-items:flex-start;
padding-top:clamp(3rem,6vw,4.6rem);
}
.lf-photo{flex:1;min-width:0}
.lf-photo img{
width:100%;aspect-ratio:3/4.4;object-fit:cover;border-radius:var(--r);
box-shadow:0 26px 60px rgba(28,9,4,.38);
}
.lf-photo figcaption{padding-top:.8rem;display:grid;gap:.1rem}
.lf-photo figcaption b{font-size:.9rem;color:var(--ink)}
.lf-photo figcaption span{font-size:.75rem;color:var(--muted);letter-spacing:.05em}
.lf-photo-peek{flex:.72;padding-top:clamp(2.5rem,6vw,5rem)}
.lf-photo-peek img{aspect-ratio:3/4}
/* Colonne 2, rangee 3 : elle etait vide sur les neuf pages qui utilisent ce
bloc. Le contenu prolonge la carte « Nous rendre visite » d'a cote plutot que
de la decorer — ce qu'on voit vraiment en venant. */
.lf-cell-plus{
grid-column:2;grid-row:3;z-index:2;align-self:center;
padding:clamp(1.5rem,3vw,2.5rem) 0;
}
.lf-cell-plus h3{font-size:clamp(1.5rem,2.6vw,2rem);margin:.35rem 0 1.4rem;color:var(--ox)}
.lf-plus-liste{list-style:none;display:grid;gap:0}
.lf-plus-liste li{
display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
column-gap:1rem;row-gap:.2rem;align-items:start;
padding:1rem 0;border-top:1px solid var(--line);
}
.lf-plus-liste li:last-child{border-bottom:1px solid var(--line)}
.lf-plus-ico{
grid-row:1 / span 2;width:40px;height:40px;display:grid;place-items:center;
border-radius:50%;border:1px solid rgba(199,154,62,.4);color:var(--gold-d);
}
.lf-plus-ico svg{width:19px;height:19px}
.lf-plus-liste b{font-family:'Oswald','Inter',sans-serif;font-weight:600;font-size:1rem;color:var(--ink)}
.lf-plus-liste li > span:not(.lf-plus-ico){font-size:.88rem;color:var(--muted);line-height:1.55}
.lf-plus-liste a{color:var(--gold-d);border-bottom:1px solid currentColor;white-space:nowrap}
.lf-plus-liste a:hover{color:var(--ox)}
.lf-cell-map{grid-column:1;grid-row:2;z-index:2;align-self:start;padding:clamp(1.8rem,3vw,2.6rem) 0 clamp(1.5rem,3vw,2.5rem)}
.lf-cell-map img{width:min(100%,420px);opacity:.95}
.lf-cell-visite{
grid-column:1;grid-row:3;z-index:2;background:var(--cream-3);
border:1px solid var(--line);padding:clamp(1.8rem,3.5vw,2.6rem);border-radius:var(--r);
}
.lf-cell-visite h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:.35rem 0 .9rem}
.lf-visite-info{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;margin:1.3rem 0 1.6rem}
.lf-visite-info dt{
font-family:'Bebas Neue',sans-serif;letter-spacing:.16em;text-transform:uppercase;
font-size:.78rem;color:var(--gold-d);align-self:center;
}
.lf-visite-info dd{font-size:.93rem}
.lf-visite-info a:hover{color:var(--gold-d);text-decoration:underline}
/* ---------------------------------------------------------------- BANDE CITATION */
.lf-band{position:relative;min-height:min(56vh,480px);display:grid;place-items:center;overflow:hidden;padding:clamp(3rem,7vw,6rem) 1.5rem}
.lf-band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.lf-band-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,9,4,.72),rgba(28,9,4,.86))}
.lf-band-inner{position:relative;z-index:2;max-width:56ch;text-align:center}
.lf-band blockquote{
font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;
font-size:clamp(1.2rem,2.6vw,1.95rem);line-height:1.42;color:var(--cream-2);
}
.lf-band cite{
display:block;margin-top:1.6rem;font-style:normal;font-family:'Bebas Neue',sans-serif;
letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;color:var(--gold);
}
/* ---------------------------------------------------------------- FEATURE (carrousel recettes) */
.feature{
display:grid;grid-template-columns:.9fr 1.1fr 1fr;align-items:stretch;
background:var(--ox);color:var(--cream-2);min-height:min(72vh,620px);
}
.feature-panel{
padding:clamp(2.4rem,4vw,3.6rem);display:flex;flex-direction:column;justify-content:center;
border-right:1px solid rgba(230,217,189,.16);
}
.feature-panel h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:.9rem}
.feature-panel-sub{color:rgba(240,228,200,.78);font-size:.96rem}
.feature-nav{display:flex;gap:.7rem;margin-top:2rem}
.fnav{
width:52px;height:52px;border:1px solid rgba(230,217,189,.35);border-radius:50%;
color:var(--cream-2);font-size:1.6rem;line-height:1;display:grid;place-items:center;transition:.25s;
}
.fnav:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.feature-img{
display:grid;place-items:center;padding:clamp(1.5rem,3vw,2.5rem);
background:radial-gradient(ellipse at center,rgba(199,154,62,.16),transparent 62%);
}
.feature-img img{
max-height:min(52vh,440px);width:auto;object-fit:contain;
filter:drop-shadow(0 30px 46px rgba(20,8,4,.5));transition:opacity .35s ease,transform .5s ease;
}
.feature-img img.fading{opacity:0;transform:translateX(26px)}
.feature-detail{
background:var(--cream-3);color:var(--ink);
padding:clamp(2.4rem,4vw,3.6rem);display:flex;flex-direction:column;justify-content:center;
}
.feature-detail h3{font-size:clamp(1.4rem,2.4vw,2rem);margin:.3rem 0 .9rem}
.feature-detail > p{color:var(--muted);font-size:.97rem}
.feature-specs{
list-style:none;display:flex;flex-wrap:wrap;gap:1rem 1.8rem;
margin:1.5rem 0;padding:1.2rem 0;border-block:1px solid var(--line);
}
.feature-specs b{font-family:'Fraunces',serif;display:block;font-size:1rem;line-height:1.1}
.feature-specs span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.feature-actions{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:.6rem}
.feature-count{font-family:'Bebas Neue',sans-serif;letter-spacing:.12em;color:var(--muted);font-size:.95rem}
.feature-count b{color:var(--ink);font-size:1.35rem}
/* ---------------------------------------------------------------- STORY (manifeste vidéo) */
.story{position:relative;min-height:min(88vh,720px);display:grid;place-items:center;overflow:hidden;padding:clamp(4rem,8vw,7rem) 1.5rem;text-align:center}
.story-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.story-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,9,4,.74),rgba(28,9,4,.62) 50%,rgba(28,9,4,.88))}
.story-inner{position:relative;z-index:2;max-width:60ch;color:var(--cream-2)}
.story-inner h2{color:#fff;font-size:clamp(2.2rem,5.5vw,4.2rem);margin:.5rem 0 1.5rem}
.story-inner p{color:rgba(240,228,200,.88);font-size:clamp(1rem,1.5vw,1.12rem)}
.story-inner strong{color:var(--gold)}
.story-inner .btn{margin-top:1.8rem}
/* ---------------------------------------------------------------- HERO PRODUITS */
.phero{
position:relative;min-height:min(78vh,660px);display:grid;place-items:center;text-align:center;
overflow:hidden;padding:clamp(7rem,12vw,9rem) 1.5rem clamp(3rem,6vw,5rem);color:#fff;
}
/* vidéo de fond ; l'attribut poster sert de repli tant qu'elle n'est pas chargée */
.phero-bg{
position:absolute;inset:0;z-index:0;
width:100%;height:100%;object-fit:cover;
}
.phero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(52,16,9,.68),rgba(28,9,4,.86))}
.phero-motif{
position:absolute;right:-4%;bottom:-8%;width:min(38vw,420px);z-index:1;
opacity:.12;pointer-events:none;
}
.phero-inner{position:relative;z-index:2;max-width:62ch}
.phero-inner h1{font-size:clamp(2.6rem,7vw,5rem);color:#fff}
.phero-rule{display:block;width:74px;height:3px;background:var(--gold);margin:1.4rem auto 1.3rem}
.phero-inner p{color:rgba(255,255,255,.88)}
.phero-inner .btn{margin-top:1.8rem}
/* ---------------------------------------------------------------- BANDEAU LABELS */
.tagband{background:var(--ox-d);color:var(--cream-2);padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,5vw,4rem)}
.tagband-inner{
width:min(100%,var(--maxw));margin-inline:auto;
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(1.5rem,4vw,3rem);
}
.tagband-feats{display:flex;flex-direction:column;gap:1.1rem}
.feats-l{align-items:flex-end;text-align:right}
.feats-r{align-items:flex-start}
.feat{display:flex;align-items:center;gap:.85rem}
.feat-ico{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;color:var(--gold);border:1px solid rgba(199,154,62,.4);border-radius:50%}
.feat-ico svg{width:19px;height:19px}
.feat-t b{display:block;font-family:'Oswald','Inter',sans-serif;font-weight:600;font-size:.95rem;letter-spacing:.02em}
.feat-t span{font-size:.75rem;color:rgba(240,228,200,.6)}
.tagband-logo{height:clamp(62px,9vw,96px);width:auto}
/* ---------------------------------------------------------------- OFFRES */
.offers{padding:clamp(3.5rem,7vw,6rem) clamp(1.2rem,5vw,4rem);background:var(--cream-2)}
.offers-head{
width:min(100%,var(--maxw));margin-inline:auto;
display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;
}
.offers-headtext h2{font-size:clamp(1.9rem,4vw,3rem);margin:.35rem 0 1rem}
.offers-intro{color:var(--muted);max-width:48ch}
.offers-show{display:flex;align-items:flex-end;justify-content:center;gap:clamp(.5rem,2vw,1.6rem)}
.offers-show img{
width:clamp(90px,14vw,175px);height:auto;object-fit:contain;
filter:drop-shadow(0 20px 32px rgba(52,16,9,.24));
}
.offers-show img:nth-child(2){width:clamp(110px,17vw,215px);z-index:2}
.offers-grid{
width:min(100%,var(--maxw));margin:clamp(2.5rem,5vw,4rem) auto 0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem;
}
.offer{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.9rem 1.6rem;transition:transform .3s,box-shadow .3s}
.offer:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.offer-ico{display:grid;place-items:center;width:46px;height:46px;color:var(--gold-d);border:1px solid rgba(199,154,62,.4);border-radius:50%;margin-bottom:1.1rem}
.offer-ico svg{width:22px;height:22px}
.offer h3{font-size:1.15rem;margin-bottom:.55rem}
.offer p{font-size:.9rem;color:var(--muted);margin-bottom:1.1rem}
.offer-link{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-d);border-bottom:1px solid currentColor}
.offer-link:hover{color:var(--ox)}
/* ---------------------------------------------------------------- FOOTER ÉDITORIAL */
.footer{background:var(--ox-d);color:rgba(240,228,200,.8);padding:clamp(3rem,6vw,4.5rem) clamp(1.2rem,5vw,4rem) 0}
.footer-grid{
width:min(100%,var(--maxw));margin-inline:auto;
display:grid;grid-template-columns:1.6fr 1fr 1.15fr 1fr;gap:clamp(1.8rem,4vw,3rem);padding-bottom:2.8rem;
}
.footer-logo{height:66px;width:auto;margin-bottom:1.1rem}
.footer-brand p{font-size:.9rem;max-width:36ch}
.footer h2{
font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.18em;
font-size:.95rem;color:var(--gold);text-transform:uppercase;margin-bottom:1.1rem;
}
.footer-links{display:grid;gap:.55rem;font-size:.89rem}
.footer-links a:hover,.footer-contact a:hover{color:var(--gold)}
.footer-contact{list-style:none;display:grid;gap:.9rem;font-size:.89rem}
.footer-contact li{display:grid;gap:.15rem;line-height:1.45}
.footer-contact span{
font-family:'Bebas Neue',sans-serif;letter-spacing:.16em;text-transform:uppercase;
font-size:.74rem;color:rgba(240,228,200,.5);
}
.footer-social{display:flex;gap:.6rem;margin-top:1.3rem}
.footer-social a{
width:38px;height:38px;border-radius:50%;border:1px solid rgba(240,228,200,.22);
display:grid;place-items:center;color:var(--cream);transition:.22s;
}
.footer-social svg{width:17px;height:17px}
.footer-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--ox-d);transform:translateY(-2px)}
.footer-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.fbadge{
font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .8rem;
border:1px solid rgba(240,228,200,.24);border-radius:100px;color:rgba(240,228,200,.75);
}
.footer-shopbtn{display:block;text-align:center;margin-bottom:1rem}
.footer-soft{font-size:.84rem;color:rgba(240,228,200,.66);display:inline-block}
.footer-soft:hover{color:var(--gold)}
.footer-eu{width:min(100%,var(--maxw));margin-inline:auto;padding-bottom:2rem}
.footer-ue{max-width:320px;width:100%;height:auto;background:#fff;padding:.5rem;border-radius:var(--r);margin-top:1.2rem}
.footer .footer-bar{
border-top:1px solid rgba(240,228,200,.15);padding:1.2rem 0;
display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;font-size:.8rem;
width:min(100%,var(--maxw));margin-inline:auto;
}
.footer-credit{color:rgba(240,228,200,.55)}
.footer-bar a{color:var(--gold)}
.footer-bar a:hover{text-decoration:underline}
/* ---------------------------------------------------------------- RESPONSIVE */
@media (max-width:980px){
.feature{grid-template-columns:1fr 1fr}
.feature-panel{grid-column:1/-1;border-right:0;border-bottom:1px solid rgba(230,217,189,.16)}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
.lf-hero-inner{grid-template-columns:1fr;gap:2.2rem}
.lf-collage{grid-template-columns:1fr;padding-bottom:3rem}
.lf-darkband{grid-column:1;grid-row:1}
.lf-cell-start{grid-column:1;grid-row:1}
.lf-photos{grid-column:1;grid-row:2;padding-top:0;margin-bottom:2.2rem}
.lf-cell-map{grid-column:1;grid-row:3}
.lf-cell-visite{grid-column:1;grid-row:4}
.lf-cell-plus{grid-column:1;grid-row:5;padding-top:2.2rem}
.lf-photo-peek{padding-top:2rem}
.offers-head{grid-template-columns:1fr}
/* Bandeau de labels sur téléphone.
Les trois premiers labels ont l'icône APRÈS le texte dans le HTML : sur
grand écran c'est la colonne de gauche, alignée à droite du logo. Une fois
empilée, ça donnait un zigzag — trois lignes icône à droite, trois icône à
gauche, et rien qui s'aligne. On remet tout le monde dans le même sens,
icône à gauche, textes sur une même verticale. */
.tagband-inner{grid-template-columns:1fr;justify-items:stretch;gap:1.5rem}
.tagband-logo{order:-1;justify-self:center}
.tagband-feats{gap:0}
.feats-l,.feats-r{align-items:stretch;text-align:left}
.feats-l .feat{flex-direction:row-reverse;justify-content:flex-end}
.tagband .feat{padding:.75rem 0;border-bottom:1px solid rgba(240,228,200,.12)}
.feats-r .feat:last-child{border-bottom:0}
.feats-r{margin-top:0}
.feats-l .feat:first-child{border-top:1px solid rgba(240,228,200,.12)}
}
@media (max-width:640px){
.feature{grid-template-columns:1fr}
.feature-panel{grid-column:1}
.footer-grid{grid-template-columns:1fr}
.lf-photos{gap:.7rem}
.feature-specs{gap:.8rem 1.2rem}
}
@media (prefers-reduced-motion:reduce){
.feature-img img{transition:none}
}
/* ------------------------------------- carrousel recettes sur petit écran */
/* Empilé, le bloc gardait son `min-height: min(72vh, 620px)` : les trois lignes
de la grille s'étiraient pour le remplir, ce qui creusait de grands vides
entre le titre, les flèches et le pot. La hauteur suit désormais le contenu,
et les flèches se retrouvent juste au-dessus du visuel qu'elles commandent. */
@media (max-width: 640px) {
.feature { min-height: 0; }
.feature-panel { padding: 2rem 1.4rem 1.5rem; }
.feature-panel h2 { font-size: 1.85rem; margin-bottom: .6rem; }
.feature-panel-sub { font-size: .92rem; }
.feature-nav { margin-top: 1.3rem; }
.fnav { width: 46px; height: 46px; font-size: 1.4rem; }
.feature-img { padding: 1.2rem 1.4rem 1.6rem; }
.feature-img img { max-height: min(36vh, 290px); }
.feature-detail { padding: 1.8rem 1.4rem 2.4rem; }
.feature-specs { margin: 1.1rem 0; padding: .9rem 0; }
.feature-actions { gap: .9rem; }
}
/* ── ferme.css ── */
/* ==========================================================================
Sections éditoriales du gabarit « ferme » (page ferme + 7 pages locales)
Objectif : casser les pavés de texte — hiérarchie, image d'accompagnement,
chiffres clés, étapes numérotées et panneau d'engagements.
========================================================================== */
/* ---------------------------------------------------------------- intro */
.ferme-intro { padding: clamp(3.5rem, 7vw, 6rem) 0 0; }
.ferme-intro-grid {
display: grid; grid-template-columns: 1.05fr .95fr;
gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.ferme-intro-text .lead {
font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.12rem, 1.8vw, 1.42rem);
line-height: 1.45; color: var(--ox); margin-bottom: 1.2rem;
}
.ferme-intro-text > p:not(.lead) { color: var(--muted); }
.ferme-intro-media { position: relative; }
.ferme-intro-media img {
width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover;
border-radius: var(--r); box-shadow: var(--shadow-lg);
}
.ferme-intro-media figcaption {
position: absolute; left: 0; bottom: 0; transform: translate(-8%, 34%);
background: var(--ox-d); color: var(--cream-2);
padding: .9rem 1.2rem; border-radius: var(--r); max-width: 74%;
box-shadow: var(--shadow-lg);
}
.ferme-intro-media figcaption b {
display: block; font-family: 'Fraunces', serif; font-size: 1.05rem; color: #fff;
}
.ferme-intro-media figcaption span { font-size: .82rem; color: rgba(240, 228, 200, .7); }
/* ---------------------------------------------------------------- chiffres clés */
.stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1px; background: var(--line);
border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
margin-top: clamp(2.5rem, 5vw, 4rem);
}
.stat { background: var(--cream-2); padding: 1.6rem 1.3rem; text-align: center; }
.stat b {
display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 800;
font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1; color: var(--ox);
}
.stat span {
display: block; margin-top: .5rem; font-size: .8rem; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted);
}
/* ---------------------------------------------------------------- savoir-faire (étapes) */
.etapes-band { background: var(--cream-3); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.etapes-head { max-width: 58ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.etapes-head p { color: var(--muted); }
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.etape {
background: #fff; border: 1px solid var(--line); border-radius: var(--r);
padding: 1.8rem 1.6rem; position: relative; transition: transform .3s, box-shadow .3s;
}
.etape:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.etape-num {
display: block; font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem;
line-height: 1; color: var(--gold); margin-bottom: .8rem;
}
/* Certaines pages (produits, vente, pro) mettent une ICÔNE dans .etape-num au lieu
d'un numéro. Un