/* Lytis — site vitrine. Charte reprise de la bannière : bordeaux profond,
   crème, Playfair Display pour les titres, Montserrat pour la marque. */

@font-face { font-family: "Playfair Display"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/playfair-display-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/playfair-display-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/playfair-display-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/playfair-display-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/playfair-display-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal; font-display: swap; src: url(fonts/montserrat-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/montserrat-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/montserrat-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/montserrat-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/inter-latin-600-normal.woff2) format("woff2"); }

:root {
  --vin-950: #22060B;
  --vin-900: #2A070D;
  --vin-800: #3A0914;
  --vin-700: #5E0F24;
  --vin-600: #7A1830;
  --vin-voile: rgba(94, 15, 36, 0.07);
  --creme: #F4E8DA;
  --creme-clair: #FBF7F1;
  --papier: #FFFDFA;
  --encre: #1E1115;
  --texte: #3D2C31;
  --texte-doux: #6F5C62;
  --ligne: #EADFD3;
  --ligne-forte: #D9C9BA;
  --rayon: 16px;
  --rayon-sm: 10px;
  --ombre: 0 1px 2px rgba(34, 6, 11, 0.06), 0 24px 60px -20px rgba(34, 6, 11, 0.28);
  --ombre-douce: 0 1px 2px rgba(34, 6, 11, 0.05), 0 10px 30px -14px rgba(34, 6, 11, 0.18);
  --largeur: 1180px;
  --titres: "Playfair Display", Georgia, serif;
  --marque: "Montserrat", "Inter", sans-serif;
  --corps: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--creme-clair); color: var(--texte);
  font-family: var(--corps); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titres); color: var(--encre); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--vin-600); outline-offset: 3px; border-radius: 4px; }

.conteneur { width: min(var(--largeur), 100% - 48px); margin-inline: auto; }
.conteneur-etroit { width: min(820px, 100% - 48px); }
.evitement { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--papier); padding: 8px 14px; border-radius: 8px; }
.evitement:focus { left: 16px; }

/* --- Boutons --- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--corps); font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
  padding: 14px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }
.bouton-plein { background: var(--vin-700); color: var(--creme); }
.bouton-plein:hover { background: var(--vin-600); box-shadow: 0 10px 24px -12px rgba(94, 15, 36, 0.6); }
.bouton-creme { background: var(--creme); color: var(--vin-800); }
.bouton-creme:hover { background: #fff; }
.bouton-contour { border-color: rgba(244, 232, 218, 0.45); color: var(--creme); }
.bouton-contour:hover { border-color: var(--creme); background: rgba(244, 232, 218, 0.06); }
.bouton-fantome { color: var(--creme); padding-inline: 16px; }
.bouton-fantome:hover { background: rgba(244, 232, 218, 0.08); }
.bouton-large { width: 100%; }

/* --- En-tête --- */
.entete { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; border-bottom: 1px solid transparent; }
.entete-interieur { display: flex; align-items: center; gap: 32px; height: 76px; }
.marque { font-family: var(--marque); font-weight: 500; font-size: 17px; letter-spacing: 0.32em; text-decoration: none; color: var(--creme); }
.navigation { display: flex; gap: 28px; margin-left: 12px; }
.navigation a { font-size: 14.5px; color: rgba(244, 232, 218, 0.78); text-decoration: none; transition: color 0.2s ease; }
.navigation a:hover { color: var(--creme); }
.entete-actions { margin-left: auto; display: flex; gap: 8px; }
.entete-actions .bouton { padding: 11px 18px; font-size: 14px; }
.entete.defile { background: rgba(251, 247, 241, 0.9); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--ligne); }
.entete.defile .marque { color: var(--vin-800); }
.entete.defile .navigation a { color: var(--texte-doux); }
.entete.defile .navigation a:hover { color: var(--encre); }
.entete.defile .bouton-fantome { color: var(--vin-800); }
.entete.defile .bouton-fantome:hover { background: var(--vin-voile); }

