/* Design « Mas provençal » : un mas au soleil (enduit ocre, tomettes hexagonales, volets lavande, ombre des platanes). Alegreya + Alegreya Sans. */
.d-mas {
  --lav: #6c64a1;
  --lav-d: #4b4479;
  --olive: #66703c;
  --olive-d: #3d4523;
  --stone: #f4e9d6;
  --wall: color-mix(in oklab, var(--primary), #f4d39e 58%);
  --ochre: color-mix(in oklab, var(--primary), #3a1e0c 12%);
  --tomettes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.785' height='36'%3E%3Crect width='100%' height='100%' fill='%23f1e3cb'/%3E%3Cg stroke='%23f1e3cb' stroke-width='1.6'%3E%3Cpath d='M10.39 0.00L20.78 6.00L20.78 18.00L10.39 24.00L0.00 18.00L0.00 6.00Z' fill='%23b65733'/%3E%3Cpath d='M0.00 18.00L10.39 24.00L10.39 36.00L0.00 42.00L-10.39 36.00L-10.39 24.00Z' fill='%23c46a3e'/%3E%3Cpath d='M20.78 18.00L31.18 24.00L31.18 36.00L20.78 42.00L10.39 36.00L10.39 24.00Z' fill='%23c46a3e'/%3E%3Cpath d='M0.00 -18.00L10.39 -12.00L10.39 0.00L0.00 6.00L-10.39 0.00L-10.39 -12.00Z' fill='%23c46a3e'/%3E%3Cpath d='M20.78 -18.00L31.18 -12.00L31.18 0.00L20.78 6.00L10.39 0.00L10.39 -12.00Z' fill='%23c46a3e'/%3E%3Cpath d='M10.39 36.00L20.78 42.00L20.78 54.00L10.39 60.00L0.00 54.00L0.00 42.00Z' fill='%23b65733'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 20.785px 36px;
  /* Enduit à la chaux : nuances irrégulières */
  --plaster: radial-gradient(60% 40% at 20% 30%, rgba(255, 245, 225, .35), transparent 70%), radial-gradient(50% 50% at 80% 70%, rgba(120, 60, 20, .1), transparent 70%),
    radial-gradient(30% 25% at 60% 15%, rgba(255, 250, 235, .25), transparent 70%), var(--wall);
  /* Ombre des platanes : taches de feuillage */
  --dapple: radial-gradient(16% 9% at 10% 6%, rgba(70, 45, 15, .13) 50%, transparent 72%), radial-gradient(11% 7% at 30% 3%, rgba(70, 45, 15, .11) 50%, transparent 72%),
    radial-gradient(14% 8% at 3% 22%, rgba(70, 45, 15, .11) 50%, transparent 72%), radial-gradient(9% 6% at 22% 16%, rgba(70, 45, 15, .09) 50%, transparent 72%),
    radial-gradient(8% 5% at 44% 8%, rgba(70, 45, 15, .07) 50%, transparent 72%);
  /* Volet à lames */
  --slats: repeating-linear-gradient(transparent 0 9px, rgba(30, 20, 60, .22) 9px 11px, rgba(255, 255, 255, .12) 11px 12px), var(--lav);
  --bg: #fbf6ec;
  --bg-soft: #f4ead8;
  --surface: #fffcf6;
  --ink: #2f241b;
  --ink-2: #5a4b3d;
  --ink-3: #7a6a5a;
  --line: #eadcc5;
  --head-w: 700;
  --h1-w: 800;
  --head-track: -.01em;
  --h1-track: -.02em;
  --btn-r: 999px;
  --footer-bg: #2e2944;
  font-size: 17.5px;
}

/* Boutons */
.d-mas .btn { font-weight: 700; letter-spacing: .01em; }
.d-mas .btn-primary { background: var(--ochre); }
.d-mas .btn-primary:hover { background: color-mix(in oklab, var(--ochre), #000 15%); }
.d-mas .btn-ghost { border-color: var(--lav); color: var(--lav-d); }

/* Annonce + en-tête : frise de tomettes */
.d-mas .announce { background: var(--olive-d); }
.d-mas .site-header { background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 0; }
.d-mas .site-header::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; background: var(--tomettes); opacity: .9; }
.d-mas .brand-mark { border-radius: 50% 50% 6px 6px / 40% 40% 6px 6px; background: var(--slats); box-shadow: inset 0 0 0 3px var(--lav-d); }
.d-mas .brand-text strong { font-size: 1.35rem; font-weight: 800; }
.d-mas .brand-text small { font-style: italic; }
.d-mas .brand-stars { color: #d39a2a; }
.d-mas .nav a { font-weight: 600; font-size: 1rem; }
.d-mas .nav a:hover { background: color-mix(in oklab, var(--lav), transparent 88%); color: var(--lav-d); }

/* Bannière : façade ocre, fenêtre cintrée, volets lavande et vue sur les champs */
.d-mas .hero { background: radial-gradient(900px 500px at 85% 0, color-mix(in oklab, var(--wall), transparent 50%), transparent 70%), var(--bg); }
.d-mas .hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1.02; }
.d-mas .hero h1::after { content: ''; display: block; width: 90px; height: 10px; margin-top: 18px; background: var(--tomettes); border-radius: 2px; }
.d-mas .hero-sub { font-size: 1.18rem; }
.d-mas .pill-badge, .d-mas .eyebrow { font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--olive); }
.d-mas .pill-badge { background: none; border: 0; box-shadow: none; padding: 0; }
.d-mas .pill-badge .dot { width: 14px; height: 14px; border-radius: 50% 0; background: var(--olive); box-shadow: none; rotate: -45deg; }
.d-mas .hero-art { border-radius: 50% 50% 18px 18px / 26% 26% 18px 18px; box-shadow: var(--shadow-lg); background: var(--plaster); }
.d-mas .hero-art::before { z-index: 3; background: var(--dapple); pointer-events: none; }
.d-mas .hero-art::after { content: ''; position: absolute; left: 25%; right: 25%; top: 72%; height: 4.5%; border-radius: 3px; background: linear-gradient(#fbf3e3, #e3d2b4); box-shadow: 0 8px 12px -6px rgba(60, 30, 10, .45); }
.d-mas .art-cross { top: 46%; width: 40%; aspect-ratio: 3 / 4.2; border-radius: 999px 999px 0 0; border: 9px solid #f6ecd9; border-bottom: 0; backdrop-filter: none; box-shadow: inset 0 6px 12px rgba(40, 30, 10, .25);
  background: radial-gradient(ellipse 5% 20% at 24% 54%, #2f4a2c 96%, transparent), radial-gradient(ellipse 4% 15% at 76% 58%, #3a5532 96%, transparent),
    repeating-conic-gradient(from 90deg at 50% 0, #7c6db6 0 5deg, #a99bd4 5deg 9deg) 0 100% / 100% 34% no-repeat,
    radial-gradient(120% 40% at 30% 72%, #7f8a4a 50%, transparent 51%), radial-gradient(circle at 70% 26%, #fff3c9 0 9%, transparent 10%),
    linear-gradient(#8fbcd9, #d9e4e0 55%, #f1dfb5 66%); }
.d-mas .art-cross .ic { display: none; }
.d-mas .art-ring { translate: 0 -50%; aspect-ratio: 15 / 56; border: 0; top: 46%; width: 15%; background: var(--slats); box-shadow: inset 0 0 0 5px var(--lav-d), 0 10px 18px -8px rgba(40, 30, 60, .5); animation: none; }
.d-mas .art-ring.r1 { left: 13%; border-radius: 60% 0 0 0 / 22% 0 0 0; }
.d-mas .art-ring.r2 { left: 72%; border-radius: 0 60% 0 0 / 0 22% 0 0; }
.d-mas .art-pill { display: none; animation: none; }
.d-mas .art-pill.p1 { display: block; left: 31%; top: 63%; width: 13%; height: 10%; border-radius: 0; box-shadow: none; z-index: 1;
  background: linear-gradient(#b65733, #9c4628) 0 100% / 100% 50% no-repeat, repeating-linear-gradient(90deg, #7d6fb7 0 3px, transparent 3px 7px) 0 0 / 100% 50% no-repeat;
  clip-path: polygon(4% 8%, 96% 8%, 96% 50%, 84% 100%, 16% 100%, 4% 50%); }
.d-mas .art-pill.p1 .ic { display: none; }
.d-mas .float-card { border-radius: 14px; border-bottom: 4px solid var(--lav); }

/* Points forts : posés sur une frise de tomettes */
.d-mas .hl-grid { position: relative; border: 0; border-radius: 16px; box-shadow: var(--shadow); padding-top: 10px; }
.d-mas .hl-grid::before { content: ''; position: absolute; inset: 0 0 auto; height: 10px; background: var(--tomettes); }
.d-mas .hl-item strong { font-family: var(--font-head); font-size: 1.12rem; }
.d-mas .ic-box { border-radius: 50% 50% 8px 8px / 45% 45% 8px 8px; background: color-mix(in oklab, var(--wall), #fff 45%); color: var(--ochre); }

/* Titres : sur-titre en italique entre deux filets */
.d-mas .sec-head h2 { font-size: clamp(2.1rem, 3.8vw, 3rem); font-weight: 800; }
.d-mas .sec-head.center .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.d-mas .sec-head.center .eyebrow::before, .d-mas .sec-head.center .eyebrow::after { content: ''; width: 34px; height: 2px; background: var(--wall); }

/* Chambres : baies cintrées sur les champs de lavande */
.d-mas .pj-chip { font-weight: 700; }
.d-mas .pj-chip.on, .d-mas .pj-pager button.on { background: var(--lav); border-color: var(--lav); }
.d-mas .room { border: 0; padding: 14px 14px 0; background: var(--surface); box-shadow: var(--shadow-sm); border-radius: 18px; }
.d-mas .room-img { border-radius: 50% 50% 10px 10px / 30% 30% 10px 10px; }
.d-mas .room-ph, .d-mas .about-art { color: rgba(255, 252, 240, .9);
  background: repeating-conic-gradient(from 90deg at 50% 0, #7c6db6 0 5deg, #a99bd4 5deg 9deg) 0 100% / 100% 36% no-repeat,
    radial-gradient(ellipse 3% 16% at 18% 58%, #2f4a2c 96%, transparent), radial-gradient(120% 34% at 70% 70%, #7f8a4a 50%, transparent 51%),
    radial-gradient(circle at 24% 26%, #fff3c9 0 7%, transparent 8%), linear-gradient(#8fbcd9, #e3e4d6 52%, #f1dfb5 64%); }
.d-mas .room-ph .ic { width: 16%; translate: 25% -60%; }
.d-mas .room-price { top: 26px; right: 26px; background: var(--lav-d); color: #fff; font-family: var(--font-head); font-size: 1rem; }
.d-mas .room-body { padding: 18px 8px 22px; }
.d-mas .room-cat, .d-mas .news-date { font-family: var(--font-head); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--olive); }
.d-mas .room h3 { font-size: 1.45rem; font-weight: 800; }
.d-mas .room-facts .ic { color: var(--ochre); }
.d-mas .room-book { color: var(--ochre); }

/* La carte : une nappe crème cernée de tomettes */
.d-mas .menu-sec { background: var(--bg-soft); }
.d-mas .menu-board { border: 16px solid transparent; border-radius: 22px; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--tomettes) border-box; box-shadow: var(--shadow); }
.d-mas .menu-group h3 { font-size: 1.6rem; font-style: italic; color: var(--ochre); border-bottom: 0; padding-bottom: 6px; }
.d-mas .menu-group h3::after { content: ''; display: block; width: 60px; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--lav); }
.d-mas .dish-line strong { font-family: var(--font-head); font-size: 1.12rem; font-weight: 700; }
.d-mas .dish-dots { border-bottom-color: #e2cfae; }
.d-mas .dish-price { font-family: var(--font-head); font-size: 1.12rem; color: var(--ochre); }
.d-mas .menu-note { font-family: var(--font-head); font-size: 1rem; }

/* Services : arcades à l'enduit */
.d-mas .card { text-align: center; border: 0; border-radius: 50% 50% 16px 16px / 70px 70px 16px 16px; padding-top: 42px; background: var(--plaster); background-color: var(--wall); }
.d-mas .card::after { height: 8px; background: var(--tomettes); }
.d-mas .card .ic-box { margin: 0 auto; background: var(--surface); }
.d-mas .card:hover .ic-box { background: var(--lav); color: #fff; }
.d-mas .card h3 { font-size: 1.3rem; }
.d-mas .card p { color: #4a3b2e; }
.d-mas .news-card { text-align: left; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }

/* L'établissement : grande baie cintrée */
.d-mas .about { background: var(--bg-soft); }
.d-mas .about-art { border: 10px solid var(--wall); border-bottom: 0; border-radius: 999px 999px 18px 18px; box-shadow: var(--shadow-lg); }
.d-mas .about-art .ic { width: 22%; padding: 5%; border-radius: 50%; background: rgba(255, 252, 245, .9); stroke: var(--ochre); opacity: 1; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .4); }
.d-mas .about-art-name { font-style: italic; color: var(--ink); background: rgba(255, 252, 245, .92); padding: .25em 1em; border-radius: 999px; }
.d-mas .stats div { border: 0; border-radius: 14px; background: var(--surface); border-bottom: 4px solid var(--wall); }
.d-mas .stats dt { color: var(--ochre); font-style: italic; }

/* Labels : volets à lames sur la tranche */
.d-mas .trust { background: var(--bg); }
.d-mas .trust-item { border: 0; border-radius: 14px; padding-left: 36px; box-shadow: var(--shadow-sm); background: repeating-linear-gradient(transparent 0 6px, rgba(30, 20, 60, .25) 6px 8px) 0 0 / 12px 100% no-repeat, linear-gradient(var(--lav), var(--lav)) 0 0 / 12px 100% no-repeat, var(--surface); }
.d-mas .trust-item h3, .d-mas .member strong, .d-mas .review figcaption strong { font-family: var(--font-head); font-size: 1.2rem; }

/* Avis */
.d-mas .review { border: 0; border-radius: 18px; box-shadow: var(--shadow-sm); border-top: 6px solid var(--wall); }
.d-mas .review blockquote { font-family: var(--font-head); font-style: italic; font-size: 1.15rem; color: var(--ink); }
.d-mas .stars { color: #d39a2a; }
.d-mas .review .avatar { background: var(--wall); }
.d-mas .review .avatar span { color: var(--ink); }

/* Encadré : le soir sur les champs de lavande */
.d-mas .cta { border-radius: 24px; background: linear-gradient(100deg, rgba(40, 32, 70, .92) 35%, rgba(40, 32, 70, .4)),
    repeating-conic-gradient(from 90deg at 70% 0, #7c6db6 0 5deg, #9a8bcc 5deg 9deg) 0 100% / 100% 50% no-repeat,
    radial-gradient(circle at 86% 22%, #ffd9a0 0 30px, transparent 32px), linear-gradient(#e9a873, #c98ab0 50%); }
.d-mas .cta h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; }
.d-mas .cta p { opacity: .95; }
.d-mas .cta-deco { display: none; }
.d-mas .cta .btn-white { color: var(--lav-d); }

/* Équipe : portraits en arcade */
.d-mas .member .avatar { border: 0; border-radius: 50% 50% 14px 14px / 36% 36% 14px 14px; background: var(--plaster); box-shadow: var(--shadow-sm); }
.d-mas .avatar span { font-style: italic; color: var(--ink); }

/* Réservation, horaires, contact */
.d-mas .quote-sec, .d-mas .visit { background: var(--bg-soft); }
.d-mas .panel { position: relative; overflow: hidden; border: 0; border-radius: 18px; padding-top: 44px; box-shadow: var(--shadow); }
.d-mas .panel::before { content: ''; position: absolute; inset: 0 0 auto; height: 12px; background: var(--tomettes); }
.d-mas .panel-head > .ic, .d-mas .quote-points .ic { border-radius: 50% 50% 8px 8px / 45% 45% 8px 8px; background: color-mix(in oklab, var(--wall), #fff 45%); color: var(--ochre); }
.d-mas .panel-head h2 { font-size: 1.7rem; }
.d-mas .f-field label { font-weight: 700; }
.d-mas .f-field input, .d-mas .f-field select, .d-mas .f-field textarea { background: #fffaf0; border-color: #e3d2b6; }
.d-mas .f-field input:focus, .d-mas .f-field select:focus, .d-mas .f-field textarea:focus { border-color: var(--lav); box-shadow: 0 0 0 3px color-mix(in oklab, var(--lav), transparent 78%); }
.d-mas .hours-table tr.today th, .d-mas .hours-table tr.today td { color: var(--lav-d); }
.d-mas .hours-table tr.today th::after { background: color-mix(in oklab, var(--lav), #fff 82%); color: var(--lav-d); }
.d-mas .map { border-radius: 18px; border: 0; box-shadow: var(--shadow); }

/* Alentours : rameaux d'olivier */
.d-mas .towns li { background: #eef0e1; border-color: #d9ddbf; color: var(--olive-d); font-family: var(--font-head); font-size: 1.02rem; }
.d-mas .towns .ic { color: var(--olive); }
.d-mas .towns small { color: #5b6340; }

/* FAQ */
.d-mas .faq details { border-radius: 14px; }
.d-mas .faq details[open] { border-color: var(--lav); }
.d-mas .faq summary { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; }
.d-mas .faq .plus { background: color-mix(in oklab, var(--lav), #fff 85%); color: var(--lav-d); }
.d-mas .faq details[open] .plus { background: var(--lav); }

/* Pied de page : nuit provençale sous une frise de tomettes */
.d-mas .site-footer { position: relative; }
.d-mas .site-footer::before { content: ''; position: absolute; inset: 0 0 auto; height: 14px; background: var(--tomettes); }
.d-mas .site-footer h3 { font-family: var(--font-head); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.2rem; color: #e9d6a8; }
.d-mas .brand-light .brand-mark { background: var(--slats); }
.d-mas .socials a:hover { background: var(--lav); }

@media (max-width: 920px) {
  .d-mas .hero-art { border-radius: 50% 50% 18px 18px / 30% 30% 18px 18px; }
  .d-mas .art-cross { width: 32%; }
  .d-mas .art-ring { width: 12%; aspect-ratio: 12 / 44.8; }
  .d-mas .art-ring.r1 { left: 21%; }
  .d-mas .art-ring.r2 { left: 67%; }
  .d-mas .hero-art::after { top: 73%; left: 30%; right: 30%; }
  .d-mas .art-pill.p1 { top: 64%; left: 36%; width: 10%; height: 9%; }
}
@media (max-width: 560px) {
  .d-mas { font-size: 17px; }
  .d-mas .team { grid-template-columns: 1fr 1fr; gap: 18px; }
  .d-mas .art-cross { border-width: 6px; }
  .d-mas .menu-board { border-width: 12px; }
  .d-mas .card { border-radius: 50% 50% 16px 16px / 56px 56px 16px 16px; }
}