/* ==============================================================
   Lady & The Wine — Landing publique
   --------------------------------------------------------------
   Issu du canevas validé (Dreamweaver). Chargé APRÈS style.css
   dans layouts/landing.php. Scope .layout--landing.
   Chemins images relatifs à public/css/ : ../IMG/...
   ============================================================== */

ira dans  public/css/landing.css
       - le HTML du <body> ira dans     partials/landing.php
       - chemins images : assets/...  ->  public/IMG/landing/...
     ================================================================= -->

<style>
/* ====== PALETTE & POLICES — modifiable ====== */
:root {
    --c-bordeaux:        #6b1d2c;
    --c-bordeaux-dark:   #3d0f18;
    --c-bordeaux-deep:   #2a0a11;
    --c-champagne:       #efdab7;
    --c-champagne-soft:  #f8f1de;
    --c-cream:           #fcfaf6;
    --c-ink:             #1a1411;
    --c-ink-soft:        #3b2f29;
    --c-mute:            #8a7a6e;
    --c-line:            #6b1d2c;
    --font-serif: Georgia, "Times New Roman", serif;
    --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--c-ink);
    background: var(--c-cream);
    line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }

/* ====== Full-bleed : aucune marge autour des sections ====== */
.layout--landing { margin: 0; padding: 0; }
.landing-main { margin: 0; padding: 0; max-width: none; width: 100%; }
.landing-hero,
.landing-tease,
.landing-wines,
.landing-cta,
.landing-footer { margin: 0; }

/* ====== HEADER (transparent sur le hero) ====== */
.landing-header {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    background: transparent;
}
.landing-header__inner {
    max-width: 1320px; margin: 0 auto;
    padding: 1.4rem 1.8rem;
    display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
}
.landing-header__logo img { height: 64px; width: auto; }
.landing-header__actions { display: flex; align-items: center; gap: 1rem; }
.landing-header__lang {
    color: #fff; font-size: 0.8rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 0.5rem 0.8rem; border-radius: 2px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.30);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    transition: background 0.2s, border-color 0.2s;
}
.landing-header__lang:hover { background: rgba(0,0,0,0.55); border-color: rgba(255,255,255,0.5); }
.landing-header__login {
    color: #fff; font-family: var(--font-serif); font-size: 0.95rem;
    border: 1px solid rgba(239,218,183,0.6); padding: 0.55rem 1.2rem;
    border-radius: 2px; background: rgba(0,0,0,0.15);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.landing-header__login:hover {
    background: var(--c-champagne); border-color: var(--c-champagne);
    color: var(--c-bordeaux-deep);
}

/* ====== HERO plein écran : photo + voile ====== */
.landing-hero {
    position: relative; min-height: 100vh;
    background-image: url("../IMG/hero_ladyandthewine.jpg");   /* PROD : ../IMG/landing/hero.jpg */
    background-size: cover; background-position: center 30%; background-repeat: no-repeat;
    color: #fff; display: flex; align-items: flex-end; overflow: hidden;
}
/* Voile dégradé retiré. Lisibilité du texte assurée par les
   text-shadow renforcés ci-dessous. Pour ré-assombrir légèrement
   sans dégradé, décommenter ce bloc :
.landing-hero::before {
    content: ""; position: absolute; inset: 0;
    background: rgba(26,20,17,0.30);
}
*/
.landing-hero__inner {
    position: relative; z-index: 1; max-width: 1320px; margin: 0 auto;
    padding: 8rem 1.8rem 4.5rem; width: 100%;
    display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
    gap: 4rem; align-items: end;
}
.landing-hero__copy { max-width: 36rem; }
.landing-hero__eyebrow {
    display: inline-block; color: var(--c-champagne);
    text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem;
    font-weight: 500; margin: 0 0 1.4rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(239,218,183,0.4);
    text-shadow:  2px 2px 2px rgba(0,0,0,0.6);
}
.landing-hero__title {
    font-family: var(--font-serif); font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05;
    letter-spacing: -0.015em; color: #fff; margin: 0 0 1.5rem;
    text-shadow: 0 2px 30px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.6);
}
.landing-hero__lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6;
    color: rgba(255,255,255,0.92); margin: 1; max-width: 32em;
    font-weight: 300; text-shadow: 0px 1px 5px rgba(0,0,0,1),  0px 1px 5px rgba(0,0,0,1);
}
	
