/* Design « Longère » : chambres d'hôtes dans une longère normande, lin naturel, silex et brique, chaume et pommiers. Lora + Nunito Sans. */
.d-longere {
  --brick: #9a4c33;
  --brick-ink: #86412b;
  --flint: #34373c;
  --beam: #5c4632;
  --torchis: #efe5d1;
  --bg: #f8f3ea;
  --bg-soft: #f0e8da;
  --surface: #fffcf6;
  --ink: #2b2620;
  --ink-2: #554c41;
  --ink-3: #6f6456;
  --line: #e2d7c4;
  --head-w: 600;
  --h1-w: 600;
  --h1-track: -.012em;
  --head-track: -.005em;
  --btn-r: 10px;
  --footer-bg: color-mix(in oklab, var(--primary-900), #3a2e25 55%);
  --stitch: 1px dashed color-mix(in oklab, var(--brick), transparent 55%);
  /* Toile de lin : trame et chaîne très fines */
  --weave: repeating-linear-gradient(0deg, rgba(120, 95, 60, .045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120, 95, 60, .035) 0 1px, transparent 1px 4px);
  /* Mur de silex et chaînages de brique */
  --silex: repeating-linear-gradient(0deg, transparent 0 5px, rgba(211, 200, 180, .9) 5px 6px),
    repeating-linear-gradient(90deg, transparent 0 120px, var(--brick) 120px 168px),
    radial-gradient(ellipse 7px 4.6px at 7px 4px, #3b3f45 78%, transparent 100%) 0 0 / 30px 16px,
    radial-gradient(ellipse 6px 4.4px at 20px 5px, #5a5d61 78%, transparent 100%) 0 0 / 30px 16px,
    radial-gradient(ellipse 8px 4.6px at 13px 12px, #2b2e32 78%, transparent 100%) 0 0 / 30px 16px,
    radial-gradient(ellipse 5.5px 4px at 27px 12px, #4b4a47 78%, transparent 100%) 0 0 / 30px 16px,
    #d3c8b4;
  background-image: var(--weave);
}

/* En-tête : lin et frise de silex */
.d-longere .site-header { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.d-longere .site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: repeating-linear-gradient(90deg, var(--brick) 0 26px, #d8ccb6 26px 28px); }
.d-longere .brand-mark { border-radius: 50% 50% 8px 8px; background: var(--primary); box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--primary), #fff 25%); }
.d-longere .brand-text strong { font-size: 1.22rem; font-weight: 600; }
.d-longere .brand-text small { font-style: italic; font-family: var(--font-head); font-size: .85rem; }
.d-longere .brand-stars { color: var(--brick); }
.d-longere .nav a { border-radius: 8px; font-weight: 600; white-space: nowrap; padding: .55em .6em; font-size: .92rem; }
.d-longere .nav a:hover { background: transparent; color: var(--brick-ink); box-shadow: inset 0 -2px 0 var(--brick); border-radius: 0; }
.d-longere .btn { font-weight: 700; letter-spacing: .01em; }
.d-longere .btn-primary { background: var(--primary-700); box-shadow: 0 8px 18px -10px var(--primary-700); }
.d-longere .btn-primary:hover { background: var(--primary-900); }
.d-longere .btn-ghost { background: transparent; border: 1.5px dashed color-mix(in oklab, var(--beam), transparent 40%); }

/* Bannière : la longère au chaume fleuri, le pommier, le pré */
.d-longere .hero { padding-top: 84px; background: radial-gradient(900px 420px at 80% 110%, color-mix(in oklab, var(--primary), transparent 86%), transparent 70%), var(--weave), var(--bg); }
.d-longere .hero h1 { font-size: clamp(2.4rem, 4.8vw, 4rem); line-height: 1.08; }
.d-longere .pill-badge { background: var(--surface); border: var(--stitch); color: var(--brick-ink); border-radius: 8px; font-family: var(--font-head); font-style: italic; font-weight: 500; font-size: .95rem; }
.d-longere .pill-badge .dot { background: var(--brick); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brick), transparent 82%); }
.d-longere .hero-art { isolation: isolate; border-radius: 999px 999px 18px 18px; box-shadow: inset 0 0 0 8px var(--surface), inset 0 0 0 9px var(--line), var(--shadow-lg);
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 6px, transparent 6px 14px) 0 100% / 100% 21% no-repeat,
    linear-gradient(to top, color-mix(in oklab, var(--primary), #3a3020 15%) 0 21%, transparent 21%),
    radial-gradient(70% 22% at 22% 80%, color-mix(in oklab, var(--primary), #fff 38%) 98%, transparent 100%),
    radial-gradient(80% 24% at 88% 82%, color-mix(in oklab, var(--primary), #fff 22%) 98%, transparent 100%),
    linear-gradient(#dde6e4, #f4ecdc 62%); }
.d-longere .hero-art::before { inset: auto 7% 19% 7%; height: 38%; z-index: 1;
  clip-path: polygon(0 50%, 11% 8%, 70% 8%, 70% 0, 77% 0, 77% 8%, 89% 8%, 100% 50%, 100% 100%, 0 100%);
  background: linear-gradient(var(--brick) 0 0) 0 0 / 100% 9% no-repeat,
    linear-gradient(color-mix(in oklab, var(--primary), #fff 10%) 0 0) 0 9% / 100% 5% no-repeat,
    linear-gradient(90deg, #3e4a52 44%, var(--torchis) 44% 56%, #3e4a52 56%) 14% 78% / 8% 22% no-repeat,
    linear-gradient(90deg, #3e4a52 44%, var(--torchis) 44% 56%, #3e4a52 56%) 33% 78% / 8% 22% no-repeat,
    linear-gradient(90deg, #3e4a52 44%, var(--torchis) 44% 56%, #3e4a52 56%) 68% 78% / 8% 22% no-repeat,
    linear-gradient(90deg, #3e4a52 44%, var(--torchis) 44% 56%, #3e4a52 56%) 87% 78% / 8% 22% no-repeat,
    linear-gradient(var(--beam) 0 0) 50% 100% / 7% 38% no-repeat,
    repeating-linear-gradient(0deg, var(--brick) 0 3px, #cbb89f 3px 4px) 0 100% / 100% 12% no-repeat,
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--beam), transparent 25%) 0 3px, transparent 3px 6.2%) 0 100% / 100% 50% no-repeat,
    linear-gradient(var(--beam) 0 0) 0 50% / 100% 3px no-repeat,
    repeating-linear-gradient(100deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 7px) 0 0 / 100% 50% no-repeat,
    linear-gradient(#87725a, #5f4d3b) 0 0 / 100% 50% no-repeat,
    var(--torchis); }
.d-longere .hero-art::after { content: ''; position: absolute; z-index: 2; right: 3%; bottom: 31%; width: 30%; aspect-ratio: 1.05; border-radius: 52% 48% 46% 54%;
  background: radial-gradient(circle, #c8453a 0 4px, transparent 5px) 6px 8px / 41px 37px,
    radial-gradient(circle, #d8693e 0 3.5px, transparent 4.5px) 26px 26px / 41px 37px,
    radial-gradient(circle at 35% 28%, color-mix(in oklab, var(--primary), #fff 22%), var(--primary) 55%, var(--primary-700));
  box-shadow: -18px 14px 0 -10px color-mix(in oklab, var(--primary), #000 8%); }
.d-longere .art-ring { border: 0; translate: none; animation: none; }
.d-longere .art-ring.r1 { left: auto; right: 12%; top: 30%; width: 15%; background: radial-gradient(circle, #fff8e6 40%, rgba(255, 248, 230, 0) 70%); }
.d-longere .art-ring.r2 { left: auto; top: auto; right: 16%; bottom: 18%; width: 3.6%; height: 17%; aspect-ratio: auto; border-radius: 3px; background: var(--beam); z-index: 2; }
.d-longere .art-cross { left: 50%; top: 13%; width: 22%; border-radius: 50%; background: var(--surface); backdrop-filter: none; border: 1px solid var(--line); box-shadow: inset 0 0 0 6px var(--surface), inset 0 0 0 7px color-mix(in oklab, var(--brick), transparent 45%), var(--shadow); }
.d-longere .art-cross .ic { stroke: var(--primary-700); filter: none; width: 46%; height: 46%; }
.d-longere .art-pill { animation: none; z-index: 3; box-shadow: none; border-radius: 50% 50% 40% 40%; height: auto; aspect-ratio: 2.4; background: radial-gradient(circle at 40% 30%, color-mix(in oklab, var(--primary), #fff 12%), var(--primary-700)); }
.d-longere .art-pill .ic { display: none; }
.d-longere .art-pill.p1 { left: 3%; top: auto; bottom: 17%; width: 16%; }
.d-longere .art-pill.p2 { right: auto; left: 40%; top: auto; bottom: 16%; width: 11%; }
.d-longere .art-pill.p3 { right: 24%; bottom: 15%; width: 13%; }
.d-longere .float-card { border-radius: 12px; background: rgba(255, 252, 246, .97); outline: var(--stitch); outline-offset: -6px; }
.d-longere .float-card > .ic { color: var(--brick); }
.d-longere .fc-addr { right: auto; left: -28px; top: 34%; }

/* Points forts : un linteau de brique */
.d-longere .hl-grid { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--brick); border-radius: 4px 4px 14px 14px; }
.d-longere .hl-item strong { font-family: var(--font-head); font-size: 1.06rem; font-weight: 600; }
.d-longere .ic-box { border-radius: 50% 50% 8px 8px; background: var(--primary-50); color: var(--primary-700); box-shadow: inset 0 0 0 1px var(--primary-100); }

/* Titres : italique de Lora et petit filet de brique */
.d-longere .eyebrow { font-family: var(--font-head); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: .01em; font-size: 1.08rem; color: var(--brick-ink); display: inline-flex; align-items: center; gap: 12px; }
.d-longere .eyebrow::before { content: ''; width: 26px; height: 6px; background: linear-gradient(var(--brick) 0 0) 0 0 / 11px 100% no-repeat, linear-gradient(var(--brick) 0 0) 15px 0 / 11px 100% no-repeat; }
.d-longere .sec-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.d-longere .lead, .d-longere .prose { color: var(--ink-2); }

/* Services : coussins de lin surpiqués */
.d-longere .card { background: var(--surface); border-color: var(--line); outline: var(--stitch); outline-offset: -9px; }
.d-longere .card::after { background: var(--brick); }
.d-longere .card h3, .d-longere .room h3, .d-longere .trust-item h3, .d-longere .news-card h3 { font-weight: 600; font-size: 1.22rem; }

/* La maison : fenêtre cintrée sur colombages discrets */
.d-longere .about { background: var(--weave), var(--bg-soft); }
.d-longere .about-art { position: relative; overflow: hidden; border-radius: 999px 999px 16px 16px; color: var(--primary-700); border: 8px solid var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow); align-content: start; padding-top: 16%;
  background: radial-gradient(circle at 34px 22px, #c8453a 0 3.5px, transparent 4.5px) 0 62% / 96px 60px repeat-x,
    radial-gradient(circle at 60px 38px, #d8693e 0 3px, transparent 4px) 0 62% / 96px 60px repeat-x,
    radial-gradient(circle 34px at 48px 30px, var(--primary) 97%, transparent 100%) 0 62% / 96px 60px repeat-x,
    linear-gradient(90deg, transparent 45px, var(--beam) 45px 51px, transparent 51px) 0 76% / 96px 50px repeat-x,
    radial-gradient(circle 26px at 30px 26px, color-mix(in oklab, var(--primary), #fff 30%) 97%, transparent 100%) 50px 52% / 96px 52px repeat-x,
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 8px, transparent 8px 18px) 0 100% / 100% 30% no-repeat,
    linear-gradient(to top, color-mix(in oklab, var(--primary), #3a3020 15%) 0 30%, color-mix(in oklab, var(--primary), #fff 45%) 30% 46%, transparent 46%),
    linear-gradient(#dbe5e3, #f6eddc 60%); }
.d-longere .about-art .ic { width: 22%; padding: 4.5%; aspect-ratio: 1; height: auto; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px color-mix(in oklab, var(--brick), transparent 45%), var(--shadow); }
.d-longere .about-art-name { font-style: italic; font-weight: 500; color: var(--beam); font-size: 1.35rem; background: var(--surface); padding: .35em 1.1em; border-radius: 8px; outline: var(--stitch); outline-offset: -5px; box-shadow: var(--shadow-sm); }
.d-longere .stats div { background: var(--surface); border-radius: 4px 4px 12px 12px; border-top: 3px solid var(--brick); }
.d-longere .stats dt { font-family: var(--font-head); font-weight: 600; color: var(--primary-700); }

/* Encadré : bandeau vert sur soubassement de silex */
.d-longere .cta { background: linear-gradient(120deg, var(--primary-900), var(--primary-700)); border-radius: 18px; padding-bottom: 64px; }
.d-longere .cta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--silex); }
.d-longere .cta h2 { font-weight: 600; }

/* Chambres : fiches de lin, vignette à colombages */
.d-longere .room { background: var(--surface); border-color: var(--line); border-radius: 16px; }
.d-longere .room-ph { background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--beam), transparent 80%) 0 4px, transparent 4px 20%),
    linear-gradient(to top, color-mix(in oklab, var(--brick), transparent 72%) 0 10%, transparent 10%),
    radial-gradient(circle at 50% 45%, #fffaf0, transparent 70%), var(--torchis); }
.d-longere .room-ph::before { content: ''; position: absolute; left: 50%; bottom: 10%; translate: -50% 0; width: 34%; height: 74%; border-radius: 999px 999px 4px 4px;
  border: 7px solid var(--surface); box-shadow: 0 0 0 1px var(--line), 0 14px 26px -16px rgba(60, 40, 20, .5);
  background: linear-gradient(90deg, transparent calc(50% - 2px), var(--surface) 0 calc(50% + 2px), transparent 0),
    linear-gradient(transparent 46%, var(--surface) 0 calc(46% + 4px), transparent 0),
    radial-gradient(circle closest-side, #c8453a 90%, transparent) 30% 52% / 7px 7px no-repeat,
    radial-gradient(circle closest-side, #c8453a 90%, transparent) 46% 62% / 7px 7px no-repeat,
    radial-gradient(circle closest-side, #d8693e 90%, transparent) 20% 66% / 6px 6px no-repeat,
    radial-gradient(circle closest-side, var(--primary) 97%, transparent) 26% 58% / 62% 40% no-repeat,
    linear-gradient(var(--beam) 0 0) 34% 84% / 6% 18% no-repeat,
    linear-gradient(to top, var(--primary-700) 0 22%, color-mix(in oklab, var(--primary), #fff 35%) 22% 36%, transparent 36%),
    linear-gradient(#dbe5e3, #f5ecdb); }
.d-longere .room-ph .ic { display: none; }
.d-longere .room-price { background: var(--brick); color: #fff; border-radius: 6px; font-family: var(--font-head); font-weight: 600; }
.d-longere .room-cat, .d-longere .news-date { color: var(--brick-ink); }
.d-longere .room-facts .ic { color: var(--primary-700); }
.d-longere .room-book { color: var(--primary-700); border-bottom: var(--stitch); }
.d-longere .pj-chip { border-radius: 8px; }
.d-longere .pj-chip.on, .d-longere .pj-pager button.on { background: var(--primary-700); border-color: var(--primary-700); }

/* La carte : nappe de lin à liseré vichy */
.d-longere .menu-sec { background: var(--weave), var(--bg-soft); }
.d-longere .menu-board { border-radius: 14px; outline: var(--stitch); outline-offset: -12px; padding-top: clamp(48px, 6vw, 72px);
  background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--primary), transparent 55%) 0 9px, transparent 9px 18px) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(0deg, color-mix(in oklab, var(--primary), transparent 55%) 0 6px, transparent 6px 12px) 0 0 / 100% 12px no-repeat,
    var(--surface); }
.d-longere .menu-deco { display: grid; place-items: center; position: absolute; left: 50%; top: 0; translate: -50% -40%; width: 54px; height: 54px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--brick); }
.d-longere .menu-deco .ic { width: 24px; height: 24px; }
.d-longere .menu-group h3 { font-style: italic; font-weight: 600; color: var(--primary-700); border-bottom: var(--stitch); }
.d-longere .dish-line strong { font-weight: 700; }
.d-longere .dish-dots { border-bottom-color: #cfc1aa; }
.d-longere .dish-price { font-family: var(--font-head); color: var(--brick-ink); font-size: 1.05rem; }

/* Labels, avis, équipe */
.d-longere .trust { background: var(--weave), var(--bg-soft); }
.d-longere .trust-item, .d-longere .review { background: var(--surface); border-color: var(--line); }
.d-longere .review { position: relative; padding-top: 40px; }
.d-longere .review::before { content: '“'; position: absolute; top: 4px; left: 22px; font-family: var(--font-head); font-size: 4rem; line-height: 1; color: color-mix(in oklab, var(--brick), transparent 40%); }
.d-longere .review blockquote { font-family: var(--font-head); font-style: italic; color: var(--ink); font-size: 1.04rem; }
.d-longere .stars { color: #b7791f; }
.d-longere .avatar { border-radius: 999px 999px 14px 14px; background: linear-gradient(160deg, var(--torchis), var(--primary-100)); border: 6px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.d-longere .review .avatar { border-radius: 50%; border-width: 2px; }
.d-longere .avatar span { font-family: var(--font-head); color: var(--primary-700); font-style: italic; }

/* Réservation, contact, alentours, FAQ */
.d-longere .panel { background: var(--surface); border-color: var(--line); border-top: 4px solid var(--brick); border-radius: 4px 4px 16px 16px; }
.d-longere .quote-form { outline: var(--stitch); outline-offset: -10px; }
.d-longere .panel-head > .ic, .d-longere .quote-points .ic { border-radius: 50% 50% 8px 8px; background: var(--primary-50); color: var(--primary-700); }
.d-longere .f-field input, .d-longere .f-field select, .d-longere .f-field textarea { background: #fffefb; border-color: #d9ccb6; border-radius: 8px; }
.d-longere .status-line, .d-longere .closures { background: var(--bg-soft); }
.d-longere .hours-table th, .d-longere .hours-table td { border-bottom-color: #d9ccb6; }
.d-longere .towns li { background: var(--surface); border: var(--stitch); border-radius: 8px; color: var(--ink); }
.d-longere .towns .ic { color: var(--brick); }
.d-longere .faq details { background: var(--surface); border-color: var(--line); border-radius: 10px; }
.d-longere .faq summary { font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; }
.d-longere .faq .plus { background: color-mix(in oklab, var(--brick), #fff 88%); color: var(--brick-ink); border-radius: 50% 50% 6px 6px; }
.d-longere .faq details[open] .plus { background: var(--brick); }
.d-longere .news-img { background: var(--torchis); border-radius: 999px 999px 10px 10px; }

/* Pied de page : soubassement de silex et brique */
.d-longere .site-footer { position: relative; padding-top: 88px; }
.d-longere .site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: var(--silex); }
.d-longere .site-footer h3 { font-family: var(--font-head); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 1.15rem; color: var(--torchis); }
.d-longere .brand-light .brand-mark { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }

@media (max-width: 920px) {
  .d-longere .hero { padding-top: 48px; }
  .d-longere .fc-addr { bottom: auto; top: 12px; }
}
@media (max-width: 560px) {
  .d-longere .hero-art { isolation: isolate; border-radius: 999px 999px 14px 14px; }
  .d-longere .menu-board { outline-offset: -8px; }
  .d-longere .review::before { font-size: 3.4rem; }
}