/* Les Vins 23 — feuille de style partagée (refonte juin 2026) */

:root{
	--wine:#5a1226;
	--wine-deep:#3c0c18;
	--wine-mid:#7c1c35;
	--cream:#f5efe6;
	--cream-2:#ece3d4;
	--ink:#2a1119;
	--gold:#b89364;
	--gold-soft:#caa978;
	--muted-d:#d3c4b6;   /* texte secondaire sur fond sombre */
	--muted-l:#7c6c63;   /* texte secondaire sur fond clair */
	--display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
	--body:'EB Garamond',Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
	font-family:var(--body);
	font-size:19px;
	color:var(--ink);
	background:var(--cream);
	line-height:1.75;
	-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.12}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 36px}
.eyebrow{font-family:var(--body);font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:500}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:2.6em;
	padding:1.5em 0;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;
	background:transparent;transition:background .4s ease,padding .4s ease}
.nav.solid{background:rgba(60,12,24,.97);padding:1em 0;box-shadow:0 1px 0 rgba(184,147,100,.25)}
.nav a{color:#efe6da;opacity:.85;transition:opacity .3s,color .3s}
.nav a:hover,.nav a.active{opacity:1;color:#fff}

/* ---------- HERO ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
	color:var(--cream);background:var(--wine-deep);position:relative;padding:8em 36px 5em}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 12%,rgba(124,28,53,.55),transparent 62%)}
.hero>*{position:relative}
.hero .logo-mark{width:min(360px,68vw);margin:0 auto 1.4em}
.hero .rule{width:56px;height:1px;background:var(--gold);margin:.4em auto 1.6em}
.hero .tagline{font-size:.9rem;letter-spacing:.28em;text-transform:uppercase;color:#e4d7c7;line-height:2.4;max-width:40em}
.hero .scroll-cue{margin-top:3.4em;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:#b69f8c}

/* ---------- SECTIONS ---------- */
section{padding:6.5em 0}
.section-head{text-align:center;margin-bottom:3em}
.section-head h2{font-size:clamp(2.4rem,5vw,3.4rem);margin-top:.3em}
.dark{background:var(--wine);color:var(--cream)}
.dark .section-head h2{color:#fff}
.deep{background:var(--wine-deep);color:var(--cream)}

.about p{max-width:48em;margin:0 auto 1.15em;text-align:center;font-size:1.12rem;color:var(--ink)}
.about strong{font-weight:400;color:var(--wine-mid)}
.dark .about p{color:var(--cream)}

/* ---------- GAMME : cartes de catégories (accueil) ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6em;max-width:880px;margin:0 auto}
.cat-card{display:block;border:1px solid rgba(184,147,100,.35);padding:2.2em 2em;text-align:center;
	transition:background .3s,border-color .3s,transform .3s}
.cat-card:hover{background:rgba(184,147,100,.10);border-color:var(--gold);transform:translateY(-3px)}
.cat-card .ej{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.cat-card h3{font-size:2rem;color:#fff;margin:.25em 0 .15em}
.cat-card p{font-size:.98rem;color:var(--muted-d)}
.cat-card .go{display:inline-block;margin-top:1em;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}

/* ---------- SOUS-PAGE GAMME ---------- */
.page-head{background:var(--wine-deep);color:var(--cream);text-align:center;padding:9em 36px 3.5em;position:relative}
.page-head:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgba(124,28,53,.5),transparent 60%)}
.page-head>*{position:relative}
.page-head .logo-mini{width:150px;margin:0 auto 1.6em;opacity:.95}
.page-head h1{font-size:clamp(2.6rem,6vw,4rem);color:#fff}
.page-head .intro{max-width:40em;margin:1em auto 0;color:#e4d7c7;font-size:1.1rem}

.vins{max-width:880px;margin:0 auto;padding:1em 0}
.vin{padding:1.5em 0;border-bottom:1px solid rgba(0,0,0,.10);display:grid;grid-template-columns:1fr;gap:.1em}
.vin:last-child{border-bottom:none}
.vin .n{font-family:var(--display);font-size:1.7rem;color:var(--wine)}
.vin .o{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:.15em 0 .35em}
.vin .d{font-size:1.06rem;color:var(--ink)}
.vin .tag{display:inline-block;margin-left:.6em;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
	color:var(--muted-l);border:1px solid rgba(124,28,53,.3);border-radius:2px;padding:.12em .5em;vertical-align:middle}

.cat-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2em;margin:3.5em 0 0;
	font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
.cat-nav a{color:var(--wine-mid);border-bottom:1px solid transparent;padding-bottom:.2em}
.cat-nav a:hover{border-color:var(--gold)}
.cat-nav a.current{color:var(--gold);border-color:var(--gold)}

/* ---------- CONTACT ---------- */
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5em;max-width:860px;margin:0 auto}
.contact .lbl{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:.5em}
.contact address{font-style:normal;color:var(--ink);margin-bottom:1.8em;font-size:1.08rem;line-height:1.75}
.contact a.link{color:var(--wine-mid);border-bottom:1px solid rgba(124,28,53,.35)}
.contact .badge{display:inline-block;margin-top:.6em;padding:.55em 1.2em;border:1px solid var(--gold);
	font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wine-mid)}
.socials{margin-top:1.4em;display:flex;gap:1.6em;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase}
.socials a{color:var(--wine-mid)}
.socials a:hover{color:var(--gold)}

/* ---------- FOOTER ---------- */
footer{background:var(--wine-deep);color:#b69f8c;text-align:center;padding:3em 36px;font-size:.74rem;letter-spacing:.12em}
footer .logo-foot{width:130px;margin:0 auto 1.4em;opacity:.85}
footer a{color:#caa978}

@media(max-width:760px){
	body{font-size:18px}
	.nav{gap:1.3em;font-size:.66rem;flex-wrap:wrap}
	.cat-grid{grid-template-columns:1fr}
	.contact .grid{grid-template-columns:1fr;gap:2.4em}
	section{padding:4.5em 0}
}

/* ---------- GRILLE DE RÉFÉRENCES (sous-pages gamme) ---------- */
.wine-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.6em;max-width:1000px;margin:0 auto;padding:1em 0}
.wine-card{cursor:pointer;border:1px solid rgba(0,0,0,.08);background:#fff;padding:1.7em 1.2em 1.4em;text-align:center;
	transition:transform .3s,box-shadow .3s,border-color .3s}
.wine-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(60,12,24,.12);border-color:rgba(184,147,100,.55)}
.wine-card .thumb{height:185px;display:flex;align-items:center;justify-content:center;margin-bottom:1em}
.wine-card .thumb img{max-height:185px;width:auto;object-fit:contain}
.wine-card .cn{font-family:var(--display);font-size:1.4rem;color:var(--wine);line-height:1.12}
.wine-card .co{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:.45em}
.wine-card .more{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-l);margin-top:.8em;opacity:.75}