/* ====== Panneau d'accès code parrain (dans le hero) ====== */
.landing-hero__access {
    background: rgba(26,20,17,0.55);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(239,218,183,0.25); border-radius: 3px;
    padding: 2.2rem 2rem 1.8rem; color: #fff;
}
.landing-hero__access-title {
    font-family: var(--font-serif); font-size: 1.35rem; margin: 0 0 0.3rem;
    color: var(--c-champagne); font-weight: 400;
}
.landing-hero__access-sub {
    margin: 0 0 1.4rem; color: rgba(255,255,255,0.78); font-size: 0.92rem;
}
.landing-hero__access-label {
    display: block; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.12em; color: rgba(239,218,183,0.85); margin-bottom: 0.5rem;
}
.landing-hero__access-row { display: flex; gap: 0.5rem; }
.landing-hero__access-input {
    flex: 1; min-width: 0;
    padding: 0.9rem 1rem;
    background: #ffffff;
    border: 1px solid transparent; border-radius: 2px;
    font-family: "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", "Courier New", monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1411 !important;
    -webkit-text-fill-color: #1a1411;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    caret-color: #5c1a2b;
}
.landing-hero__access-input:focus {
    outline: none; background: #fff; border-color: var(--c-champagne);
    box-shadow: 0 0 0 3px rgba(239,218,183,0.35);
    color: #1a1411 !important;
    -webkit-text-fill-color: #1a1411;
}
.landing-hero__access-input::placeholder {
    color: #b6a99a;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: none;
    opacity: 1;
}
/* Bloquer l'autofill navigateur qui applique sa propre couleur */
.landing-hero__access-input:-webkit-autofill,
.landing-hero__access-input:-webkit-autofill:hover,
.landing-hero__access-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #1a1411 !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
}
.landing-hero__access-submit {
    padding: 0.75rem 1.3rem; background: var(--c-champagne);
    color: var(--c-bordeaux-deep); border: 1px solid var(--c-champagne);
    border-radius: 2px; font: inherit; font-weight: 600; font-size: 0.95rem;
    cursor: pointer; letter-spacing: 0.02em; white-space: nowrap;
    transition: background 0.18s, transform 0.18s;
}
.landing-hero__access-submit:hover { background: #fff; transform: translateY(-1px); }
.landing-hero__access-cta {
    margin: 1.4rem 0 0; padding-top: 1.2rem;
    border-top: 1px solid rgba(239,218,183,0.18);
    color: rgba(255,255,255,0.75); font-size: 0.9rem;
}
.landing-hero__access-link {
    color: var(--c-champagne); margin-left: 0.4rem; font-weight: 500;
    border-bottom: 1px solid rgba(239,218,183,0.5); padding-bottom: 1px;
    transition: border-color 0.2s;
}
.landing-hero__access-link:hover { border-bottom-color: var(--c-champagne); }

/* ====== SECTION TEASE (éditoriale, 3 colonnes) ====== */
.landing-tease {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 6rem 1.8rem 5rem;

    /* couleur de fond de la section */
    background-color: var(--c-champagne-soft);
}

/* image de fond indépendante */
.landing-tease::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("../IMG/Ladyandthewine-hero.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;

    /* transparence uniquement de l'image */
    opacity: 0.5; 

    z-index: -1;
    pointer-events: none;
}

/* contenu au-dessus du fond */
.landing-tease__inner {
    position: relative;
    z-index: 1;

    /* optionnel : évite que le texte passe sur l'image */
    max-width: 760px;
}
	
.landing-tease__inner { max-width: 1100px; margin: 0 auto; }
.landing-tease__header { text-align: center; margin: 0 0 3.5rem; }
.landing-tease__title {
    font-family: var(--font-serif); font-weight: 400;
    font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.2;
    color: var(--c-bordeaux-deep); margin: 0 0 0.8rem; letter-spacing: -0.01em;
}
.landing-tease__text {
    color: var(--c-ink-soft); font-size: 1.05rem; line-height: 1.65;
    margin: 0 auto; max-width: 44rem;
}
.landing-tease__list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem;
}
.landing-tease__list li {
    position: relative; padding: 1.5rem 0 0; text-align: center;
    color: var(--c-ink-soft); font-size: 0.98rem; line-height: 1.55;
}
.landing-tease__list li::before {
    content: ""; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%); width: 28px; height: 1px; background: var(--c-bordeaux);
}


/* ====== SECTION VIGNETTES VIN ====== */
.landing-wines { background: var(--c-champagne-soft); padding: 5rem 1.8rem; }
.landing-wines__inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.landing-wines__title {
    font-family: var(--font-serif); font-weight: 400; color: var(--c-bordeaux-deep);
    font-size: clamp(1.7rem, 2.6vw, 2.1rem); margin: 0 0 0.6rem;
}
.landing-wines__sub { color: var(--c-mute); margin: 0 0 3rem; font-size: 1rem; }
.landing-wines__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem; }
.landing-wine {
    text-align: center; padding: 1.5rem 1rem; background: #fff;
    border-radius: 3px; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.landing-wine:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(60,30,30,0.08); }
