/* Design « Les Planches » : station balnéaire Belle Époque, planches de bois, cabines de plage rayées et lettres peintes. Playfair Display + Inter. */
.d-planches {
  --rouge: #b3412c;
  --creme: #fbf6ec;
  --sable: #f1e4c8;
  --bois: #b08356;
  --bois-f: #6e4a2b;
  --marine: color-mix(in oklab, var(--primary), #000 42%);
  --bg: var(--creme);
  --bg-soft: #f5ecda;
  --surface: #fffdf8;
  --ink: #1d2a33;
  --ink-2: #47525a;
  --ink-3: #6c7378;
  --line: #e3d6bd;
  --radius: 3px;
  --btn-r: 2px;
  --head-w: 700;
  --h1-w: 700;
  --head-track: -.005em;
  --h1-track: -.01em;
  --footer-bg: var(--marine);
  /* Rayures de cabine et lambrequin festonné */
  --rayures: repeating-linear-gradient(90deg, var(--rouge) 0 20px, var(--creme) 20px 40px);
  --feston: linear-gradient(#000 0 0) top / 100% 5px no-repeat, radial-gradient(circle at 10px 5px, #000 9.5px, transparent 10px) 0 0 / 20px 100% repeat-x;
  --planches: repeating-linear-gradient(180deg, #c09264 0 15px, #a77a4e 15px 16px, #8a6038 16px 18px);
}

/* Annonce, bandeau et en-tête à lambrequin */
.d-planches .announce { background: var(--rouge); letter-spacing: .02em; }
.d-planches .topbar-info { background: var(--marine); }
.d-planches .site-header { background: var(--creme); border-bottom: 0; }
.d-planches .site-header::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 15px; background: var(--rayures); -webkit-mask: var(--feston); mask: var(--feston); filter: drop-shadow(0 3px 2px rgba(0,0,0,.12)); pointer-events: none; }
.d-planches .brand-mark { border-radius: 50%; background: var(--marine); box-shadow: 0 0 0 2px var(--creme), 0 0 0 3.5px var(--rouge); }
.d-planches .brand-text strong { font-size: 1.22rem; font-style: italic; letter-spacing: 0; }
.d-planches .brand-text small { text-transform: uppercase; letter-spacing: .16em; font-size: .66rem; color: var(--rouge); }
.d-planches .brand-stars { color: var(--rouge); font-style: normal; }
.d-planches .nav { gap: 0; }
.d-planches .nav a { border-radius: 0; font-size: .92rem; font-weight: 500; white-space: nowrap; padding: .5em .7em; }
.d-planches .nav a:hover { background: transparent; color: var(--rouge); box-shadow: inset 0 -2px 0 var(--rouge); }

/* Boutons : enseignes peintes */
.d-planches .btn { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; font-weight: 600; }
.d-planches .btn-lg { padding: 1.2em 1.8em; }
.d-planches .btn-primary { background: var(--rouge); box-shadow: 3px 3px 0 var(--marine); }
.d-planches .btn-primary:hover { background: color-mix(in oklab, var(--rouge), #000 12%); box-shadow: 5px 5px 0 var(--marine); }
.d-planches .btn-ghost { background: transparent; border-color: var(--ink); }

/* Bannière : la promenade, la mer et la rangée de cabines */
.d-planches .hero-overlay { min-height: min(88vh, 780px); background: var(--marine); }
.d-planches .hero-bg-art { background:
  var(--planches) bottom / 100% 13% no-repeat,
  radial-gradient(circle at 74% 60%, #fbe3b5 0 5%, rgba(251,214,160,.55) 5.3%, transparent 22%),
  linear-gradient(to top, #e8d2a4 0 22%, color-mix(in oklab, var(--primary), #0a1f2e 20%) 22% 36%, color-mix(in oklab, var(--primary), #f3c48e 55%) 36.5% 39%, color-mix(in oklab, var(--primary), #f1c08c 30%) 39%, var(--primary) 62%, var(--primary-700)); }
.d-planches .hero-bg { z-index: 0; }
.d-planches .hero-overlay .hero-ov { align-items: center; }
.d-planches .hero-ov-cards { align-self: start; }
.d-planches .hero-bg-art::before { content: ''; position: absolute; inset: auto 0 22% 0; height: 14%; background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(255,255,255,.12) 9px 10px); }
.d-planches .hero-bg-art .ic { display: none; }
.d-planches .hero-bg::before, .d-planches .hero-bg-art::after { content: ''; position: absolute; bottom: 12.5%; height: 27%; width: 40%; right: 5%; z-index: 1;
  background: linear-gradient(90deg, transparent 7.5%, rgba(20,30,40,.45) 7.5% 14.5%, transparent 14.5% 59.5%, rgba(20,30,40,.45) 59.5% 66.5%, transparent 66.5%) bottom / 100% 42% no-repeat,
    linear-gradient(var(--rouge) 0 27%, var(--creme) 27% 29%, transparent 29%), repeating-linear-gradient(90deg, var(--rouge) 0 9px, var(--creme) 9px 18px);
  clip-path: polygon(0 100%, 0 27%, 11% 0, 22% 27%, 22% 100%, 52% 100%, 52% 27%, 63% 0, 74% 27%, 74% 100%); }
.d-planches .hero-bg::before { z-index: 2; background:
  linear-gradient(90deg, transparent 33.5%, rgba(20,30,40,.45) 33.5% 40.5%, transparent 40.5% 85.5%, rgba(20,30,40,.45) 85.5% 92.5%, transparent 92.5%) bottom / 100% 42% no-repeat,
  linear-gradient(var(--primary-700) 0 27%, var(--creme) 27% 29%, transparent 29%), repeating-linear-gradient(90deg, var(--primary) 0 9px, var(--creme) 9px 18px);
  clip-path: polygon(26% 100%, 26% 27%, 37% 0, 48% 27%, 48% 100%, 78% 100%, 78% 27%, 89% 0, 100% 27%, 100% 100%); }
.d-planches .hero-overlay:not(.has-image) .hero-bg::after { z-index: 3; background: linear-gradient(100deg, color-mix(in oklab, var(--marine), transparent 20%) 0%, color-mix(in oklab, var(--marine), transparent 60%) 45%, transparent 70%); -webkit-mask: linear-gradient(#000 62%, transparent 76%); mask: linear-gradient(#000 62%, transparent 76%); }
.d-planches .hero-overlay h1 { color: #fdf3dc; font-size: clamp(2.6rem, 5.6vw, 4.8rem); text-shadow: 3px 3px 0 color-mix(in oklab, var(--rouge), transparent 25%); }
.d-planches .hero-overlay .pill-badge { border-radius: 0; background: var(--creme); color: var(--rouge); border: 0; font-style: italic; font-family: var(--font-head); font-size: 1rem; padding: .4em 1.2em; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%); }
.d-planches .hero-overlay .pill-badge .dot { display: none; }
.d-planches .hero-overlay .btn-primary { background: var(--rouge); color: #fff; box-shadow: 3px 3px 0 #fdf3dc; }
.d-planches .hero-overlay .btn-primary:hover { background: color-mix(in oklab, var(--rouge), #000 12%); }
.d-planches .hero-overlay .btn-ghost { border-color: rgba(253,243,220,.6); color: #fdf3dc; }
.d-planches .float-card { border-radius: 0; background: var(--creme); border-left: 5px solid var(--rouge); }

/* Points forts : planche rayée */
.d-planches .hl-grid { border-radius: 0; border: 0; background: var(--rayures) top / 100% 6px no-repeat, var(--surface); padding-top: 6px; box-shadow: 0 18px 40px -22px rgba(20,30,40,.4); }
.d-planches .ic-box { border-radius: 50%; background: var(--marine); color: var(--creme); }
.d-planches .hl-item strong { font-family: var(--font-head); font-size: 1.08rem; }

/* Titres de section : lettres peintes */
.d-planches .eyebrow { font-family: var(--font-head); font-style: italic; text-transform: none; letter-spacing: .01em; font-size: 1.15rem; font-weight: 500; color: var(--rouge); display: inline-flex; align-items: center; gap: 14px; }
.d-planches .eyebrow::before, .d-planches .sec-head.center .eyebrow::after { content: ''; width: 34px; height: 5px; border-block: 1px solid currentColor; }
.d-planches .sec-head h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); }

/* Chambres : chacune sa cabine */
.d-planches .pj-chip { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.d-planches .pj-chip.on { background: var(--marine); border-color: var(--marine); }
.d-planches .room { border-radius: 0; border-color: var(--line); box-shadow: 0 6px 0 -3px var(--sable); }
.d-planches .room-ph { --c: var(--rouge); color: transparent; background: var(--planches) bottom / 100% 16% no-repeat, linear-gradient(to top, #e8d2a4 0 30%, var(--primary-200) 30%, var(--primary-50)); }
.d-planches .room:nth-child(3n+2) .room-ph { --c: var(--primary); }
.d-planches .room:nth-child(3n) .room-ph { --c: #3d7f73; }
.d-planches .room-ph::before { content: ''; position: absolute; left: 50%; bottom: 15%; width: 30%; height: 64%; translate: -50% 0;
  background: linear-gradient(90deg, transparent 32%, rgba(20,30,40,.4) 32% 68%, transparent 68%) bottom / 100% 48% no-repeat, linear-gradient(var(--c) 0 26%, var(--creme) 26% 28%, transparent 28%), repeating-linear-gradient(90deg, var(--c) 0 10px, var(--creme) 10px 20px);
  clip-path: polygon(0 100%, 0 26%, 50% 0, 100% 26%, 100% 100%); }
.d-planches .room-ph::after { content: ''; position: absolute; left: calc(50% - 1px); top: 6%; width: 22px; height: 16%; background: linear-gradient(90deg, var(--ink-2) 0 2px, var(--c) 2px); clip-path: polygon(0 0, 100% 22%, 2px 44%, 2px 100%, 0 100%); }
.d-planches .room-ph .ic { display: none; }
.d-planches .room-price { border-radius: 0; background: var(--marine); color: var(--creme); font-family: var(--font-head); font-style: italic; font-size: 1rem; box-shadow: 3px 3px 0 var(--rouge); }
.d-planches .room-cat { color: var(--rouge); }
.d-planches .room h3 { font-size: 1.35rem; }
.d-planches .room-book { color: var(--rouge); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }
.d-planches .pj-pager button { border-radius: 0; }
.d-planches .pj-pager button.on { background: var(--marine); border-color: var(--marine); }

/* La carte : menu de brasserie de la digue, sous son lambrequin */
.d-planches .menu-board { border-radius: 0; background: var(--surface); box-shadow: inset 0 0 0 8px var(--surface), inset 0 0 0 9px var(--line), 0 20px 40px -26px rgba(20,30,40,.35); padding-top: clamp(48px, 7vw, 76px); }
.d-planches .menu-board::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 22px; background: var(--rayures); -webkit-mask: var(--feston); mask: var(--feston); }
.d-planches .menu-group h3 { font-style: italic; text-align: center; color: var(--rouge); border-bottom: 0; font-size: 1.6rem; }
.d-planches .menu-group h3::after { content: ''; display: block; width: 60px; height: 5px; margin: 10px auto 0; border-block: 1px solid var(--marine); }
.d-planches .dish-line strong { font-family: var(--font-head); font-size: 1.1rem; }
.d-planches .dish-dots { border-bottom: 1px dotted var(--ink-3); }
.d-planches .dish-price { color: var(--marine); font-family: var(--font-head); font-size: 1.1rem; }

/* Services : bouées de sauvetage */
.d-planches .card { border-radius: 0; background: var(--surface); }
.d-planches .card::after { background: var(--rayures); height: 5px; }
.d-planches .card .ic-box, .d-planches .card:hover .ic-box { width: 62px; height: 62px; border-radius: 50%; color: var(--marine); background: radial-gradient(circle, var(--surface) 0 47%, transparent 48%), repeating-conic-gradient(var(--rouge) 0 45deg, #fff 45deg 90deg); box-shadow: 0 0 0 1px var(--line), 0 4px 10px -4px rgba(0,0,0,.3); }
.d-planches .card h3 { font-size: 1.3rem; }

/* La maison : affiche de bord de mer */
.d-planches .about-art { border-radius: 0; border: 12px solid var(--creme); outline: 1px solid var(--line); align-content: start; padding-top: 12%; color: var(--creme);
  background: var(--planches) bottom / 100% 12% no-repeat, radial-gradient(circle at 50% 66%, #fbe3b5 0 9%, transparent 9.5%), linear-gradient(to top, #e8d2a4 0 20%, color-mix(in oklab, var(--primary), #0a1f2e 20%) 20% 34%, #f3c995 34%, color-mix(in oklab, var(--primary), #f3c995 40%) 55%, var(--primary-700)); }
.d-planches .about-art .ic { width: 16%; stroke: var(--creme); order: -1; }
.d-planches .about-art-name { color: #fdf3dc; font-size: clamp(1.6rem, 3vw, 2.3rem); font-style: italic; text-shadow: 2px 2px 0 var(--rouge); max-width: 12em; }
.d-planches .stats div { border-radius: 0; background: transparent; border: 0; border-top: 3px double var(--rouge); padding: 14px 0 0; }
.d-planches .stats dt { font-family: var(--font-head); color: var(--marine); font-size: 2.4rem; font-weight: 700; }

/* Labels, avis : cartes postales timbrées */
.d-planches .trust-item, .d-planches .review, .d-planches .panel { border-radius: 0; }
.d-planches .trust-item .ic-box { background: transparent; color: var(--rouge); border: 1.5px solid var(--rouge); }
.d-planches .review { position: relative; background: var(--surface); padding-top: 30px; box-shadow: 4px 4px 0 var(--sable); }
.d-planches .review::before { content: ''; position: absolute; top: 18px; right: 18px; width: 38px; height: 46px; background: repeating-linear-gradient(90deg, var(--primary) 0 6px, var(--creme) 6px 12px); border: 3px solid #fff; outline: 2px dotted var(--line); rotate: 6deg; }
.d-planches .review blockquote { font-family: var(--font-head); font-style: italic; font-size: 1.08rem; color: var(--ink); padding-right: 48px; }
.d-planches .stars { color: var(--rouge); }
.d-planches .avatar { border-radius: 50%; background: var(--sable); border: 2px solid var(--marine); }
.d-planches .avatar span { color: var(--marine); font-style: italic; }
.d-planches .team .avatar { max-width: 190px; margin-inline: auto; }
.d-planches .member small { color: var(--rouge); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; }

/* Encadré : le lambrequin sur fond marine */
.d-planches .cta { border-radius: 0; background: radial-gradient(400px 200px at 90% 120%, color-mix(in oklab, var(--primary), transparent 50%), transparent), var(--marine); padding-top: 70px; }
.d-planches .cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 22px; background: var(--rayures); -webkit-mask: var(--feston); mask: var(--feston); }
.d-planches .cta h2 { color: #fdf3dc; font-style: italic; }
.d-planches .cta .btn-white { background: var(--creme); color: var(--rouge); box-shadow: 3px 3px 0 var(--rouge); }

/* Réservation */
.d-planches .quote-form { background: var(--rayures) top / 100% 6px no-repeat, var(--surface); padding-top: 40px; }
.d-planches .quote-points .ic { background: var(--marine); color: var(--creme); }
.d-planches .f-field input, .d-planches .f-field select, .d-planches .f-field textarea { border-radius: 0; background: #fff; }

/* Alentours : panneaux de bois fléchés */
.d-planches .towns li { border: 0; border-radius: 0; color: #2e1d0e; padding: .6em 1.6em .6em 1em; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  background: repeating-linear-gradient(178deg, transparent 0 5px, rgba(110,74,43,.12) 5px 6px), linear-gradient(#dcbb8f, #c9a171); }
.d-planches .towns .ic { color: #2e1d0e; }
.d-planches .towns small { color: #4a3220; }

/* Horaires & contact */
.d-planches .panel { box-shadow: inset 0 0 0 6px var(--surface), inset 0 0 0 7px var(--line); }
.d-planches .panel-head > .ic { border-radius: 50%; background: var(--marine); color: var(--creme); }
.d-planches .panel-head h2 { font-style: italic; }
.d-planches .status-line, .d-planches .closures { border-radius: 0; background: var(--bg-soft); }
.d-planches .hours-table tr.today th, .d-planches .hours-table tr.today td { color: var(--rouge); }
.d-planches .hours-table tr.today th::after { border-radius: 0; background: var(--rouge); color: #fff; }
.d-planches .map { border-radius: 0; }
.d-planches .news-date { color: var(--rouge); }
.d-planches .news-card h3 { font-size: 1.35rem; }

/* FAQ */
.d-planches .faq details { border-radius: 0; background: var(--surface); }
.d-planches .faq summary { font-family: var(--font-head); font-size: 1.15rem; }
.d-planches .faq .plus { background: var(--sable); color: var(--rouge); }
.d-planches .faq details[open] .plus { background: var(--rouge); }

/* Pied de page : la vague puis les planches */
.d-planches .site-footer { position: relative; margin-top: 30px; background: var(--planches) bottom / 100% 14px no-repeat, var(--footer-bg); padding-bottom: 14px; }
.d-planches .site-footer::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; background: var(--footer-bg); -webkit-mask: radial-gradient(22px 22px at 50% 100%, #000 98%, transparent) 0 0 / 40px 100% repeat-x; mask: radial-gradient(22px 22px at 50% 100%, #000 98%, transparent) 0 0 / 40px 100% repeat-x; }
.d-planches .site-footer h3 { font-family: var(--font-head); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.2rem; color: #fdf3dc; }
.d-planches .brand-light .brand-text small { color: #e9c9a0; }
.d-planches .brand-light .brand-mark { background: transparent; box-shadow: 0 0 0 1.5px #fdf3dc; }
.d-planches .socials a { border-radius: 50%; }
.d-planches .socials a:hover { background: var(--rouge); }

/* Mobile */
@media (max-width: 920px) {
  .d-planches .hero-overlay { min-height: 0; padding-bottom: 200px; }
  .d-planches .hero-bg::before, .d-planches .hero-bg-art::after { width: 64%; height: 150px; bottom: 9%; right: 2%; }
  .d-planches .hero-bg-art { background-size: 100% 9%, auto, auto; }
  .d-planches .hero-overlay:not(.has-image) .hero-bg::after { background: linear-gradient(180deg, color-mix(in oklab, var(--marine), transparent 15%) 0%, color-mix(in oklab, var(--marine), transparent 40%) 55%, transparent 80%); }
}
@media (max-width: 560px) {
  .d-planches .site-header::after { height: 12px; }
  .d-planches .hero-ov-cards { display: none; }
  .d-planches .hero-overlay { padding-bottom: 210px; }
}