/* ===========================================================
   DA dédiée — Les 2 Rives
   D'après les affiches : crème · bleu marine · orange
   palmiers, guirlande de fanions, bouée, bandes ondulées.
   Chargée uniquement sur /les-2-rives (override de style.css)
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Mulish:wght@400;500;600;700;800&display=swap');

:root {
  --green:       #2d2e8b;   /* bleu marine (surfaces sombres) */
  --green-deep:  #21226b;
  --orange:      #d6532c;   /* orange vermillon (accent / CTA) */
  --orange-dark: #b8401d;
  --pink:        #f0a58c;   /* corail clair (liserés) */
  --pink-soft:   #f6e7d6;   /* sable chaud */
  --cream:       #fbf5e4;   /* crème (fond, comme les affiches) */
  --ink:         #21226b;   /* texte marine (très « affiche ») */
  --muted:       #5b5d86;
  --border:      #ece0c8;
  --shadow:      0 16px 36px rgba(33, 34, 107, 0.14);
  --shadow-lg:   0 28px 64px rgba(33, 34, 107, 0.24);

  /* vagues recolorées (crème) */
  --wave-top:    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2048'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20L1440,0%20L1440,26%20C1080,50%20360,2%200,26%20Z'%20fill='%23fbf5e4'/%3E%3C/svg%3E");
  --wave-bottom: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2048'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,48%20L1440,48%20L1440,22%20C1080,-2%20360,46%200,22%20Z'%20fill='%23fbf5e4'/%3E%3C/svg%3E");

  /* palmier marine (décor, façon affiche) */
  --palm-navy: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%20280'%3E%3Cg%20fill='%232d2e8b'%3E%3Cpath%20d='M104,278c-6-70-2-150,8-196l9,2c-9,46-13,124-9,194z'/%3E%3Cg%20transform='translate(113,82)'%3E%3Cpath%20transform='rotate(-180)'%20d='M0,0Q46,-13,86,-4Q70,0,86,4Q46,13,0,0Z'/%3E%3Cpath%20transform='rotate(-144)'%20d='M0,0Q46,-13,86,-4Q70,0,86,4Q46,13,0,0Z'/%3E%3Cpath%20transform='rotate(-108)'%20d='M0,0Q46,-13,86,-4Q70,0,86,4Q46,13,0,0Z'/%3E%3Cpath%20transform='rotate(-72)'%20d='M0,0Q46,-13,86,-4Q70,0,86,4Q46,13,0,0Z'/%3E%3Cpath%20transform='rotate(-36)'%20d='M0,0Q46,-13,86,-4Q70,0,86,4Q46,13,0,0Z'/%3E%3Cpath%20transform='rotate(0)'%20d='M0,0Q46,-13,86,-4Q70,0,86,4Q46,13,0,0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  /* guirlande de fanions marine + orange */
  --bunting: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='46'%20viewBox='0%200%2080%2046'%3E%3Cpath%20d='M0,6H80'%20stroke='%232d2e8b'%20stroke-width='3'%20fill='none'/%3E%3Cpath%20d='M6,6L34,6L20,40Z'%20fill='%232d2e8b'/%3E%3Cpath%20d='M46,6L74,6L60,40Z'%20fill='%23d6532c'/%3E%3C/svg%3E");

  /* bouée orange */
  --buoy: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Ccircle%20cx='50'%20cy='50'%20r='46'%20fill='%23d6532c'/%3E%3Crect%20x='43'%20y='4'%20width='14'%20height='92'%20fill='%23fff'/%3E%3Crect%20x='4'%20y='43'%20width='92'%20height='14'%20fill='%23fff'/%3E%3Ccircle%20cx='50'%20cy='50'%20r='23'%20fill='%23fbf5e4'/%3E%3C/svg%3E");
}

/* En-tête : bleu marine (le vert d'origine est codé en dur dans style.css) */
.site-header { background: rgba(33, 34, 107, 0.96); }

/* Titres un peu plus affirmés */
h1, h2, h3 { font-weight: 700 !important; }

/* Squiggle en vermillon (le squiggle global est codé en dur en vieil orange) */
.squiggle,
.section-head__title::after, .hero__title::after, .intro__title::after {
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='14'%20viewBox='0%200%20150%2014'%3E%3Cpath%20d='M2,8%20Q14,1%2026,8%20T50,8%20T74,8%20T98,8%20T122,8%20T146,8'%20fill='none'%20stroke='%23d6532c'%20stroke-width='3'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* ---------- Hero : guirlande + bouée + voile marine ---------- */
.hero__overlay { background: linear-gradient(180deg, rgba(33,34,107,.35), rgba(33,34,107,.72)); }
.hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 46px; z-index: 3;
  background: var(--bunting) repeat-x top center / auto 46px;
}
.hero__content { position: relative; }
.hero__content::after {
  content: ""; position: absolute; top: -10px; right: -10px; width: 78px; height: 78px;
  background: var(--buoy) no-repeat center / contain; filter: drop-shadow(0 6px 14px rgba(33,34,107,.35));
  transform: rotate(-8deg);
}
@media (max-width: 680px) { .hero__content::after { display: none; } }

/* ---------- Palmiers façon affiche sur les fonds crème ---------- */
.intro, .gallery, .infos { position: relative; overflow: hidden; }
.intro::before, .intro::after, .gallery::before, .infos::after {
  content: ""; position: absolute; bottom: -30px; width: 210px; height: 270px;
  background: var(--palm-navy) no-repeat center / contain; opacity: .9; pointer-events: none; z-index: 0;
}
.intro::before  { left: -70px; transform: scaleX(-1); }
.intro::after   { right: -70px; }
.gallery::before{ left: -80px; bottom: 40px; opacity: .12; }
.infos::after   { right: -80px; opacity: .14; }
.intro__inner, .gallery .container, .infos .container { position: relative; z-index: 1; }

/* ---------- Programmation : badges dates façon affiche ---------- */
.agenda .container::after { display: none !important; } /* on retire le filigrane palmier global */
.event { gap: 1.1rem; }
.event__date {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--orange); color: #fff; border-radius: 14px; padding: .5rem .65rem;
  min-width: 96px; line-height: 1.15; font-family: 'Fredoka', sans-serif; font-weight: 600;
}
.event__tag { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }

/* Liserés des blocs infos */
.infos__block { border-top-color: var(--orange); }
.infos__block--contact { border-top-color: var(--pink); }

/* Sur mobile : palmiers de la présentation en filigrane discret (ne gênent plus le texte) */
@media (max-width: 760px) {
  .intro::before, .intro::after { width: 130px; height: 165px; opacity: .12; bottom: -10px; }
  .intro::before { left: -50px; }
  .intro::after { right: -50px; }
}