/* ============================================================
   SaSha V2 (Django) — portage fidèle du design de l'app Next.js
   présentée dans le PPT : site vert-dominant (#0f630f), cartes
   blanches, panneaux crème, accents dorés (#fcd079).
   Polices : Rubik (display) + Open Sans. Compatible Bootstrap.
   ============================================================ */
:root {
  /* Verts V1 */
  --forest-50:#eef7ee; --forest-100:#d8eed8; --forest-300:#7cc47c;
  --forest-400:#3a962d; --forest-500:#2d9906; --forest-600:#198754;
  --forest-700:#147a12; --forest-800:#0f630f; --forest-900:#1c4217; --forest-950:#122c0f;
  /* Sable / crème */
  --sand-100:#f6f1e8; --sand-200:#e9e0d4; --panel:#fdfcf9;
  /* Or / laiton */
  --brass-300:#fde3a8; --brass-400:#fcd079; --brass-500:#f0b93d; --brass-600:#cfac11;
  /* Encre */
  --ink-900:#1c1e1c; --ink-700:#3d423d; --ink-500:#6c736c; --ink-100:#e8e8e8;
  --danger:#c0392b;
  --shadow-card:0 1px 2px rgba(15,40,12,.08), 0 6px 18px rgba(15,40,12,.12);
  --shadow-card-hover:0 2px 4px rgba(15,40,12,.10), 0 12px 28px rgba(15,40,12,.20);
  --shadow-modal:0 24px 64px rgba(15,40,12,.30);
}

* { box-sizing: border-box; }

body {
  font-family: "Open Sans", system-ui, sans-serif;
  background: var(--forest-800);        /* fond vert V1 partout */
  color: var(--ink-900);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; }
::selection { background: var(--brass-400); color: var(--forest-950); }

h1,h2,h3,h4,h5,.font-display,.navbar-brand {
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
a { color: var(--forest-600); text-decoration: none; }
a:hover { color: #157347; }

/* Filet doré sous les titres */
.gold-rule { position: relative; display: inline-block; }
.gold-rule::after {
  content: ""; position: absolute; left: 0; bottom: -0.55rem;
  width: 3.5rem; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brass-400), transparent);
}