/* --- Accroche --- */
.heros {
  position: relative; color: var(--creme);
  background:
    radial-gradient(1200px 600px at 12% 0%, rgba(122, 24, 48, 0.55), transparent 60%),
    linear-gradient(115deg, var(--vin-700) 0%, var(--vin-800) 45%, var(--vin-900) 100%);
  padding: 168px 0 0;
}
.heros-fond { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.reseau { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(244, 232, 218, 0.13); pointer-events: none; }
.heros-grille { position: relative; }
.heros-texte { max-width: 1000px; }
.heros-texte .chapeau { max-width: 660px; }
.surtitre { font-family: var(--marque); font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 232, 218, 0.72); margin-bottom: 22px; }
.surtitre-vin { color: var(--vin-700); }
.heros h1 { font-size: clamp(44px, 7vw, 84px); font-weight: 700; line-height: 1.02; color: var(--creme); letter-spacing: -0.02em; }
.chapeau { margin-top: 26px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: rgba(244, 232, 218, 0.84); max-width: 640px; }
.heros-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.garanties { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14px; color: rgba(244, 232, 218, 0.7); }
.garanties li { display: inline-flex; align-items: center; gap: 9px; }
.garanties li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--creme); opacity: 0.75; }
.heros-visuel { position: relative; margin-top: 72px; margin-bottom: -150px; z-index: 2; }

.fenetre { margin: 0; background: var(--papier); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; border: 1px solid rgba(34, 6, 11, 0.08); }
.fenetre-barre { display: flex; gap: 7px; padding: 12px 16px; background: #F1E9E0; border-bottom: 1px solid var(--ligne); }
.fenetre-barre span { width: 11px; height: 11px; border-radius: 50%; background: #DCCFC2; }
.fenetre img { width: 100%; }

/* --- Sections --- */
.section { padding: 128px 0; }
.section-claire { background: var(--papier); }
.heros + .section { padding-top: 250px; }
.titre-section { font-size: clamp(32px, 4.2vw, 50px); font-weight: 600; line-height: 1.12; max-width: 820px; }
.section-vin { background: linear-gradient(115deg, var(--vin-800), var(--vin-950)); color: rgba(244, 232, 218, 0.82); }
.section-vin .titre-section, .section-vin h3 { color: var(--creme); }
.section-vin .surtitre { color: rgba(244, 232, 218, 0.7); }

.grille-trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.carte-constat { background: var(--creme-clair); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 32px 30px; }
.numero { font-family: var(--titres); font-size: 15px; color: var(--vin-700); font-weight: 600; }
.carte-constat h3 { font-size: 23px; font-weight: 600; margin: 14px 0 10px; }
.carte-constat p { font-size: 16px; color: var(--texte-doux); }

/* --- Fonctionnalités --- */
.fonction { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; margin-top: 96px; }
.fonction-inverse .fonction-texte { order: 2; }
.etiquette { display: inline-block; font-family: var(--marque); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vin-700); background: var(--vin-voile); padding: 6px 12px; border-radius: 999px; }
.fonction h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; line-height: 1.18; margin: 18px 0 14px; }
.fonction p { color: var(--texte-doux); }
.points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; font-size: 15.5px; color: var(--texte); }
.points li { position: relative; padding-left: 26px; }
.points li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 9px; border-left: 2px solid var(--vin-700); border-bottom: 2px solid var(--vin-700); transform: rotate(-45deg); }

/* --- Méthode --- */
.etapes { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: etape; position: relative; }
.etapes li { position: relative; padding: 30px 28px 32px; border-radius: var(--rayon); background: var(--creme-clair); border: 1px solid var(--ligne); }
.etape-numero { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vin-700); color: var(--creme); font-family: var(--titres); font-size: 20px; font-weight: 600; }
.etapes h3 { font-size: 22px; font-weight: 600; margin: 20px 0 8px; }
.etapes p { color: var(--texte-doux); font-size: 16px; }

/* --- Engagements --- */
.grille-deux { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; }
.engagement { padding: 32px 30px; border-radius: var(--rayon); border: 1px solid rgba(244, 232, 218, 0.14); background: rgba(244, 232, 218, 0.04); }
.engagement h3 { font-size: 23px; font-weight: 600; margin-bottom: 10px; }
.engagement p { font-size: 16px; }

