/* Design « Marinière » : un hôtel de bord de mer graphique, rayures marinières, cordages, hublots et pavillons de signalisation. Gloock + Figtree. */
.d-marine {
  --red: #c1272d;
  --sun: #f2b705;
  --sand: #f6f1e7;
  --navy: color-mix(in oklab, var(--primary), #050a1a 45%);
  --rope: repeating-linear-gradient(-58deg, #dcc196 0 4px, #a9814c 4px 6px, #e6d0a8 6px 8px);
  --stripes: repeating-linear-gradient(180deg, var(--primary) 0 9px, #fff 9px 22px);
  --sea: linear-gradient(180deg, #cfe3f5 0 46%, #fff 46% 48%, color-mix(in oklab, var(--primary), #5ba7d9 55%) 48%, var(--primary) 100%);
  --bg: #ffffff;
  --bg-soft: #f2f5fb;
  --surface: #ffffff;
  --ink: #12203f;
  --ink-2: #3a4664;
  --ink-3: #5c6782;
  --line: #dbe1ee;
  --head-w: 400;
  --h1-w: 400;
  --head-track: -.005em;
  --h1-track: -.01em;
  --btn-r: 6px;
  --footer-bg: var(--navy);
}

/* Boutons : capitaine, majuscules espacées */
.d-marine .btn { text-transform: uppercase; letter-spacing: .08em; font-size: .84rem; font-weight: 700; }
.d-marine .btn-primary { background: var(--primary); box-shadow: 0 4px 0 var(--navy); }
.d-marine .btn-primary:hover { background: var(--navy); box-shadow: 0 4px 0 var(--red); }
.d-marine .btn-ghost { border: 2px solid var(--primary); color: var(--primary); }
.d-marine .btn-ghost:hover { background: var(--primary-50); color: var(--navy); }
.d-marine .btn-white { color: var(--navy); box-shadow: 0 4px 0 var(--red); }

/* Annonce + en-tête : liseré marinière */
.d-marine .announce { background: var(--red); letter-spacing: .02em; }
.d-marine .site-header { background: rgba(255, 255, 255, .96); border-bottom: 0; }
.d-marine .site-header::after { content: ''; position: absolute; inset: auto 0 -7px; height: 7px; background: repeating-linear-gradient(180deg, var(--primary) 0 2px, #fff 2px 5px); pointer-events: none; }
.d-marine .brand-mark { border-radius: 50%; background: var(--primary); box-shadow: inset 0 0 0 3px var(--primary), inset 0 0 0 5px #fff; }
.d-marine .brand-text strong { font-family: var(--font-head); font-weight: 400; font-size: 1.28rem; color: var(--navy); }
.d-marine .brand-stars { color: var(--red); }
.d-marine .nav a { border-radius: 4px; font-weight: 600; color: var(--ink); white-space: nowrap; padding: .5em .7em; }
.d-marine h3 { font-weight: 400; }
.d-marine .nav a:hover { background: transparent; color: var(--primary); box-shadow: inset 0 -2px 0 var(--red); }

/* Bannière : panneau marinière, hublot sur la mer, bouée et pavillons */
.d-marine .hero { background: radial-gradient(800px 420px at 100% 0, var(--primary-50), transparent 70%), #fff; }
.d-marine .hero h1 { color: var(--navy); font-size: clamp(2.5rem, 5vw, 4.3rem); line-height: 1.04; }
.d-marine .pill-badge { border-radius: 4px; border: 0; background: var(--sand); color: var(--navy); box-shadow: none; text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; }
.d-marine .pill-badge .dot { border-radius: 0; width: 14px; height: 10px; background: linear-gradient(135deg, var(--red) 50%, var(--sun) 50%); box-shadow: none; }
.d-marine .hero-art { background: var(--stripes); border-radius: var(--radius); box-shadow: 0 0 0 10px #fff, 0 0 0 12px var(--line), var(--shadow-lg); }
.d-marine .hero-art::before { background: linear-gradient(160deg, rgba(255,255,255,.18), transparent 45%, rgba(0,0,0,.12)); }
.d-marine .art-ring.r1 { width: 62%; background: repeating-conic-gradient(#dcc196 0 5deg, #a9814c 5deg 7deg); border: 0; -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 85% 99%, transparent); mask: radial-gradient(closest-side, transparent 84%, #000 85% 99%, transparent); }
.d-marine .art-ring.r2 { width: 30%; left: 80%; top: 80%; border: 0; animation-duration: 40s; background: conic-gradient(var(--red) 0 12.5%, #fff 0 25%, var(--red) 0 37.5%, #fff 0 50%, var(--red) 0 62.5%, #fff 0 75%, var(--red) 0 87.5%, #fff 0); -webkit-mask: radial-gradient(closest-side, transparent 52%, #000 53% 98%, transparent); mask: radial-gradient(closest-side, transparent 52%, #000 53% 98%, transparent); filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.d-marine .art-cross { width: 52%; border-radius: 50%; background: var(--sea); backdrop-filter: none; border: 14px solid var(--navy);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.5), 0 0 0 4px #c9a25e, 0 18px 30px -10px rgba(0,0,0,.5); }
.d-marine .art-cross .ic { width: 38%; height: 38%; translate: 0 -24%; stroke: var(--navy); filter: none; }
.d-marine .art-pill { width: 52px; height: 38px; border-radius: 2px; box-shadow: 0 6px 14px -4px rgba(0,0,0,.4); }
.d-marine .art-pill .ic { display: none; }
.d-marine .art-pill.p1 { background: conic-gradient(var(--red) 0 25%, #fff 0 50%, var(--red) 0 75%, #fff 0); left: 9%; top: 9%; }
.d-marine .art-pill.p2 { background: linear-gradient(#fff, #fff) center / 40% 40% no-repeat, var(--navy); right: 12%; top: 24%; }
.d-marine .art-pill.p3 { background: linear-gradient(90deg, var(--sun) 50%, var(--navy) 50%); right: auto; left: 10%; bottom: auto; top: 46%; }
.d-marine .float-card { border-radius: 6px; border-left: 5px solid var(--red); }
.d-marine .float-card > .ic { color: var(--red); }

/* Points forts : hublots et liseré rayé */
.d-marine .hl-grid { border-radius: var(--radius); border: 0; padding-top: 10px; background: repeating-linear-gradient(90deg, var(--primary) 0 14px, #fff 14px 28px) top / 100% 10px no-repeat, #fff; box-shadow: 0 0 0 1.5px var(--line), var(--shadow); }
.d-marine .ic-box { border-radius: 50%; background: #fff; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary), inset 0 0 0 5px #fff, inset 0 0 0 6px var(--primary-200); }
.d-marine .hl-item strong { color: var(--navy); }

/* Titres de section : guirlande de pavillons */
.d-marine .eyebrow { color: var(--red); letter-spacing: .18em; }
.d-marine .sec-head h2 { color: var(--navy); font-size: clamp(2rem, 3.6vw, 3rem); }
.d-marine .sec-head.center::before { content: ''; display: block; width: 104px; height: 18px; margin: 0 auto 16px;
  background: linear-gradient(var(--navy), var(--navy)) 0 0 / 100% 1.5px no-repeat,
    linear-gradient(135deg, var(--red) 50%, #fff 50%) 4px 3px / 18px 14px no-repeat,
    linear-gradient(90deg, var(--primary) 50%, #fff 50%) 30px 3px / 18px 14px no-repeat,
    linear-gradient(var(--sun) 33%, var(--red) 33% 66%, var(--sun) 66%) 56px 3px / 18px 14px no-repeat,
    linear-gradient(#fff, #fff) 85px 7px / 8px 6px no-repeat, linear-gradient(var(--navy), var(--navy)) 82px 3px / 18px 14px no-repeat;
  filter: drop-shadow(0 1px 0 var(--line)); }

/* Chambres : hublot sur la mer, prix en fanion rouge, cordage */
.d-marine .room { border: 1.5px solid var(--line); border-radius: var(--radius); }
.d-marine .room-ph { background: repeating-linear-gradient(180deg, var(--primary-100) 0 10px, #fff 10px 22px); color: var(--navy); }
.d-marine .room-ph::before { content: ''; position: absolute; width: 50%; aspect-ratio: 1; border-radius: 50%; background: var(--sea); border: 10px solid var(--navy); box-shadow: 0 0 0 3px #c9a25e, 0 12px 24px -10px rgba(0,0,0,.45); }
.d-marine .room-ph .ic { position: relative; width: 16%; translate: 0 -40%; }
.d-marine .room-price { border-radius: 0 4px 4px 0; padding-left: 1.3em; background: var(--red); color: #fff; clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); right: 0; top: 18px; }
.d-marine .room-body { background: var(--rope) top / 100% 6px no-repeat; padding-top: 26px; }
.d-marine .room h3 { font-weight: 400; font-size: 1.45rem; color: var(--navy); }
.d-marine .room-cat { color: var(--red); letter-spacing: .14em; }
.d-marine .room-book { text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--primary); border-bottom: 2px solid var(--red); }
.d-marine .pj-chip, .d-marine .pj-pager button { border-radius: 4px; border: 1.5px solid var(--primary-200); }
.d-marine .pj-chip.on, .d-marine .pj-pager button.on { background: var(--navy); border-color: var(--navy); }

/* La carte : menu du bord, double filet, ancre au sommet */
.d-marine .menu-sec { background: var(--bg-soft); }
.d-marine .menu-board { margin-top: 30px; border: 2px solid var(--navy); border-radius: 6px; box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 8.5px var(--navy), var(--shadow); }
.d-marine .menu-deco { display: grid; place-items: center; position: absolute; left: 50%; top: 0; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: #fff; box-shadow: 0 0 0 6px var(--bg-soft), 0 0 0 8px #c9a25e; }
.d-marine .menu-deco .ic { width: 28px; height: 28px; fill: none; stroke: currentColor; }
.d-marine .menu-group h3 { font-weight: 400; font-size: 1.6rem; color: var(--navy); border: 0; padding-bottom: 14px; background: var(--rope) bottom / 100% 5px no-repeat; }
.d-marine .dish-line strong { color: var(--ink); }
.d-marine .dish-dots { border-bottom: 2px dotted var(--primary-200); }
.d-marine .dish-price { color: var(--red); font-family: var(--font-head); font-weight: 400; font-size: 1.15rem; }

/* Services : cartes à bandeau rayé */
.d-marine .card { border: 1.5px solid var(--line); padding-top: 40px; }
.d-marine .card::before { content: ''; position: absolute; inset: 0 0 auto; height: 17px; background: repeating-linear-gradient(180deg, var(--primary) 0 3px, #fff 3px 7px); }
.d-marine .card::after { background: var(--red); height: 4px; }
.d-marine .card h3 { font-weight: 400; font-size: 1.35rem; color: var(--navy); }
.d-marine .card:hover .ic-box { box-shadow: none; }
.d-marine .news-card { padding-top: 40px; }
.d-marine .news-date { display: inline-block; align-self: flex-start; padding: .3em .8em .3em .6em; background: var(--primary-50); color: var(--navy); border-left: 4px solid var(--red); }

/* La maison : cadre de cordage */
.d-marine .about { background: var(--sand); }
.d-marine .about-art { border: 12px solid transparent; border-radius: var(--radius); color: #fff;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.14), transparent 55%) padding-box, repeating-linear-gradient(180deg, transparent 0 18px, rgba(255,255,255,.05) 18px 36px) padding-box, linear-gradient(var(--primary), var(--navy)) padding-box, var(--rope) border-box; }
.d-marine .about-art-name { color: #fff; font-weight: 400; font-size: 1.9rem; }
.d-marine .stats div { border: 0; border-left: 4px solid var(--red); border-radius: 2px; }
.d-marine .stats dt { font-weight: 400; color: var(--navy); font-size: 2.2rem; }

/* Labels, avis, équipe */
.d-marine .trust { background: #fff; }
.d-marine .trust-item { border: 1.5px solid var(--line); background: linear-gradient(var(--primary), var(--primary)) left / 6px 100% no-repeat, #fff; }
.d-marine .trust-item h3 { color: var(--navy); font-size: 1.2rem; }
.d-marine .review { border: 1.5px solid var(--line); position: relative; }
.d-marine .review::before { content: '“'; position: absolute; top: 2px; right: 22px; font: 400 5rem/1 var(--font-head); color: var(--primary-100); }
.d-marine .stars { color: #e0a100; }
.d-marine .avatar { border-radius: 50%; border: 8px solid var(--navy); box-shadow: 0 0 0 3px #c9a25e; background: repeating-linear-gradient(180deg, var(--primary-50) 0 8px, #fff 8px 18px); }
.d-marine .avatar span { font-weight: 400; color: var(--navy); }
.d-marine .review .avatar { border-width: 2px; box-shadow: none; max-width: 44px; }
.d-marine .member { width: 100%; max-width: 230px; margin: 0 auto; }

/* Encadré : rayures ton sur ton et liseré rouge */
.d-marine .cta { border-radius: var(--radius); border-bottom: 6px solid var(--red);
  background: linear-gradient(90deg, var(--navy) 35%, transparent 85%), repeating-linear-gradient(180deg, var(--navy) 0 14px, var(--primary) 14px 28px); }
.d-marine .cta h2 { font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.d-marine .cta-deco { opacity: .14; }

/* Réservation */
.d-marine .quote-points .ic { background: #fff; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.d-marine .quote-form { border-top: 0; background: repeating-linear-gradient(90deg, var(--primary) 0 14px, #fff 14px 28px) top / 100% 8px no-repeat, #fff; padding-top: 42px; }
.d-marine .f-field label { color: var(--navy); }
.d-marine .f-field input, .d-marine .f-field select, .d-marine .f-field textarea { border-radius: 6px; border-color: #c9d1e3; background: #fff; }
.d-marine .quote-call a { color: var(--primary); }

/* Alentours : étiquettes de carte marine */
.d-marine .towns li { background: #fff; border: 1.5px dashed var(--primary-200); border-radius: 4px; color: var(--navy); }
.d-marine .towns .ic { color: var(--red); }

/* Horaires & contact */
.d-marine .panel { border: 1.5px solid var(--line); }
.d-marine .panel-head > .ic { border-radius: 50%; background: #fff; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary), inset 0 0 0 5px #fff, inset 0 0 0 6px var(--primary-200); }
.d-marine .panel-head h2 { font-weight: 400; color: var(--navy); font-size: 1.7rem; }
.d-marine .hours-table tr.today th::after { background: var(--red); color: #fff; }
.d-marine .hours-table tr.today th, .d-marine .hours-table tr.today td { color: var(--primary); }
.d-marine .map { border: 1.5px solid var(--line); }

/* FAQ */
.d-marine .faq details { border: 1.5px solid var(--line); border-left: 5px solid var(--primary); border-radius: 6px; }
.d-marine .faq details[open] { border-left-color: var(--red); }
.d-marine .faq .plus { background: #fff; box-shadow: inset 0 0 0 2px var(--primary); color: var(--primary); }
.d-marine .faq details[open] .plus { background: var(--red); box-shadow: none; }

/* Pied de page : grand liseré marinière */
.d-marine .site-footer { padding-top: 92px; background: repeating-linear-gradient(180deg, var(--primary) 0 7px, #fff 7px 14px) top / 100% 35px no-repeat, var(--footer-bg); }
.d-marine .site-footer h3 { color: #fff; letter-spacing: .16em; }
.d-marine .brand-light .brand-mark { background: var(--primary); box-shadow: inset 0 0 0 3px var(--primary), inset 0 0 0 5px #fff; }
.d-marine .brand-light .brand-text strong { color: #fff; }
.d-marine .socials a:hover { background: var(--red); }

@media (max-width: 920px) {
  .d-marine .nav { background: #fff; }
  .d-marine .nav a:hover { box-shadow: none; background: var(--primary-50); }
  .d-marine .hl-item, .d-marine .hl-item:nth-child(odd) { border-color: var(--line); }
  .d-marine .cta { background: linear-gradient(180deg, var(--navy) 50%, transparent), repeating-linear-gradient(180deg, var(--navy) 0 14px, var(--primary) 14px 28px); }
}
@media (max-width: 560px) {
  .d-marine .art-pill { width: 40px; height: 30px; }
  .d-marine .hero-art { box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--line), var(--shadow); }
}