.landing-wine__img {
    height: 240px; width: auto; object-fit: contain; margin: 0 auto 1.2rem;
}
.landing-wine__img--placeholder {
    height: 240px; width: 100%; border-radius: 2px;
    background: radial-gradient(circle at 50% 35%, var(--c-champagne) 0%, transparent 70%), var(--c-cream);
}
.landing-wine__cru {
    font-family: var(--font-serif); color: var(--c-bordeaux-deep); font-size: 1.1rem;
    margin: 0 0 0.4rem; font-weight: 500; line-height: 1.3; min-height: 2.8em;
}
.landing-wine__appellation {
    color: var(--c-bordeaux); font-size: 0.72rem; letter-spacing: 0.16em;
    text-transform: uppercase; margin: 0 0 0.8rem; font-weight: 500;
}
.landing-wine__teaser { color: var(--c-mute); font-style: italic; font-size: 0.85rem; margin: 0; }
.landing-wine--rouge { border-bottom: 2px solid var(--c-bordeaux); }
.landing-wine--blanc { border-bottom: 2px solid var(--c-champagne); }

/* ====== CTA FINAL ====== */
.landing-cta {
    background: #5c1a2b; color: #fff;
    padding: 5rem 1.8rem; text-align: center; position: relative; overflow: hidden;
}
.landing-cta::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(239,218,183,0.06) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(239,218,183,0.04) 0%, transparent 50%);
}
.landing-cta__inner { position: relative; max-width: 720px; margin: 0 auto; }
.landing-cta__title {
    font-family: var(--font-serif); font-weight: 250;
    font-size: clamp(1.0rem, 3vw, 1.4rem); margin: 0 0 0.8rem; color: #fff;
}
.landing-cta__text {
    font-size: 1.05rem; line-height: 1.6; margin: 0 0 2rem; color: rgba(244,234,212,0.92);
}
.landing-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn {
    display: inline-block; padding: 0.85rem 1.8rem; border-radius: 2px;
    font: inherit; font-weight: 600; letter-spacing: 0.02em; cursor: pointer;
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.btn--primary {
    background: var(--c-champagne); color: var(--c-bordeaux-deep); border: 1px solid var(--c-champagne);
}
.btn--primary:hover { background: #fff; transform: translateY(-1px); }
.btn--ghost {
    background: transparent; color: #fff; border: 1px solid rgba(239,218,183,0.5);
}
.btn--ghost:hover { background: rgba(239,218,183,0.12); border-color: var(--c-champagne); }

/* ====== FOOTER ====== */
.landing-footer { background: #000; color: rgba(239,218,183,0.7); padding: 2rem 0; font-size: 0.88rem; }
.landing-footer__inner {
    max-width: 1320px; margin: 0 auto; padding: 0 1.8rem;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.landing-footer__copy { margin: 0; opacity: 0.75; }
.landing-footer__brand { display: flex; align-items: center; gap: 1rem; }
.landing-footer__logo { display: inline-flex; }
.landing-footer__logo img { height: 56px; width: auto; display: block; }
.landing-footer__links { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.landing-footer__links a {
    color: rgba(239,218,183,0.85); border-bottom: 1px solid transparent;
    padding-bottom: 1px; transition: color 0.2s, border-color 0.2s;
}
.landing-footer__links a:hover { color: var(--c-champagne); border-bottom-color: rgba(239,218,183,0.5); }

/* ====== RESPONSIVE ====== */
@media (max-width: 960px) {
    .landing-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 7rem 1.4rem 3.5rem; }
    .landing-hero__copy { max-width: none; }
    .landing-tease__list { grid-template-columns: 1fr; gap: 1.8rem; }
    .landing-tease { padding: 4rem 1.4rem 3.5rem; }
    .landing-wines__grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .landing-wines { padding: 3.5rem 1.4rem; }
    .landing-cta { padding: 4rem 1.4rem; }
}
@media (max-width: 768px) {
    .landing-tease::before {
        background-position: center bottom;
        background-size: 85%;
        opacity: 0.18;
    }

    .landing-tease__inner {
        max-width: none;
    }
}
@media (max-width: 600px) {
    .landing-header__inner { padding: 1rem 1.2rem; }
    .landing-header__logo img { height: 48px; }
    .landing-header__actions { gap: 0.8rem; }
    .landing-header__login { font-size: 0.85rem; padding: 0.4rem 0.9rem; }
    .landing-hero { min-height: 92vh; background-position: center 25%; }
    .landing-hero__inner { padding: 6.5rem 1.2rem 3rem; gap: 2rem; }
    .landing-hero__access { padding: 1.6rem 1.3rem 1.4rem; }
    .landing-hero__access-row { flex-direction: column; }
    .landing-hero__access-submit { width: 100%; }
    .landing-footer__inner { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0 1.2rem; }
}
