/* ========== Fonts (local) ========== */
@font-face{
  font-family: "CalibriLocal";
  src: url("assets/fonts/calibri.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Dusha";
  src: url("assets/fonts/dusha.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Felix";
  src: url("assets/fonts/felix.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Photography";
  src: url("assets/fonts/photography.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Verase";
  src: url("assets/fonts/verase.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========
       Ô TRIANGLE D'OR — QR Digital Premium (single file)
       Remplace les images dans /assets/ (logo, fond optionnel)
       ========= */
       

    :root{
      --bg:#f7f2ee;         /* ivoire */
      --ink:#1f1f1f;        /* charbon */
      --muted:#6b625d;      /* gris chaud */
      --gold:#c8a74a;       /* or mat */
      --card:rgba(255,255,255,.62);
      --stroke:rgba(31,31,31,.12);
      --shadow: 0 18px 60px rgba(0,0,0,.10);
      --radius: 22px;
      --radius-sm: 16px;
      --max: 980px;
      /* exemple : tu adaptes selon ta carte */
      --font-title: "Felix", ui-serif, Georgia, "Times New Roman", serif;
      --font-body: "CalibriLocal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      --font-script: "Photography", "Verase", "Dusha", cursive;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: var(--font-body);
      color:var(--ink);
      background: var(--bg);
      overflow-x:hidden;
    }

    /* Fond "papier" + ambiance sakura (sans dépendance) */
    .paper{
      position:fixed; inset:0;
      background:
        radial-gradient(1200px 700px at 15% 15%, rgba(236, 188, 206,.30), transparent 60%),
        radial-gradient(900px 600px at 85% 30%, rgba(236, 188, 206,.22), transparent 55%),
        radial-gradient(900px 600px at 65% 88%, rgba(236, 188, 206,.18), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.10)),
        repeating-linear-gradient(
          135deg,
          rgba(0,0,0,.015) 0px,
          rgba(0,0,0,.015) 2px,
          rgba(255,255,255,0) 5px,
          rgba(255,255,255,0) 9px
        );
      filter:saturate(0.95);
      pointer-events:none;
      z-index:-2;
    }

    /* Option : si tu as une image de fond "papier / sakura", décommente et mets ton fichier */
    /*
    .paper{
      background: url("assets/bg-paper-sakura.jpg") center/cover no-repeat fixed;
    }
    .paper::after{
      content:"";
      position:absolute; inset:0;
      background: rgba(247,242,238,.60);
      backdrop-filter: blur(1px);
    }
    */

    .wrap{
      width:min(var(--max), 92vw);
      margin: 0 auto;
      padding: 26px 0 90px;
    }

    header{
      position:sticky;
      top:0;
      backdrop-filter: blur(12px);
      background: linear-gradient(180deg, rgba(247,242,238,.92), rgba(247,242,238,.55));
      border-bottom:1px solid rgba(0,0,0,.06);
      z-index:5;
    }

    .topbar{
      width:min(var(--max), 92vw);
      margin:0 auto;
      padding: 12px 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .brand-mini{
      display:flex; align-items:center; gap:10px;
      min-width:0;
    }

    .brand-mini img{
      width:34px; height:34px; border-radius:50%;
      object-fit:contain;
      background: rgba(255,255,255,.55);
      border:1px solid rgba(0,0,0,.08);
      box-shadow: 0 8px 20px rgba(0,0,0,.08);
    }

    .brand-mini .t{
      display:flex; flex-direction:column; line-height:1.05;
      min-width:0;
    }
    .brand-mini .t b{
      font-family: ui-serif, Georgia, "Times New Roman", serif;
      letter-spacing:.02em;
      font-size:14px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-mini .t span{
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .pill{
      border:1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.55);
      padding:10px 12px;
      border-radius:999px;
      color:var(--ink);
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-weight:600;
      box-shadow: 0 10px 26px rgba(0,0,0,.06);
    }
    .pill:hover{ transform: translateY(-1px); }
    .pill:active{ transform: translateY(0px); }

    .hero{
      margin-top: 18px;
      border-radius: var(--radius);
      background: var(--card);
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }

    .hero-inner{
      padding: 26px 20px 22px;
      display:grid;
      gap: 14px;
      justify-items:center;
      text-align:center;
    }

    .logo{
      width: 118px;
      aspect-ratio: 1/1;
      border-radius: 50%;
      display:grid;
      place-items:center;
      background: rgba(255,255,255,.52);
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: 0 18px 50px rgba(0,0,0,.10);
    }
    .logo img{
      width: 92%;
      height: 92%;
      object-fit: contain;
      filter: drop-shadow(0 12px 20px rgba(0,0,0,.10));
    }

    .hero h1{
      margin: 2px 0 0;
      font-family: "Felix", ui-serif, Georgia, "Times New Roman", serif;
      letter-spacing: 0.04em;
      font-weight:700;
      font-size: clamp(22px, 4.3vw, 34px);
    }

    .hero .sub{
      font-family: "CalibriLocal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      letter-spacing: 0.08em;
      margin: 0;
      color:var(--muted);
      font-size: 14px;
      text-transform: uppercase;
    }

    .quote{
      margin: 8px 0 0;
      font-family: "Photography", "Verase", "Dusha", cursive;
      font-style: normal;
      color: rgba(31,31,31,.82);
      font-size: 20px;
    }

    .cta-row{
      margin-top: 14px;
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content:center;
    }

    .btn{
      border-radius: 999px;
      padding: 12px 16px;
      border:1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.62);
      color:var(--ink);
      text-decoration:none;
      font-weight:700;
      display:inline-flex;
      align-items:center;
      gap:10px;
      box-shadow: 0 14px 40px rgba(0,0,0,.08);
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .btn:hover{ transform: translateY(-1px); box-shadow: 0 18px 55px rgba(0,0,0,.10); }
    .btn:active{ transform: translateY(0px); }

    .btn.primary{
      background: linear-gradient(180deg, rgba(200,167,74,.95), rgba(200,167,74,.70));
      color: #221a0a;
      border-color: rgba(0,0,0,.10);
    }

    .grid{
      margin-top: 18px;
      display:grid;
      gap: 14px;
    }

    .card{
      border-radius: var(--radius);
      background: var(--card);
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow);
      overflow:hidden;
    }

    .section{
      padding: 18px 16px;
    }

    .section h2{
      margin: 0 0 10px;
      font-family: ui-serif, Georgia, "Times New Roman", serif;
      font-size: 20px;
      letter-spacing:.02em;
    }

    .divider{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(200,167,74,.55), transparent);
      margin: 12px 0;
    }

    /* Accordéons */
    details{
      border-radius: var(--radius-sm);
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.55);
      overflow:hidden;
      box-shadow: 0 12px 36px rgba(0,0,0,.06);
    }

    details + details{ margin-top: 10px; }

    summary{
      list-style:none;
      cursor:pointer;
      padding: 14px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      user-select:none;
    }

    summary::-webkit-details-marker{ display:none; }

.sum-left{
      display:flex; flex-direction:column; gap:3px;
      min-width:0;
    }

.sum-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.cat-icon{
  width:32px;
  height:32px;
  object-fit:contain;
  border-radius:8px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.12));
}

    .sum-title{
      font-family: "Dusha", "Photography", "Verase", cursive;
      font-style: normal;
      font-weight:800;
      letter-spacing:.04em;
      text-transform: uppercase;
      font-size: 16px;
    }

    .sum-sub{
      color: var(--muted);
      font-size: 12px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .chev{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.65);
  transition: transform .25s ease;
}
    details[open] .chev{ transform: rotate(180deg); }

    .content{
      padding: 0 14px 14px;
    }

    .items{
      display:grid;
      gap: 10px;
      margin-top: 8px;
    }

    .item{
      
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items:baseline;
      padding: 10px 10px;
      border-radius: 14px;
      background: rgba(255,255,255,.55);
      border:1px solid rgba(0,0,0,.06);
    }

    .item b{ 
      font-weight:800;
      font-family: "Felix", ui-serif, Georgia, "Times New Roman", serif;
      letter-spacing: 0.04em; 
    }
    .item small{
      font-family: "CalibriLocal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      display:block;
      color: #df432a;
      margin-top: 3px;
      line-height:1.35;
    }

    .price{
      font-variant-numeric: tabular-nums;
      font-weight:900;
      color: #2a2316;
      background: rgba(200,167,74,.18);
      border:1px solid rgba(200,167,74,.35);
      padding: 6px 10px;
      border-radius: 999px;
      white-space:nowrap;
    }

    .note{
      color: rgba(31,31,31,.80);
      line-height:1.6;
      margin: 8px 0 0;
    }

    /* Emplacements */
    .where{
      display:grid;
      gap: 12px;
    }

    .spot{
      padding: 14px 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.55);
      border:1px solid rgba(0,0,0,.08);
      display:grid;
      gap: 4px;
    }
    .spot .day{
      font-weight:900;
      letter-spacing:.06em;
      text-transform: uppercase;
      font-size: 12px;
      color: rgba(31,31,31,.85);
    }
    .spot .city{
      font-family: ui-serif, Georgia, "Times New Roman", serif;
      font-size: 18px;
      font-weight: 700;
    }
    .spot .place{
      color: var(--muted);
      line-height:1.45;
    }

    .mini-row{
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }

    .mini{
      border-radius: 999px;
      padding: 10px 12px;
      border:1px solid rgba(0,0,0,.10);
      background: rgba(255,255,255,.55);
      text-decoration:none;
      color:var(--ink);
      font-weight:800;
      display:inline-flex;
      align-items:center;
      gap: 8px;
    }

    /* Footer */
.site-footer{
  margin-top:40px;
  padding:20px 10px;
  text-align:center;
  font-size:13px;
  opacity:.55;
}

.site-footer .footer-link{
  color:inherit;
  text-decoration:none;
  font-weight:600;
}

.site-footer .footer-link:hover{
  text-decoration:underline;
  opacity:.85;
}

footer a{
  color:inherit;
  opacity:.5;
  font-size:12px;
}


    /* Animation d'apparition douce */
    .reveal{
      opacity:0;
      transform: translateY(8px);
      animation: in .55s ease forwards;
    }
    .reveal.delay-1{ animation-delay: .06s; }
    .reveal.delay-2{ animation-delay: .12s; }
    .reveal.delay-3{ animation-delay: .18s; }
    .reveal.delay-4{ animation-delay: .24s; }

    @keyframes in{
      to{ opacity:1; transform: translateY(0); }
    }

    /* Accessibilité */
    a:focus, summary:focus{
      outline: 2px solid rgba(200,167,74,.70);
      outline-offset: 3px;
    }

    /* Responsive */
    @media (min-width: 860px){
      .grid{ grid-template-columns: 1.2fr .8fr; }
      .section{ padding: 20px 18px; }
      .hero-inner{ padding: 28px 24px 24px; }
    }

    .seo-local{
  max-width:900px;
  margin:40px auto 0;
  font-size:14px;
  opacity:.75;
}

/* Animation d'entrée: légère, propre, CSS-only */
.enter{
  opacity: 0;
  transform: translateY(10px) scale(0.995);
  animation: enterFade .55s ease-out forwards;
  will-change: opacity, transform;
}

.enter.enter-delay-1{ animation-delay: .08s; }
.enter.enter-delay-2{ animation-delay: .16s; }
.enter.enter-delay-3{ animation-delay: .24s; }

@keyframes enterFade{
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Accessibilité/perf : si l'utilisateur a désactivé les animations */
@media (prefers-reduced-motion: reduce){
  .enter{
    animation: none;
    opacity: 1;
    transform: none;
  }
}