/* -------------------------------------------------- Header / nav */
.sasha-nav { background: var(--forest-900); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.sasha-nav .navbar-brand { color:#fff; font-weight:700; letter-spacing:.3px; }
.sasha-nav .nav-link { color: rgba(255,255,255,.85); font-weight:600; font-size:.92rem; }
.sasha-nav .nav-link:hover, .sasha-nav .nav-link.active { color:#fff; }
.sasha-logo { height:42px; width:42px; border-radius:50%; object-fit:cover; border:2px solid var(--brass-400); }
.lang-switch a {
  text-decoration:none; font-size:1.1rem; line-height:1; opacity:.55;
  padding:0 .15rem; transition:opacity .15s, transform .15s;
}
.lang-switch a:hover { opacity:.9; }
.lang-switch a.active { opacity:1; transform:scale(1.18); }

/* -------------------------------------------------- Boutons (Next.js) */
.btn-s {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:.5rem; font-weight:600; font-size:.95rem; padding:.7rem 1.5rem;
  border:none; cursor:pointer; text-decoration:none;
  transition:transform .15s, box-shadow .2s, background-color .2s, filter .2s;
}
.btn-s:active { transform:translateY(1px); }
.btn-primary-s { background:var(--forest-600); color:#fff; box-shadow:var(--shadow-card); }
.btn-primary-s:hover { background:#157347; color:#fff; box-shadow:var(--shadow-card-hover); }
.btn-gold { background:var(--brass-400); color:var(--forest-950); box-shadow:var(--shadow-card); }
.btn-gold:hover { filter:brightness(1.05); color:var(--forest-950); box-shadow:var(--shadow-card-hover); }
.btn-ghost-light { background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.4); }
.btn-ghost-light:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.65); color:#fff; }
.btn-ghost-s { background:transparent; color:var(--forest-700); border:1.5px solid var(--forest-300); }
.btn-ghost-s:hover { border-color:var(--forest-600); background:var(--forest-50); color:var(--forest-700); }

/* -------------------------------------------------- Cartes & panneaux */
.card-s { background:#fff; border-radius:.75rem; box-shadow:var(--shadow-card); overflow:hidden;
  transition:transform .25s, box-shadow .25s; display:block; color:inherit; }
.card-hover-s:hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }
.card-media { position:relative; height:11rem; overflow:hidden; }
.card-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.card-hover-s:hover .card-media img { transform:scale(1.05); }

.page-panel { background:var(--panel); border-radius:1rem; box-shadow:var(--shadow-modal); }

/* -------------------------------------------------- Chips & badges */
.chip-duration {
  display:inline-block; background:var(--brass-400); color:var(--forest-500);
  border-radius:4px; padding:.15rem .6rem; font-size:.85rem; font-weight:700;
}
.badge-s { display:inline-flex; align-items:center; gap:.35rem; border-radius:999px;
  padding:.3rem .85rem; font-size:.75rem; font-weight:600; letter-spacing:.03em; }
.badge-gold { background:var(--brass-400); color:var(--forest-950); }
.badge-forest { background:var(--forest-100); color:var(--forest-900); }
.badge-outline { border:1px solid var(--ink-100); color:var(--ink-700); background:#fff; }
.badge-on-image { position:absolute; background:rgba(255,255,255,.95); color:var(--forest-700);
  border:1px solid rgba(25,135,84,.35); backdrop-filter:blur(6px); top:.8rem; left:.8rem; }
.price-tag { position:absolute; bottom:.8rem; right:.8rem; background:rgba(28,66,23,.92);
  color:#fff; font-weight:700; border-radius:10px; padding:.3rem .65rem; font-size:.9rem; }

/* -------------------------------------------------- Champs de formulaire */
.field {
  width:100%; border-radius:.5rem; border:2px solid var(--ink-100); background:#fff;
  padding:.65rem .9rem; font-size:.95rem; color:var(--ink-900);
  transition:border-color .15s, box-shadow .15s;
}
.field:focus { outline:none; border-color:var(--forest-600); box-shadow:0 0 0 4px rgba(25,135,84,.15); }
.field-label { display:block; font-size:.8rem; font-weight:700; letter-spacing:.03em; color:var(--ink-700); margin-bottom:.4rem; }
.field-label-on-green { color:#fff; }

/* -------------------------------------------------- Hero & vague */
.hero { background:var(--forest-800); color:#fff; }
.hero .brand-tagline { color:var(--brass-400); }
.wave { display:block; width:100%; height:90px; margin-top:-1px; }
.forest-section { background:var(--forest-800); color:#fff; }
.forest-section h1,.forest-section h2,.forest-section h3 { color:#fff; }

/* -------------------------------------------------- Ventilation pack */
.pack-line { display:flex; justify-content:space-between; padding:.4rem 0; border-bottom:1px dashed var(--ink-100); }
.pack-line.total { border-bottom:none; font-weight:700; font-size:1.08rem; }
.pack-note { background:var(--forest-50); border-left:4px solid var(--forest-600);
  border-radius:8px; padding:.8rem 1rem; font-size:.88rem; color:#2c4a28; }

/* -------------------------------------------------- FAQ */
.faq-item { background:#fff; border-radius:12px; margin-bottom:.7rem; box-shadow:var(--shadow-card); }
.faq-item summary { cursor:pointer; padding:1rem 1.2rem; font-weight:600; font-family:"Rubik",sans-serif;
  list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-size:1.4rem; color:var(--forest-600); }
.faq-item[open] summary::after { content:"–"; }
.faq-item .faq-body { padding:0 1.2rem 1.1rem; color:#46543f; }

/* -------------------------------------------------- Étapes */
.step-num { width:44px; height:44px; border-radius:50%; background:var(--forest-600); color:#fff;
  display:grid; place-items:center; font-family:"Rubik",sans-serif; font-weight:700; font-size:1.15rem; flex-shrink:0; }
.step-num.gold { background:var(--brass-400); color:var(--forest-950); }

/* -------------------------------------------------- Footer */
.sasha-footer { background:var(--forest-900); color:rgba(255,255,255,.82); }
.sasha-footer a { color:rgba(255,255,255,.82); }
.sasha-footer a:hover { color:var(--brass-400); }

.section { padding:4rem 0; }
.eyebrow { color:var(--brass-400); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; }
.meta { color:var(--ink-500); font-size:.88rem; }
.text-forest { color:var(--forest-600); }


.avatar-image {
    border-radius: var(--border-radius-large);
    width: 160px;
    height: 160px;
    object-fit: cover;
}

.section-title-wrap {
    background: var(--secondary-color);
    border-radius: var(--border-radius-small);
    padding: 10px 30px;
}

@media screen and (max-width: 991px) {
    .custom-btn, .navbar .custom-btn {
        font-size: var(--copyright-text-font-size);
        padding: 8px 16px;
    }
}

.custom-link {
    background-color: var(--primary-color);
}
.custom-btn {
    background: var(--secondary-color);
    border-radius: var(--border-radius-large);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    padding: 12px 24px;
}

/* Sold Out diagonal ribbon, pinned to a card's top-left corner */
.sold-out-ribbon-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
}

.sold-out-ribbon {
    position: absolute;
    top: 30px;
    left: -40px;
    width: 200px;
    padding: 6px 0;
    background-color: #dc3545;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}