/* Design « Guinguette » : guinguette au bord de l'eau, guirlandes de lampions et fanions, rouge-jaune-bleu francs. Shrikhand + Figtree. */
.d-guinguette {
  --sun: #f4b81f;
  --blue: #1f5fa8;
  --navy: #14305a;
  --cream: #fff8ec;
  /* Toile de transat */
  --transat: repeating-linear-gradient(90deg, var(--primary) 0 24px, var(--cream) 24px 34px, var(--blue) 34px 39px, var(--cream) 39px 49px);
  --bg: var(--cream); --bg-soft: #fdefd6; --surface: #ffffff;
  --ink: #1b2233; --ink-2: #434a5c; --ink-3: #626a7c; --line: #f0e0c4;
  --head-w: 400; --h1-w: 400; --head-track: 0; --h1-track: 0;
  --btn-r: 999px; --footer-bg: var(--navy);
}

/* Fanions : triangles rouge / jaune / bleu sur une ficelle (recalculés là où les couleurs changent) */
.d-guinguette, .d-guinguette .cta, .d-guinguette .site-footer {
  --flag3: var(--blue); --flag-line: var(--navy);
  --bunting: linear-gradient(var(--flag-line), var(--flag-line)) 0 0 / 100% 2px no-repeat,
    conic-gradient(from -30deg at 50% 100%, var(--primary) 60deg, transparent 0) 0 0 / 120px 26px repeat-x,
    conic-gradient(from -30deg at 50% 100%, var(--sun) 60deg, transparent 0) 40px 0 / 120px 26px repeat-x,
    conic-gradient(from -30deg at 50% 100%, var(--flag3) 60deg, transparent 0) 80px 0 / 120px 26px repeat-x;
}
.d-guinguette .cta, .d-guinguette .site-footer { --flag3: #fff; --flag-line: rgba(255, 255, 255, .5); }

/* Titres Shrikhand, sur-titres en petit fanion */
.d-guinguette h1, .d-guinguette h2, .d-guinguette h3 { font-weight: 400; }
.d-guinguette .sec-head h2 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); color: var(--navy); line-height: 1.1; }
.d-guinguette .eyebrow { background: var(--sun); color: var(--navy); padding: .45em 1.6em .45em 1em; letter-spacing: .1em; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); }
.d-guinguette .btn { font-weight: 700; }
.d-guinguette .btn-primary { box-shadow: 0 4px 0 var(--primary-900); }
.d-guinguette .btn-primary:hover { box-shadow: 0 6px 0 var(--primary-900); }
.d-guinguette .btn-ghost { border: 2px solid var(--navy); color: var(--navy); }

/* En-tête : une rangée de fanions qui pend sous la barre */
.d-guinguette .site-header { background: rgba(255, 248, 236, .97); border-bottom: 0; }
.d-guinguette .site-header::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 26px; background: var(--bunting); pointer-events: none; filter: drop-shadow(0 3px 2px rgba(20, 48, 90, .15)); }
.d-guinguette .brand-mark { border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--sun); }
.d-guinguette .brand-text strong { font-weight: 400; font-size: 1.15rem; color: var(--navy); }
.d-guinguette .brand-stars { color: var(--sun); text-shadow: 0 1px 0 var(--navy); }
.d-guinguette .nav a { font-weight: 600; color: var(--ink); white-space: nowrap; padding: .5em .75em; }
.d-guinguette .nav a:hover { background: var(--sun); color: var(--navy); }

