/* Design « Canopée » : cabanes et glamping sous les sapins, toile de tente, nuit étoilée et lanternes. Fraunces + Plus Jakarta Sans. */
.d-canopee {
  --cream: #f6f0e1;
  --canvas: #fffaf0;
  --amber: #f2b45a;
  --night: color-mix(in oklab, var(--primary), #06110d 72%);
  --pine: color-mix(in oklab, var(--primary), #000 58%);
  --trees: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80'%3E%3Cpath d='M14 34L19 51L17 51L22 64L18 64L24 74L16 80L12 80L4 74L10 64L6 64L11 51L9 51ZM38 14L46 39L42 39L49 58L44 58L52 74L40 80L36 80L24 74L32 58L27 58L34 39L30 39ZM62 40L67 55L64 55L69 66L65 66L70 74L64 80L60 80L54 74L59 66L55 66L60 55L57 55ZM86 22L93 44L89 44L96 60L91 60L98 74L88 80L84 80L74 74L81 60L76 60L83 44L79 44ZM112 6L121 34L116 34L124 55L118 55L128 74L114 80L110 80L96 74L106 55L100 55L108 34L103 34ZM140 32L146 50L143 50L148 64L144 64L150 74L142 80L138 80L130 74L136 64L132 64L137 50L134 50ZM164 18L171 42L168 42L174 59L169 59L177 74L166 80L162 80L151 74L159 59L154 59L160 42L157 42ZM190 36L195 53L193 53L197 65L194 65L199 74L192 80L188 80L181 74L186 65L183 65L187 53L185 53ZM212 10L220 37L216 37L224 56L218 56L227 74L214 80L210 80L197 74L206 56L200 56L208 37L204 37ZM229 40L234 55L231 55L236 66L232 66L237 74L231 80L227 80L221 74L226 66L222 66L227 55L224 55ZM0 76H240V80H0Z'/%3E%3C/svg%3E");
  --fir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M10 0L15 8H13L17 15H14L19 21H11V24H9V21H1L6 15H3L7 8H5Z'/%3E%3C/svg%3E");
  --stars: radial-gradient(circle, #fff 0 1px, transparent 1.6px) 7px 11px / 97px 83px, radial-gradient(circle, rgba(255,255,255,.65) 0 .8px, transparent 1.4px) 41px 29px / 67px 131px, radial-gradient(circle, rgba(255,255,255,.75) 0 .9px, transparent 1.5px) 63px 5px / 151px 113px, radial-gradient(circle, #fff7d6 0 1.5px, transparent 2.2px) 120px 70px / 211px 173px, radial-gradient(circle, rgba(255,255,255,.6) 0 .8px, transparent 1.4px) 13px 57px / 113px 61px;
  --stitch: 1.5px dashed color-mix(in oklab, var(--primary), transparent 62%);
  --bg: var(--cream);
  --bg-soft: #efe6d1;
  --surface: var(--canvas);
  --ink: #1d2a22;
  --ink-2: #435046;
  --ink-3: #5f6a5e;
  --line: #e2d6bc;
  --head-w: 600;
  --h1-w: 600;
  --head-track: -.015em;
  --h1-track: -.025em;
  --footer-bg: var(--night);
  word-spacing: .06em;
}

/* Boutons */
.d-canopee .btn-primary { background: var(--primary); box-shadow: 0 10px 22px -10px var(--pine); }
.d-canopee .btn-primary:hover { background: var(--pine); }
.d-canopee .btn-ghost { background: transparent; border-color: color-mix(in oklab, var(--primary), transparent 50%); color: var(--pine); }
.d-canopee .btn-white { background: var(--cream); color: var(--pine); }

/* Annonce + en-tête */
.d-canopee .announce { background: var(--night); color: #f3ead2; }
.d-canopee .site-header { --header-bg: rgba(246, 240, 225, .9); }
.d-canopee .site-header.scrolled { border-bottom-color: var(--line); }
.d-canopee .brand-mark { border-radius: 50%; background: var(--primary); box-shadow: inset 0 0 0 3px var(--primary), inset 0 0 0 4.5px var(--cream); }
.d-canopee .brand-text strong { font-size: 1.22rem; font-weight: 600; color: var(--pine); }
.d-canopee .brand-stars { color: var(--amber); }
.d-canopee .nav a { white-space: nowrap; padding: .5em .75em; }
.d-canopee .nav a:hover { background: color-mix(in oklab, var(--primary), transparent 88%); color: var(--pine); }

/* Bannière : nuit étoilée, lune, tente éclairée, deux rangs de sapins */
.d-canopee .hero { background: radial-gradient(900px 480px at 100% 0, color-mix(in oklab, var(--primary), transparent 86%), transparent 70%), var(--cream); }
.d-canopee .hero h1 { color: var(--pine); font-size: clamp(2.5rem, 5vw, 4.2rem); line-height: 1.03; }
.d-canopee .hero-sub { color: var(--ink-2); }
.d-canopee .pill-badge { background: var(--canvas); border: var(--stitch); color: var(--pine); }
.d-canopee .pill-badge .dot { background: var(--amber); box-shadow: 0 0 0 4px rgba(242, 180, 90, .25), 0 0 12px var(--amber); }
.d-canopee .hero-art { border-radius: 180px 180px var(--radius) var(--radius); background: var(--stars), radial-gradient(40% 26% at 50% 88%, rgba(255, 200, 110, .45), transparent 70%), radial-gradient(120% 70% at 50% 100%, color-mix(in oklab, var(--primary), #8fb8a0 30%), transparent 70%), linear-gradient(180deg, var(--night), color-mix(in oklab, var(--primary), #0b1e17 40%)); box-shadow: 0 0 0 8px var(--canvas), 0 0 0 9.5px var(--line), var(--shadow-lg); }
.d-canopee .hero-art::before { background: none; }
.d-canopee .hero-art::after { content: ''; position: absolute; inset: auto 0 0; height: 30%; background: var(--pine); -webkit-mask: var(--trees) 0 100% / 300px 100px repeat-x; mask: var(--trees) 0 100% / 300px 100px repeat-x; }
.d-canopee .art-ring.r1 { width: 14%; left: 27%; top: 17%; border: 0; background: radial-gradient(circle at 38% 38%, #fffbea, #f1e3b8 70%); box-shadow: 0 0 30px 6px rgba(255, 244, 205, .35); }
.d-canopee .art-ring.r2 { inset: auto 0 0; width: 100%; height: 44%; translate: none; border: 0; border-radius: 0; animation: none; background: color-mix(in oklab, var(--primary), #0b1e17 25%); -webkit-mask: var(--trees) 70px 100% / 420px 140px repeat-x; mask: var(--trees) 70px 100% / 420px 140px repeat-x; }
.d-canopee .art-cross { top: auto; bottom: 9%; translate: -50% 0; width: 40%; aspect-ratio: 1.25; border: 0; border-radius: 0; backdrop-filter: none; z-index: 1; place-items: end center; padding-bottom: 6%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); background: conic-gradient(from 161deg at 50% 34%, #ffd789 0 38deg, transparent 0), linear-gradient(90deg, #efe3c6 50%, #d9c79f 50%); filter: drop-shadow(0 0 30px rgba(255, 200, 110, .5)); }
.d-canopee .art-cross .ic { width: 22%; height: auto; stroke: var(--pine); filter: none; }
.d-canopee .art-pill { width: 50px; height: 50px; border-radius: 50%; background: var(--canvas); color: var(--primary); box-shadow: 0 0 0 5px rgba(255, 215, 137, .18), 0 0 28px rgba(255, 200, 110, .55); }
.d-canopee .art-pill .ic { width: 24px; height: 24px; }
.d-canopee .art-pill.p1 { left: 9%; top: 46%; }
.d-canopee .art-pill.p2 { right: 9%; top: 38%; }
.d-canopee .art-pill.p3 { right: auto; left: 10%; bottom: 30%; display: none; }
.d-canopee .float-card { border-radius: 16px; background: rgba(255, 250, 240, .96); border: var(--stitch); }
.d-canopee .float-card > .ic { color: var(--primary); }

/* Points forts : toile cousue */
.d-canopee .hl-grid { background: var(--canvas); border-color: var(--line); outline: var(--stitch); outline-offset: -8px; }
.d-canopee .hl-item + .hl-item { border-left-color: var(--line); }
.d-canopee .ic-box { border-radius: 6px 50%; background: color-mix(in oklab, var(--primary), transparent 88%); color: var(--pine); }

/* Titres : petit sapin */
.d-canopee .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); }
.d-canopee .eyebrow::before { content: ''; width: 13px; height: 16px; background: currentColor; -webkit-mask: var(--fir) center / contain no-repeat; mask: var(--fir) center / contain no-repeat; }
.d-canopee .sec-head h2 { color: var(--pine); font-size: clamp(2rem, 3.6vw, 3rem); }

/* Hébergements : nuit en forêt, lueur de lanterne */
.d-canopee .room { background: var(--canvas); border-color: var(--line); }
.d-canopee .room-ph { color: #fff3d6; background: radial-gradient(circle at 50% 45%, rgba(255, 210, 130, .45), transparent 32%), var(--stars), linear-gradient(180deg, var(--night), color-mix(in oklab, var(--primary), #0b1e17 35%)); }
.d-canopee .room-ph::after { content: ''; position: absolute; inset: auto 0 0; height: 40%; background: var(--pine); -webkit-mask: var(--trees) 30px 100% / 240px 80px repeat-x; mask: var(--trees) 30px 100% / 240px 80px repeat-x; }
.d-canopee .room-ph .ic { width: 20%; translate: 0 -14%; filter: drop-shadow(0 0 10px rgba(255, 200, 110, .8)); }
.d-canopee .room-price { background: var(--amber); color: #2b1c05; box-shadow: 0 4px 14px -4px rgba(0,0,0,.4); }
.d-canopee .room-cat { color: var(--primary); }
.d-canopee .room h3 { font-weight: 600; font-size: 1.35rem; color: var(--pine); }
.d-canopee .room-facts .ic, .d-canopee .room-book { color: var(--primary); }
.d-canopee .pj-chip, .d-canopee .pj-pager button { background: var(--canvas); border-color: var(--line); }
.d-canopee .pj-chip.on, .d-canopee .pj-pager button.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* La carte : ardoise de toile cousue, lanterne au sommet */
.d-canopee .menu-sec { background: var(--bg-soft); }
.d-canopee .menu-board { margin-top: 28px; background: var(--canvas); border-color: var(--line); outline: var(--stitch); outline-offset: -12px; box-shadow: var(--shadow); }
.d-canopee .menu-deco { display: grid; place-items: center; position: absolute; top: 0; left: 50%; translate: -50% -50%; width: 60px; height: 60px; border-radius: 50%; background: var(--night); color: var(--amber); box-shadow: 0 0 0 6px var(--bg-soft), 0 0 26px rgba(242, 180, 90, .45); }
.d-canopee .menu-deco .ic { width: 26px; height: 26px; fill: none; stroke: currentColor; }
.d-canopee .menu-group h3 { font-style: italic; color: var(--pine); border-bottom: var(--stitch); }
.d-canopee .dish-dots { border-bottom-color: color-mix(in oklab, var(--primary), transparent 70%); }
.d-canopee .dish-price { color: var(--primary); }

/* Services : coins de toile */
.d-canopee .card { background: repeating-linear-gradient(45deg, rgba(90, 70, 30, .025) 0 2px, transparent 2px 6px), var(--canvas); border-color: var(--line); }
.d-canopee .card::after { height: 4px; background: var(--amber); }
.d-canopee .card h3 { font-weight: 600; font-size: 1.25rem; color: var(--pine); }
.d-canopee .card:hover .ic-box { background: var(--primary); color: var(--cream); }
.d-canopee .news-date { color: var(--primary); }

/* Le domaine : nuit étoilée et sapins */
.d-canopee .about { background: var(--bg-soft); }
.d-canopee .about-art { position: relative; overflow: hidden; border: 0; color: #fff3d6; align-content: center; padding-bottom: 26%;
  background: var(--stars), linear-gradient(180deg, var(--night), color-mix(in oklab, var(--primary), #0b1e17 30%)); }
.d-canopee .about-art::after { content: ''; position: absolute; inset: auto 0 0; height: 38%; background: var(--pine); -webkit-mask: var(--trees) 0 100% / 330px 110px repeat-x; mask: var(--trees) 0 100% / 330px 110px repeat-x; }
.d-canopee .about-art .ic { width: 22%; filter: drop-shadow(0 0 16px rgba(255, 200, 110, .7)); }
.d-canopee .about-art-name { color: #fff3d6; font-style: italic; font-size: 1.8rem; }
.d-canopee .stats div { background: var(--canvas); border-color: var(--line); border-radius: 18px; }
.d-canopee .stats dt { color: var(--primary); font-weight: 600; }

/* Labels, avis, équipe */
.d-canopee .trust { background: var(--cream); }
.d-canopee .trust-item, .d-canopee .review { background: var(--canvas); border-color: var(--line); }
.d-canopee .trust-item h3 { color: var(--pine); font-weight: 600; }
.d-canopee .review blockquote { font-family: var(--font-head); font-size: 1.06rem; color: var(--ink); }
.d-canopee .stars { color: #d98f1f; }
.d-canopee .avatar { border-radius: 50%; border: var(--stitch); background: radial-gradient(circle at 50% 35%, var(--canvas), color-mix(in oklab, var(--primary), transparent 85%)); }
.d-canopee .avatar span { color: var(--pine); font-weight: 600; }
.d-canopee .member { width: 100%; max-width: 210px; margin: 0 auto; }
.d-canopee .review .avatar { max-width: 44px; }

/* Encadré : veillée sous les étoiles */
.d-canopee .cta { padding-bottom: 92px; background: var(--stars), radial-gradient(420px 240px at 85% 100%, rgba(242, 180, 90, .35), transparent 70%), linear-gradient(180deg, var(--night), color-mix(in oklab, var(--primary), #0b1e17 35%)); }
.d-canopee .cta::after { content: ''; position: absolute; inset: auto 0 0; height: 70px; background: var(--pine); -webkit-mask: var(--trees) 0 100% / 210px 70px repeat-x; mask: var(--trees) 0 100% / 210px 70px repeat-x; }
.d-canopee .cta h2 { color: #fff7e3; }
.d-canopee .cta-deco { opacity: .08; }

/* Réservation */
.d-canopee .quote-sec { background: var(--bg-soft); }
.d-canopee .quote-points .ic { border-radius: 6px 50%; background: color-mix(in oklab, var(--primary), transparent 86%); color: var(--pine); }
.d-canopee .quote-form { background: var(--canvas); border-color: var(--line); outline: var(--stitch); outline-offset: -10px; }
.d-canopee .f-field input, .d-canopee .f-field select, .d-canopee .f-field textarea { background: #fff; border-color: #ddd0b3; }
.d-canopee .quote-call a { color: var(--primary); }

/* Alentours */
.d-canopee .towns li { background: var(--canvas); border: var(--stitch); color: var(--pine); }
.d-canopee .towns .ic { color: var(--primary); }

/* Horaires & contact */
.d-canopee .visit { background: var(--cream); }
.d-canopee .panel { background: var(--canvas); border-color: var(--line); outline: var(--stitch); outline-offset: -10px; }
.d-canopee .panel-head > .ic { border-radius: 6px 50%; background: color-mix(in oklab, var(--primary), transparent 88%); color: var(--pine); }
.d-canopee .panel-head h2 { color: var(--pine); }
.d-canopee .status-line, .d-canopee .closures { background: var(--cream); }
.d-canopee .hours-table th, .d-canopee .hours-table td { border-bottom-color: var(--line); }
.d-canopee .map { border-color: var(--line); }

/* FAQ */
.d-canopee .faq details { background: var(--canvas); border-color: var(--line); }
.d-canopee .faq details[open] { border-color: color-mix(in oklab, var(--primary), transparent 55%); }
.d-canopee .faq .plus { border-radius: 6px 50%; background: color-mix(in oklab, var(--primary), transparent 88%); color: var(--pine); }

/* Pied de page : la lisière, puis la nuit */
.d-canopee .site-footer { position: relative; margin-top: 70px; background: radial-gradient(circle, rgba(255,247,214,.45) 0 1px, transparent 1.8px) 120px 70px / 211px 173px, var(--footer-bg); color: rgba(255, 247, 227, .78); }
.d-canopee .site-footer::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 72px; background: var(--footer-bg); -webkit-mask: var(--trees) 0 100% / 216px 72px repeat-x; mask: var(--trees) 0 100% / 216px 72px repeat-x; }
.d-canopee .site-footer h3 { color: var(--amber); }
.d-canopee .brand-light .brand-text strong { color: #fff7e3; }
.d-canopee .brand-light .brand-mark { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.d-canopee .socials a:hover { background: var(--amber); color: #2b1c05; }

@media (max-width: 920px) {
  .d-canopee .nav { background: var(--canvas); }
  .d-canopee .hl-item, .d-canopee .hl-item:nth-child(odd) { border-color: var(--line); }
  .d-canopee .hero-art { border-radius: 140px 140px var(--radius) var(--radius); }
  .d-canopee .art-cross { left: 62%; }
}
@media (max-width: 560px) {
  .d-canopee .hero-art { border-radius: 110px 110px var(--radius) var(--radius); box-shadow: 0 0 0 6px var(--canvas), 0 0 0 7.5px var(--line), var(--shadow); }
  .d-canopee .art-pill { width: 42px; height: 42px; }
  .d-canopee .cta { padding-bottom: 84px; }
}