/* =======================
   Charte Créole Beach
   ======================= */
:root{
  /* Palette */
  --rose-alpinia:   #D53B62;
  --soleil-dore:    #F2C073;
  --sable-moyen:    #EAD0B1;
  --ecru-coquille:  #F6EBDD;
  --blanc-ivoire:   #FFFBF5;
  --gris-fonce:     #413F3F;

  /* Alias de marque */
  --brand-primary:   var(--rose-alpinia);
  --brand-accent:    var(--soleil-dore);
  --brand-secondary: var(--gris-fonce);
  --brand-surface:   var(--blanc-ivoire);
  --brand-muted:     var(--sable-moyen);

  /* Gradients / déco */
  --brand-grad-start: var(--rose-alpinia);
  --brand-grad-end:   var(--soleil-dore);

  /* UI tokens */
  --radius: 14px;
  --shadow: 0 8px 24px rgba(65,63,63,.12);
}

/* ===== Reset typographique */
html{ scroll-behavior:smooth }
body{
  background: var(--blanc-ivoire);
  color: var(--gris-fonce);
  font-family: "Arsenal", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400; line-height: 1.6; font-size: 15px;
}

/* Anciennes familles (Verdana/Montserrat) -> laissent la main à Arsenal */
h1,h2,h3,.titre-som{
  font-family:"Arsenal", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--brand-secondary);
  margin-top: .5rem;
}
.sur-titre{
  font-family:"TheSeasons","Playfair Display","Times New Roman",serif;
  letter-spacing:.05em; text-transform:none; color:var(--brand-secondary);
}

/* Liens */
a{ color: var(--brand-primary); text-decoration: none }
a:hover{ color: var(--brand-secondary); text-decoration: none }

/* Boutons (CTA) */
.btn, .btn-primary, .cta{
  --_bg: var(--brand-primary);
  --_fg: #fff;
  background: var(--_bg);
  color: var(--_fg) !important;
  border: 0;
  border-radius: var(--radius);
  padding: .65rem 1.05rem;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: var(--shadow);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover, .btn-primary:hover, .cta:hover{
  transform: translateY(-1px); filter: brightness(.98);
  box-shadow: 0 10px 28px rgba(65,63,63,.16);
}
.btn-accent{ --_bg: var(--brand-accent); --_fg:#1f2937 }
.btn-dark{ --_bg: var(--brand-secondary) }

/* Pastilles “chips” catégories / sous-menu */
.cat-chip, .sm-pill{
  display:inline-block; padding:8px 14px; border-radius:999px;
  background: rgba(15,157,182,.10);
  color: var(--brand-secondary);
  border: 1px solid rgba(15,157,182,.25);
  text-transform: uppercase; letter-spacing:.08em; font-weight:700;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.cat-chip:hover, .sm-pill:hover{ background: var(--brand-primary); color:#fff; transform: translateY(-1px) }
.cat-chip.is-active, .sm-pill.is-active, #sous-menu a.active, #sous-menu li.active>a{
  background: var(--brand-accent) !important; color:#1f2937 !important; border-color:var(--brand-accent) !important;
}

/* Cartes produits */
.product-card, .card{
  border: 0; border-radius: var(--radius); box-shadow: var(--shadow);
  background:#fff; overflow:hidden;
}
.card-body h2.card-title{ min-height:unset; font-size:1.4rem; text-align:center }

/* Bannière / photos */
.photo-activite{
  background-size: cover; background-position:center; background-repeat:no-repeat;
  max-height: 320px; border: 0; border-bottom: 2px solid rgba(65,63,63,.08);
}

/* Blocs alternés catégories */
.categ{ padding:2% }
.odd-categ{ background: var(--ecru-coquille) }

/* Titres “étiquettes” alternés gradient / doré */
.title-chip{
  display:inline-block; padding:.2em .6em; border-radius:.5rem;
  font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.1em;
  transition: transform .25s ease, filter .15s ease;
}
.title-chip.gradient{ background-image: linear-gradient(135deg,var(--brand-grad-start),var(--brand-grad-end)) }
.title-chip.accent{ background: var(--brand-accent); color:#1f2937 }
.title-chip:hover{ transform: translateY(-1px); filter: brightness(.98) }

/* Clignotement soft */
@keyframes clignote { 0%{opacity:1} 50%{opacity:.45} 100%{opacity:1} }
.blink-slow{ animation: clignote 5.5s infinite }
.blink-fast{ animation: clignote 2.2s infinite }

/* Texte courant d’articles (maquette) */
.texte-courant{ letter-spacing:0 }

/* Traits pointillés décoratifs */
.rule-dashed{
  height:2px; background-image: repeating-linear-gradient(90deg, rgba(65,63,63,.38), rgba(65,63,63,.38) 10px, transparent 10px, transparent 22px);
  background-repeat:repeat-x; background-size:auto 2px;
}

/* Textures – place tes fichiers ici si tu en as */
:root{
  --texture-sable: url("/img/textures/texture-sable-clair.jpg");
  --texture-rose:  url("/img/textures/texture-rose.jpg");
  --texture-dore:  url("/img/textures/texture-dore.jpg");
}
.texture-sable{ background: var(--blanc-ivoire); background-image: var(--texture-sable); background-size:cover; background-position:center }
.texture-rose { background: var(--rose-alpinia);  background-image: var(--texture-rose);  background-blend-mode:multiply; color:#fff }
.texture-dore { background: var(--soleil-dore);   background-image: var(--texture-dore);  background-blend-mode:multiply }

/* Utilitaires mapping (compatibilité avec tes anciennes classes) */
.text-rose, .text-rose-clair{ color: var(--rose-alpinia) !important }
.bg-rose, .bg-rose-clair{ background-color: var(--rose-alpinia) !important }
.text-gris, .bg-mauve, .text-mauve{ color: var(--gris-fonce) !important }
.bg-gris, .bg-marron{ background-color: var(--gris-fonce) !important }
.bg-sable{ background-color: var(--sable-moyen) !important }
.bg-ivoire{ background-color: var(--blanc-ivoire) !important }

/* Menus horizontaux */
#menu-centre{ list-style:none; padding:0; margin:.75rem auto 0; display:flex; flex-wrap:wrap; gap:.5rem .75rem; justify-content:center }
#menu-centre li{ margin:0 }
#menu-centre li a{ font-weight:700; letter-spacing:.08em }

/* Sous-menu (nettoyage des restes Bootstrap “danger/rose”) */
#sous-menu{ list-style:none; margin:.75rem 0 1rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1rem }
#sous-menu, #sous-menu *{ background-image:none !important; box-shadow:none !important }
#sous-menu li{ margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important }
#sous-menu a{ composes: sm-pill; } /* (si ton bundler ne gère pas composes, garde simplement .sm-pill sur les <a>) */

/* Divers */
.iframe-container{ position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden }
.iframe-container iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

@media (max-width: 576px){
  header h1{ font-size:1rem } header img{ height:40px }
}