/* --- Tarifs --- */
.tarifs-intro { max-width: 640px; margin-top: 18px; color: var(--texte-doux); }
.tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; align-items: stretch; }
.offre { position: relative; display: flex; flex-direction: column; background: var(--papier); border: 1px solid var(--ligne); border-radius: 20px; padding: 36px 32px; box-shadow: var(--ombre-douce); }
.offre-nom { font-family: var(--marque); font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vin-700); }
.offre-prix { font-family: var(--titres); font-size: 30px; font-weight: 600; line-height: 1.15; margin: 14px 0 12px; color: var(--vin-900); }
.offre-detail { font-size: 15px; color: var(--texte-doux); }
.offre-liste { list-style: none; margin: 24px 0 32px; padding: 22px 0 0; border-top: 1px solid var(--ligne); display: grid; gap: 12px; flex: 1; align-content: start; }
.offre-liste li { position: relative; padding-left: 26px; font-size: 15px; }
.offre-liste li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 7px; border-left: 2px solid var(--vin-600); border-bottom: 2px solid var(--vin-600); transform: rotate(-45deg); }
.offre .bouton { align-self: stretch; justify-content: center; text-align: center; }
.offre-vedette { background: linear-gradient(150deg, var(--vin-700), var(--vin-950)); border-color: transparent; color: rgba(244, 232, 218, 0.85); box-shadow: 0 24px 60px -24px rgba(58, 9, 20, 0.55); }
.offre-vedette .offre-nom { color: rgba(244, 232, 218, 0.75); }
.offre-vedette .offre-prix { color: var(--creme); }
.offre-vedette .offre-detail { color: rgba(244, 232, 218, 0.75); }
.offre-vedette .offre-liste { border-top-color: rgba(244, 232, 218, 0.18); }
.offre-vedette .offre-liste li::before { border-color: var(--creme); }
.offre-badge { position: absolute; top: -13px; left: 32px; background: var(--creme); color: var(--vin-800); font-family: var(--marque); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.bouton-contour-vin { border: 1px solid var(--vin-700); color: var(--vin-700); background: transparent; }
.bouton-contour-vin:hover { background: var(--vin-700); color: var(--creme); }

/* --- Programme pilote --- */
.pilote { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; }
.pilote-texte p { margin-top: 20px; color: var(--texte-doux); }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; background: var(--papier); border: 1px solid var(--ligne); border-radius: 20px; padding: 34px; box-shadow: var(--ombre-douce); }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ-large, .formulaire .bouton-large, .formulaire-note { grid-column: 1 / -1; }
.champ label { font-size: 13.5px; font-weight: 500; color: var(--encre); }
.facultatif { color: var(--texte-doux); font-weight: 400; }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 15.5px; color: var(--encre); background: var(--creme-clair);
  border: 1px solid var(--ligne-forte); border-radius: var(--rayon-sm); padding: 12px 14px; width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.champ textarea { resize: vertical; min-height: 92px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--vin-700); background: #fff; box-shadow: 0 0 0 4px var(--vin-voile); }
.champ .invalide { border-color: #B4533C; }
.formulaire .bouton-large { margin-top: 6px; padding: 16px 24px; }
.formulaire-note { font-size: 13px; color: var(--texte-doux); text-align: center; }

/* --- Fondateur --- */
.fondateur { display: grid; grid-template-columns: 180px 1fr; gap: 48px; align-items: center; max-width: 900px; }
.fondateur-photo { width: 180px; height: 180px; border-radius: 50%; background: linear-gradient(135deg, var(--vin-700), var(--vin-900)) center / cover; display: flex; align-items: center; justify-content: center; font-family: var(--titres); font-size: 56px; color: var(--creme); box-shadow: var(--ombre-douce); }
.fondateur-nom { font-size: 38px; font-weight: 600; }
.fondateur-role { font-family: var(--marque); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texte-doux); margin-top: 6px; }
.fondateur-texte { margin-top: 18px; font-family: var(--titres); font-style: italic; font-size: 20px; line-height: 1.6; color: var(--texte); }
.lien-fleche { display: inline-block; margin-top: 18px; font-weight: 500; color: var(--vin-700); text-decoration: none; border-bottom: 1px solid currentColor; }
.lien-fleche::after { content: " →"; }