/* ---------- FICHE (modale) ---------- */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(40,8,14,.72)}
.modal.open{display:flex}
.modal .box{background:var(--cream);max-width:780px;width:100%;border-top:3px solid var(--gold);
	display:grid;grid-template-columns:250px 1fr;gap:2.2em;padding:2.6em;position:relative}
.modal .ph{display:flex;align-items:center;justify-content:center}
.modal .ph img{max-height:360px;width:auto;object-fit:contain}
.modal .info h3{font-size:2.3rem;color:var(--wine);line-height:1.08}
.modal .info .mo{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:.55em 0 1.2em}
.modal .info .md{font-size:1.14rem;color:var(--ink)}
.modal .close{position:absolute;top:12px;right:20px;font-size:1.8rem;color:var(--wine);cursor:pointer;line-height:1}
@media(max-width:680px){.modal .box{grid-template-columns:1fr;text-align:center;padding:2em}.modal .ph img{max-height:240px}}

/* ---------- BOUTONS RÉSEAUX ---------- */
.socials{align-items:center;gap:1em}
.social-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
	border:1px solid var(--gold);color:var(--wine-mid);transition:background .3s,color .3s,border-color .3s}
.social-btn:hover{background:var(--wine-mid);color:#fff;border-color:var(--wine-mid)}
.social-btn svg{width:21px;height:21px;fill:currentColor}
footer .socials{justify-content:center;margin-top:1.6em}
footer .social-btn{border-color:rgba(202,169,120,.6);color:#caa978}
footer .social-btn:hover{background:#caa978;color:var(--wine-deep);border-color:#caa978}

/* ---------- MÉDAILLON LOGO (accueil) ---------- */
.logo-disc{width:230px;height:230px;border-radius:50%;background:var(--cream);overflow:hidden;
	display:flex;align-items:center;justify-content:center;margin:0 auto 1.5em;
	box-shadow:0 0 0 1px rgba(184,147,100,.75),0 0 0 11px rgba(245,239,230,.05)}
.logo-disc img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.logo-disc{width:180px;height:180px}}

/* ---------- ACTUALITÉS ---------- */
.news{max-width:820px;margin:0 auto;padding:1em 0}
.news-item{background:#fff;border:1px solid rgba(0,0,0,.08);border-left:3px solid var(--gold);
	padding:1.7em 1.9em;margin-bottom:1.4em}
.news-item .date{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.news-item h3{font-family:var(--display);font-size:1.65rem;color:var(--wine);margin:.2em 0 .45em;line-height:1.15}
.news-item p{font-size:1.06rem;color:var(--ink);margin:0}
.news-item .src{display:block;margin-top:.7em;font-size:.85rem;font-style:italic;color:var(--muted-l)}
.news-note{max-width:820px;margin:2em auto 0;text-align:center;font-size:.85rem;font-style:italic;color:var(--muted-l)}

/* ---------- NOS MAISONS (À propos) ---------- */
.maisons-label{text-align:center;margin:2.8em 0 .2em}
.maisons{display:grid;grid-template-columns:1fr 1fr;gap:2.6em;max-width:900px;margin:1.4em auto 0;text-align:left}
.maison{display:block;border-top:2px solid var(--gold);padding-top:1.1em;color:inherit;text-decoration:none;transition:transform .3s}
.maison:hover{transform:translateY(-3px)}
.maison:hover h3{color:var(--wine-mid)}
.maison .plus{display:inline-block;margin-top:.8em;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.maison .lieu{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.maison h3{font-family:var(--display);font-size:1.8rem;color:var(--wine);margin:.1em 0 .45em;line-height:1.1}
.maison p{font-size:1rem;color:var(--ink);margin:0;line-height:1.65;text-align:left}
@media(max-width:760px){.maisons{grid-template-columns:1fr;gap:2em}}

/* ---------- PAGE LECTURE (maisons) ---------- */
.lecture{max-width:44em;margin:0 auto;text-align:left}
.lecture p{font-size:1.12rem;color:var(--ink);margin:0 0 1.3em;line-height:1.8}
.lecture p strong{font-weight:400;color:var(--wine-mid)}
.back-link{display:inline-block;margin-top:1.6em;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
	color:var(--wine-mid);border-bottom:1px solid var(--gold);padding-bottom:.2em}