/* Bannière : soir d'été au bord de l'eau, guirlande d'ampoules et lampions */
.d-guinguette .hero { padding-top: 84px; background: radial-gradient(700px 300px at 50% 0, rgba(244, 184, 31, .22), transparent 70%), var(--cream); }
.d-guinguette .hero h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); color: var(--navy); line-height: 1.05; text-shadow: 3px 3px 0 var(--sun); }
.d-guinguette .pill-badge { background: var(--primary); color: #fff; border: 0; font-weight: 700; }
.d-guinguette .pill-badge .dot { background: var(--sun); box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.d-guinguette .hero-art { border-radius: 28px; box-shadow: 0 0 0 6px #fff, 0 0 0 12px var(--sun), var(--shadow-lg);
  background:
    radial-gradient(70px 34px at 50% 0, transparent 96%, rgba(255, 255, 255, .7) 97% 100%, transparent 101%) 0 18px / 140px 60px repeat-x,
    radial-gradient(circle at 70px 56px, #ffe7a3 0 5px, rgba(255, 214, 102, .45) 6px, transparent 16px) 0 0 / 140px 100px repeat-x,
    radial-gradient(circle at 26px 44px, #ffd1c4 0 4px, rgba(255, 140, 110, .35) 5px, transparent 12px) 0 0 / 140px 100px repeat-x,
    radial-gradient(circle at 114px 44px, #cfe2ff 0 4px, rgba(120, 170, 255, .35) 5px, transparent 12px) 0 0 / 140px 100px repeat-x,
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 14px) 0 100% / 100% 30% no-repeat,
    linear-gradient(180deg, transparent 70%, #1d5c8f 70%, #123e66) ,
    radial-gradient(60% 40% at 50% 70%, color-mix(in oklab, var(--primary), var(--sun) 40%), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, #2b4f86 45%, #e48a5a 70%); }
.d-guinguette .hero-art::before { background: radial-gradient(40% 8% at 50% 72%, rgba(255, 214, 120, .5), transparent 70%), repeating-radial-gradient(120% 12px at 50% 100%, transparent 0 8px, rgba(255, 255, 255, .08) 8px 10px) 0 100% / 100% 30% no-repeat; }
.d-guinguette .art-ring { display: none; }
/* La bouée au centre */
.d-guinguette .art-cross { top: 58%; width: 17%; border-radius: 50%; border: 0; backdrop-filter: none;
  background: radial-gradient(circle, #fff 0 46%, transparent 46.5%), repeating-conic-gradient(var(--primary) 0 45deg, #fff 0 90deg); box-shadow: 0 0 0 3px rgba(255, 255, 255, .5), 0 18px 30px -10px rgba(0, 0, 0, .5); }
.d-guinguette .art-cross .ic { width: 40%; height: 40%; stroke: var(--navy); filter: none; }
/* Les lampions */
.d-guinguette .art-pill { width: 58px; height: 70px; border-radius: 46%; color: transparent; animation: sway 5s ease-in-out infinite; transform-origin: 50% -40px;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 10px), radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .55), transparent 60%), var(--primary);
  box-shadow: 0 0 30px 6px color-mix(in srgb, var(--primary) 45%, transparent); }
.d-guinguette .art-pill::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 200px; background: rgba(255, 255, 255, .6); }
.d-guinguette .art-pill::after { content: ''; position: absolute; left: 30%; right: 30%; top: -4px; height: 8px; border-radius: 3px; background: var(--navy); box-shadow: 0 74px 0 var(--navy); }
.d-guinguette .art-pill.p1 { left: 12%; top: 26%; }
.d-guinguette .art-pill.p2 { right: 13%; top: 20%; --c: var(--sun); background-color: var(--sun); box-shadow: 0 0 30px 6px rgba(244, 184, 31, .5); }
.d-guinguette .art-pill.p3 { right: auto; left: 27%; top: 12%; bottom: auto; width: 44px; height: 54px; background-color: var(--blue); box-shadow: 0 0 26px 4px rgba(80, 140, 230, .45); }
.d-guinguette .art-pill.p3::after { box-shadow: 0 58px 0 var(--navy); }
.d-guinguette .float-card { border-radius: 999px; padding: 12px 22px 12px 16px; border: 3px solid var(--navy); box-shadow: 4px 4px 0 var(--navy); }
@keyframes sway { 50% { rotate: 4deg; } }

/* Points forts : pastilles de couleur */
.d-guinguette .highlights { margin-top: -40px; }
.d-guinguette .hl-grid { border-radius: 26px; border: 3px solid var(--navy); box-shadow: 6px 6px 0 var(--navy); }
.d-guinguette .hl-item + .hl-item { border-left: 2px dashed var(--line); }
.d-guinguette .ic-box { border-radius: 50%; background: var(--primary); color: #fff; }
.d-guinguette .hl-item:nth-child(3n+2) .ic-box, .d-guinguette .card:nth-child(3n+2) .ic-box, .d-guinguette .trust-item:nth-child(3n+2) .ic-box { background: var(--sun); color: var(--navy); }
.d-guinguette .hl-item:nth-child(3n) .ic-box, .d-guinguette .card:nth-child(3n) .ic-box, .d-guinguette .trust-item:nth-child(3n) .ic-box { background: var(--blue); }

/* Prestations : cartes bordées, liseré tricolore */
.d-guinguette .card { border-radius: 24px; border: 2px solid var(--line); border-top: 8px solid var(--primary); }
.d-guinguette .card:nth-child(3n+2) { border-top-color: var(--sun); }
.d-guinguette .card:nth-child(3n) { border-top-color: var(--blue); }
.d-guinguette .card::after { display: none; }
.d-guinguette .card:hover { box-shadow: 6px 6px 0 var(--navy); border-color: var(--navy); }
.d-guinguette .card h3 { font-size: 1.3rem; color: var(--navy); }

/* Chambres / emplacements : toile de transat */
.d-guinguette .room { border-radius: 24px; border: 2px solid var(--line); }
.d-guinguette .room:hover { box-shadow: 6px 6px 0 var(--navy); border-color: var(--navy); }
.d-guinguette .room-ph { background: linear-gradient(180deg, rgba(0, 0, 0, .08), transparent 30%), var(--transat); color: var(--navy); }
.d-guinguette .room-ph .ic { width: 20%; padding: 5%; box-sizing: content-box; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px var(--sun), 0 12px 24px -8px rgba(0, 0, 0, .4); }
.d-guinguette .room-price { top: 12px; right: 12px; width: 84px; height: 84px; padding: 10px; display: grid; place-items: center; text-align: center; line-height: 1.1; border-radius: 50%; background: var(--sun); color: var(--navy); font-weight: 800; rotate: 10deg; box-shadow: 0 0 0 3px #fff, 0 6px 14px -4px rgba(0, 0, 0, .35); }
.d-guinguette .room h3 { font-size: 1.35rem; color: var(--navy); }
.d-guinguette .room-cat { color: var(--primary-700); }
.d-guinguette .pj-chip { border: 2px solid var(--navy); color: var(--navy); }
.d-guinguette .pj-chip.on, .d-guinguette .pj-pager button.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* La carte : le panneau sous l'auvent rayé */
.d-guinguette .menu-board { margin-top: 30px; border-radius: 0 0 28px 28px; border: 3px solid var(--navy); border-top: 0; box-shadow: 8px 8px 0 var(--navy); padding-top: 70px; }
.d-guinguette .menu-board::before, .d-guinguette .menu-board::after { content: ''; position: absolute; z-index: 1; left: -14px; right: -14px; top: -30px; height: 70px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .14), transparent 40%), repeating-linear-gradient(90deg, var(--primary) 0 46px, #fff1cf 46px 92px);
  --m: linear-gradient(#000 0 calc(100% - 16px), transparent 0), radial-gradient(23px 16px at 50% calc(100% - 16px), #000 97%, transparent 100%) 0 0 / 46px 100% repeat-x;
  -webkit-mask: var(--m); mask: var(--m); }
.d-guinguette .menu-board::after { z-index: 0; top: -26px; background: var(--navy); }
.d-guinguette .menu-group h3 { color: var(--primary-700); font-size: 1.7rem; border: 0; display: inline-block; padding: 0 .2em; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--sun) 70%, transparent) 0); }
.d-guinguette .dish-line strong { font-weight: 700; color: var(--navy); }
.d-guinguette .dish-dots { border-bottom: 3px dotted var(--sun); }
.d-guinguette .dish-price { color: #fff; background: var(--blue); padding: .1em .6em; border-radius: 999px; font-size: .92rem; }
.d-guinguette .menu-note { color: var(--ink-2); }

/* La maison : le soleil sur l'eau */
.d-guinguette .about-art { border-radius: 28px; border: 3px solid var(--navy); box-shadow: 8px 8px 0 var(--navy); color: var(--navy);
  background: repeating-radial-gradient(140% 14px at 50% 100%, transparent 0 10px, rgba(255, 255, 255, .25) 10px 13px) 0 100% / 100% 34% no-repeat, linear-gradient(transparent 66%, var(--blue) 66%), radial-gradient(circle at 50% 66%, var(--sun) 0 24%, transparent 24.5%), linear-gradient(#ffe2b0, #ffb48a 66%); }
.d-guinguette .about-art .ic { opacity: 1; width: 26%; padding: 5%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px var(--primary); }
.d-guinguette .about-art-name { font-weight: 400; color: #fff; background: var(--primary); padding: .2em .9em; border-radius: 999px; box-shadow: 4px 4px 0 var(--navy); }
.d-guinguette .stats div { border-radius: 20px; border: 2px solid var(--navy); }
.d-guinguette .stats dt { font-weight: 400; color: var(--primary-700); }

/* Labels et avis */
.d-guinguette .trust { background: linear-gradient(#e7f0fb, #e7f0fb); }
.d-guinguette .trust-item, .d-guinguette .review { border-radius: 24px; border: 2px solid var(--line); }
.d-guinguette .trust-item h3 { color: var(--navy); font-size: 1.1rem; font-family: var(--font-body); font-weight: 800; }
.d-guinguette .review { position: relative; }
.d-guinguette .review::before { content: '\201C'; position: absolute; right: 22px; top: -6px; font-family: var(--font-head); font-size: 5rem; line-height: 1; color: var(--sun); }
.d-guinguette .stars { color: var(--sun); }
.d-guinguette .review blockquote { color: var(--ink); }

/* Encadré : bleu nuit sous les fanions */
.d-guinguette .cta { border-radius: 30px; background: var(--navy); padding-top: 70px; box-shadow: 8px 8px 0 var(--navy); }
.d-guinguette .cta::before { content: ''; position: absolute; left: 0; right: 0; top: 14px; height: 26px; background: var(--bunting); }
.d-guinguette .cta h2 { font-weight: 400; }
.d-guinguette .cta .btn-white { color: var(--navy); box-shadow: 0 4px 0 var(--sun); }

/* Équipe : médaillons tricolores */
.d-guinguette .avatar { border-radius: 50%; border: 0; box-shadow: inset 0 0 0 8px var(--primary), inset 0 0 0 12px #fff; background: var(--bg-soft); }
.d-guinguette .member:nth-child(3n+2) .avatar { box-shadow: inset 0 0 0 8px var(--sun), inset 0 0 0 12px #fff; }
.d-guinguette .member:nth-child(3n) .avatar { box-shadow: inset 0 0 0 8px var(--blue), inset 0 0 0 12px #fff; }
.d-guinguette .avatar span { font-weight: 400; color: var(--navy); }
.d-guinguette .review .avatar { box-shadow: none; background: var(--sun); }
.d-guinguette .member strong { color: var(--navy); }

/* Réservation, infos, FAQ, alentours */
.d-guinguette .quote-form { background: #fff; padding: 32px; border-radius: 28px; border: 3px solid var(--navy); box-shadow: 8px 8px 0 var(--navy); }
.d-guinguette .f-field input, .d-guinguette .f-field select, .d-guinguette .f-field textarea { border-radius: 14px; border-width: 2px; background: var(--cream); }
.d-guinguette .quote-points .ic { background: var(--sun); color: var(--navy); }
.d-guinguette .panel { border-radius: 28px; border: 2px solid var(--line); }
.d-guinguette .panel-head > .ic { border-radius: 50%; background: var(--primary); color: #fff; }
.d-guinguette .panel-head h2, .d-guinguette .news-card h3 { color: var(--navy); }
.d-guinguette .status-line { background: #e7f0fb; border-radius: 999px; }
.d-guinguette .hours-table tr.today th::after { background: var(--sun); color: var(--navy); }
.d-guinguette .map, .d-guinguette .closures { border-radius: 24px; }
.d-guinguette .faq details { border-radius: 22px; border: 2px solid var(--line); }
.d-guinguette .faq details[open] { border-color: var(--navy); box-shadow: 5px 5px 0 var(--navy); }
.d-guinguette .faq summary { font-weight: 700; color: var(--navy); }
.d-guinguette .faq .plus { background: var(--sun); color: var(--navy); }
.d-guinguette .faq details[open] .plus { background: var(--primary); }
.d-guinguette .towns li { background: #fff; border: 2px solid var(--navy); color: var(--navy); }
.d-guinguette .towns li:nth-child(3n+1) .ic { color: var(--primary); }
.d-guinguette .towns li:nth-child(3n+2) .ic { color: #b07d00; }
.d-guinguette .news-img { background: var(--transat); border-radius: 22px; }

/* Pied de page : bleu nuit, fanions en lisière */
.d-guinguette .site-footer { position: relative; padding-top: 96px; }
.d-guinguette .site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: var(--bunting); }
.d-guinguette .site-footer h3 { font-family: var(--font-head); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.2rem; color: var(--sun); }
.d-guinguette .brand-light .brand-mark { box-shadow: none; background: var(--primary); }
.d-guinguette .brand-light .brand-text strong { color: #fff; }

@media (max-width: 920px) {
  .d-guinguette .hero { padding: 60px 0 84px; }
  .d-guinguette .hl-item + .hl-item { border-left: 0; }
  .d-guinguette .hl-item { border-bottom: 2px dashed var(--line); }
  .d-guinguette .hl-item:nth-child(odd) { border-right: 2px dashed var(--line); }
  .d-guinguette .art-pill { scale: .75; }
}
@media (max-width: 560px) {
  .d-guinguette .hl-item:nth-child(odd) { border-right: 0; }
  .d-guinguette .hero-art { border-radius: 20px; }
  .d-guinguette .art-cross { width: 26%; }
  .d-guinguette .art-pill.p3 { display: none; }
  .d-guinguette .menu-board { padding: 64px 18px 28px; box-shadow: 5px 5px 0 var(--navy); }
  .d-guinguette .menu-board::before { left: -8px; right: -8px; }
  .d-guinguette .quote-form { padding: 22px 18px; box-shadow: 5px 5px 0 var(--navy); }
  .d-guinguette .hl-grid, .d-guinguette .about-art, .d-guinguette .cta { box-shadow: 5px 5px 0 var(--navy); }
  .d-guinguette .room-price { width: 74px; height: 74px; font-size: .82rem; }
}