/* --- FAQ --- */
.faq { margin-top: 44px; border-top: 1px solid var(--ligne); }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 2px; font-family: var(--titres); font-size: 21px; font-weight: 500; color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex-shrink: 0; width: 12px; height: 12px; border-right: 2px solid var(--vin-700); border-bottom: 2px solid var(--vin-700); transform: rotate(45deg) translateY(-3px); transition: transform 0.25s ease; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 2px 26px; color: var(--texte-doux); max-width: 720px; }

/* --- Pied de page --- */
.pied { background: var(--vin-950); color: rgba(244, 232, 218, 0.7); padding: 56px 0; font-size: 14.5px; }
.pied-interieur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.pied .marque { color: var(--creme); }
.pied-accroche { margin-top: 6px; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 22px; }
.pied-liens a { text-decoration: none; color: rgba(244, 232, 218, 0.8); }
.pied-liens a:hover { color: var(--creme); }

/* --- Apparition au défilement --- */
.apparition { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.apparition.visible { opacity: 1; transform: none; }
.sans-js .apparition { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .apparition { opacity: 1; transform: none; transition: none; }
  .bouton:hover { transform: none; }
}

/* --- Page de mentions --- */
.page-simple { padding: 150px 0 100px; background: var(--papier); }
.page-simple h1 { font-size: clamp(34px, 4.4vw, 48px); font-weight: 600; margin-bottom: 36px; }
.page-simple h2 { font-size: 24px; font-weight: 600; margin: 40px 0 12px; }
.page-simple p, .page-simple li { color: var(--texte); }
.page-simple p + p { margin-top: 10px; }
.page-simple dl { display: grid; grid-template-columns: 220px 1fr; gap: 8px 20px; margin: 0; }
.page-simple dt { color: var(--texte-doux); }
.page-simple dd { margin: 0; }
.entete.entete-fixe-claire { background: rgba(251, 247, 241, 0.94); border-bottom-color: var(--ligne); }
.entete.entete-fixe-claire .marque { color: var(--vin-800); }
.entete.entete-fixe-claire .bouton-fantome { color: var(--vin-800); }

/* --- Écrans moyens et petits --- */
@media (max-width: 1020px) {
  .navigation { display: none; }
  .fonction, .fonction-inverse { grid-template-columns: 1fr; gap: 32px; margin-top: 80px; }
  .fonction-inverse .fonction-texte { order: 0; }
  .pilote { grid-template-columns: 1fr; gap: 40px; }
  .tarifs { grid-template-columns: 1fr; max-width: 520px; gap: 32px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .conteneur { width: calc(100% - 32px); }
  .entete-interieur { height: 64px; gap: 12px; }
  .entete-actions .bouton-plein { display: none; }
  .entete .entete-actions .bouton-fantome, .entete.defile .entete-actions .bouton-fantome { background: var(--vin-700); color: var(--creme); }
  .entete-actions .bouton { padding: 10px 14px; font-size: 13.5px; }
  .marque { font-size: 15px; }
  .heros { padding-top: 120px; }
  .heros-actions .bouton { width: 100%; }
  .heros-visuel { margin-top: 48px; margin-bottom: -80px; }
  .heros + .section { padding-top: 160px; }
  .section { padding: 88px 0; }
  .grille-trois, .etapes, .grille-deux { grid-template-columns: 1fr; margin-top: 40px; }
  .formulaire { grid-template-columns: 1fr; padding: 24px 20px; }
  .fondateur { grid-template-columns: 1fr; gap: 24px; text-align: left; }
  .fondateur-photo { width: 120px; height: 120px; font-size: 40px; }
  .faq summary { font-size: 18px; }
  .page-simple dl { grid-template-columns: 1fr; gap: 2px; }
  .page-simple dd { margin-bottom: 10px; }
}