/*!
 * Espace Créole — Thème "Charte 2025"
 * Palette: Rose Alpinia #D53B62 / Soleil Doré #F2C073 / Sable #EAD0B1
 *          Écru #F6EBDD / Blanc Ivoire #FFFBF5 / Gris Foncé #413F3F
 * Encodage: UTF-8
 */

/* =========================
   1) Variables de marque
   ========================= */
:root{
  /* Palette officielle */
  --rose-alpinia:   #D53B62;
  --soleil-dore:    #F2C073;
  --sable-moyen:    #EAD0B1;
  --ecru-coquille:  #F6EBDD;
  --blanc-ivoire:   #FFFBF5;
  --gris-fonce:     #413F3F;

  /* Alias "brand" utilisés partout */
  --brand-primary:   var(--rose-alpinia);
  --brand-primary-600:#BD3457;   /* ~-10% */
  --brand-primary-700:#A42E4C;   /* ~-20% */
  --brand-secondary: var(--gris-fonce);
  --brand-accent:    var(--soleil-dore);
  --brand-accent-600:#E0B060;
  --brand-neutral-900: var(--gris-fonce);
  --brand-neutral-700: #5A5757;
  --brand-neutral-500: #8C8A8A;
  --brand-neutral-300: #D7D6D6;
  --brand-neutral-200: #EAE9E9;
  --brand-neutral-100: #F7F6F5;

  --brand-bg:     var(--blanc-ivoire);
  --brand-bg-alt: var(--ecru-coquille);

  /* Dégradés (rose ? doré) */
  --brand-grad-start: var(--rose-alpinia);
  --brand-grad-end:   var(--soleil-dore);

  /* Rayons & ombrages */
  --brand-radius-sm: .5rem;
  --brand-radius-md: .875rem;
  --brand-radius-lg: 1.25rem;
  --brand-shadow-sm: 0 1px 2px rgba(65,63,63,.06);
  --brand-shadow-md: 0 8px 24px rgba(65,63,63,.10);
  --brand-shadow-lg: 0 16px 42px rgba(65,63,63,.16);

  /* Typo */
  --font-heading: "The Seasons", "Playfair Display", Georgia, serif;
  --font-body: "Arsenal", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;

  /* Bootstrap bridge */
  --bs-primary: var(--brand-primary);
  --bs-secondary: var(--brand-secondary);
  --bs-success: #10B981;
  --bs-warning: #F59E0B;
  --bs-danger:  #EF4444;
  --bs-dark:    var(--brand-neutral-900);
  --bs-body-color: var(--brand-neutral-900);
  --bs-body-bg: var(--brand-bg);
}

/* =========================
   2) Polices auto-hébergées
   ========================= */
@font-face{
  font-family: "Arsenal";
  src: url("/fonts/Arsenal-Regular.woff2") format("woff2"),
       url("/fonts/Arsenal-Regular.ttf")   format("truetype"),
       url("../fonts/Arsenal-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Arsenal";
  src: url("/fonts/Arsenal-Bold.woff2") format("woff2"),
       url("/fonts/Arsenal-Bold.ttf")   format("truetype"),
       url("../fonts/Arsenal-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family:"The Seasons";
  src: url("/fonts/TheSeasons-Regular.woff2") format("woff2"),
       url("/fonts/TheSeasons-Regular.woff")  format("woff"),
       url("../fonts/fonnts.com-The-Seasons-.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}

/* =========================
   3) Règles globales
   ========================= */
html{ scroll-behavior:smooth }
body{
  font-family: var(--font-body);
  color: var(--brand-neutral-900);
  background: var(--brand-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,.display-1,.display-2,.display-3,.display-4{
  font-family: var(--font-heading);
  letter-spacing: .2px;
  color: var(--brand-secondary);
}
a{ color: var(--brand-primary) }
a:hover{ color: var(--brand-primary-700) }
small, .text-muted{ color: var(--brand-neutral-500) !important }

/* =========================
   4) Boutons (Bootstrap + génériques)
   ========================= */
.btn{
  border-radius: var(--brand-radius-sm);
  box-shadow: var(--brand-shadow-sm);
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:active{ transform: translateY(1px) }

.btn-primary{
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-600);
  --bs-btn-hover-border-color: var(--brand-primary-600);
  --bs-btn-active-bg: var(--brand-primary-700);
  --bs-btn-active-border-color: var(--brand-primary-700);
  --bs-btn-disabled-bg: var(--brand-neutral-300);
}
.btn-secondary{
  --bs-btn-bg: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-hover-bg: #2e2c2c;
  --bs-btn-hover-border-color: #2e2c2c;
}
.btn-accent{
  color:#1f2937 !important;
  background: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}
.btn-gradient{
  color:#fff !important;
  background-image: linear-gradient(135deg,var(--brand-grad-start),var(--brand-grad-end)) !important;
  border:0 !important;
  border-radius: var(--brand-radius-sm);
  box-shadow: var(--brand-shadow-md);
}

/* =========================
   5) Badges, alertes, chips
   ========================= */
.badge-brand{ background: var(--brand-primary) }
.badge-accent{ background: var(--brand-accent); color:#1f2937 }
.alert-brand{
  background: linear-gradient(135deg,#fff,rgba(213,59,98,.08));
  border-color: var(--brand-primary);
}
.chip, .cat-chip, .sm-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .75rem; border-radius:9999px;
  background: rgba(15,157,182,0); /* neutralisé : on force la charte dessous */
  background-color: rgba(15,157,182,.00);
  color: var(--brand-secondary) !important;
  border: 1px solid rgba(15,157,182,.00);
  box-shadow: var(--brand-shadow-sm);
  text-transform: uppercase; letter-spacing:.08em; font-weight:700;
}
.cat-chip:hover, .sm-pill:hover{
  background: var(--brand-primary) !important; color:#fff !important; 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;
}

/* =========================
   6) Cartes & blocs
   ========================= */
.card{
  border:0; border-radius: var(--brand-radius-md);
  box-shadow: var(--brand-shadow-md);
  background:#fff;
}
.card-header{
  background: var(--brand-bg-alt);
  border-bottom:1px solid var(--brand-neutral-200);
}
.card-title{ font-family: var(--font-heading); color: var(--brand-secondary) }
.card-footer{ background: var(--brand-bg-alt) }

/* =========================
   7) Navigation & dropdown
   ========================= */
.navbar{
  --bs-navbar-brand-color: var(--brand-secondary);
  --bs-navbar-hover-color: var(--brand-primary-700);
  --bs-navbar-color: var(--brand-secondary);
  box-shadow: var(--brand-shadow-sm);
}
.navbar-brand{ font-family: var(--font-heading) }

.navbar-underline .nav-link{ position:relative }
.navbar-underline .nav-link::after{
  content:""; position:absolute; left:.5rem; right:.5rem; bottom:.2rem;
  height:2px; background: transparent; transition: background-color .2s, transform .2s;
  transform:scaleX(0);
}
.navbar-underline .nav-link:hover::after,
.navbar-underline .nav-link.active::after{
  background: var(--brand-accent); transform:scaleX(1);
}

/* Dropdown ivoire + numérotation */
.dropdown-menu{
  --bs-dropdown-bg: var(--blanc-ivoire);
  border:1px solid rgba(65,63,63,.15);
  border-radius:12px; box-shadow: var(--brand-shadow-md);
  padding:.35rem .35rem; min-width: 520px;
  max-height:70vh; overflow-y:auto;
  counter-reset:item;
  font-family:"Arsenal",system-ui,sans-serif;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-primary) rgba(213,59,98,.12);
}
.dropdown-menu::-webkit-scrollbar{ width:10px }
.dropdown-menu::-webkit-scrollbar-track{ background:rgba(213,59,98,.08); border-radius:999px }
.dropdown-menu::-webkit-scrollbar-thumb{ background:var(--brand-primary); border-radius:999px }
.dropdown-menu::-webkit-scrollbar-thumb:hover{ background:var(--brand-primary-700) }
.dropdown-item{
  position:relative; padding:.5rem .75rem .5rem 3rem;
  text-transform:uppercase; letter-spacing:.06em; font-weight:600;
  color: var(--brand-secondary);
}
.dropdown-item::before{
  counter-increment:item;
  content: counter(item, decimal-leading-zero) ".";
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  color: rgba(65,63,63,.6); font-weight:700;
}
.dropdown-item:hover, .dropdown-item:focus{
  background: var(--ecru-coquille); color: var(--brand-secondary);
}

/* =========================
   8) Formulaires
   ========================= */
.form-control, .form-select{
  border-radius: .6rem;
  border-color: var(--brand-neutral-300);
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .2rem rgba(213,59,98,.15);
}

/* =========================
   9) Utilitaires rapides
   ========================= */
.grad-text{
  background-image: linear-gradient(90deg,var(--brand-grad-start),var(--brand-grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-brand       { background: var(--brand-primary)!important; color:#fff }
.bg-brand-weak  { background: rgba(213,59,98,.08)!important }
.text-brand     { color: var(--brand-primary)!important }
.text-accent    { color: var(--brand-accent)!important }
.rounded-lg     { border-radius: var(--brand-radius-lg)!important }
.shadow-brand   { box-shadow: var(--brand-shadow-lg)!important }

/* Titrage page index */
.sur-titre{
  font-family: var(--font-heading);
  text-transform: uppercase; letter-spacing:.05em;
  color: var(--brand-secondary); opacity:.9;
}
.titre-som{
  font-family: "Arsenal",system-ui,sans-serif;
  text-transform: uppercase; letter-spacing:.10em;
  color: var(--brand-secondary);
}
.sous-titre a{
  font-family: "Arsenal",system-ui,sans-serif;
  text-transform: uppercase; letter-spacing:.10em;
  color: var(--brand-accent); text-decoration: none;
}
.sous-titre a:hover{ color: var(--brand-primary) }
.section-title{ margin:0 0 .35rem }
.title-categ{
  font-family: "Arsenal",system-ui,sans-serif;
  text-transform: uppercase; letter-spacing:.10em;
  color: var(--brand-secondary); text-decoration: none;
  display:inline-block; transition: transform .25s ease, color .15s ease, background-color .15s ease;
}
.title-categ:hover{
  color:#fff; background: var(--brand-primary);
  padding:.05em .25em; border-radius:.25rem; transform: translateY(-1px);
}
.excsListLink{
  color: var(--brand-primary); text-decoration: none !important; font-weight: 500;
}
.excsListLink:hover{ color: var(--brand-secondary) }

/* Clignotement soft (ex: NOS EXCLUSIVITÉS) */
@keyframes clignote { 0%{opacity:1} 50%{opacity:.45} 100%{opacity:1} }
.clignote{ color: var(--brand-accent) !important; text-decoration: underline; animation: clignote 5.5s infinite }
.blink-fast{ animation-duration:2s !important }
.blink-slow{ animation-duration:5.5s !important }

/* =========================
   10) Compatibilité – ancien code
   (garantit la nouvelle palette même si style.css est chargé après)
   ========================= */
.text-rose, .text-rose-clair{ color: var(--brand-primary) !important }
.bg-rose, .bg-rose-clair{ background-color: var(--brand-primary) !important }
.text-gris, .text-mauve, .bg-mauve{ color: var(--brand-secondary) !important }
.bg-gris, .bg-marron{ background-color: var(--brand-secondary) !important }
.bg-sable{ background-color: var(--sable-moyen) !important }
.bg-ivoire{ background-color: var(--blanc-ivoire) !important }

/* Sous-menu exclusivités – forcer la charte (bleu turquoise neutralisé) */
#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{
  display:inline-block; padding:10px 14px; border-radius:999px;
  text-decoration:none !important; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  background: rgba(15,157,182,.10) !important;     /* visuel "pastille" doux */
  color: var(--brand-secondary) !important;
  border: 1px solid rgba(15,157,182,.25) !important;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
#sous-menu a:hover{ background: var(--brand-primary) !important; color:#fff !important; transform: translateY(-1px) }
#sous-menu a.is-active,
#sous-menu a.active,
#sous-menu li.active > a,
#sous-menu a[aria-current="true"]{
  background: var(--brand-accent) !important; color:#1f2937 !important; border-color: var(--brand-accent) !important;
}

/* Accessibilité */
:root{ --focus-ring: 0 0 0 .2rem rgba(242,192,115,.45) }
:focus-visible{ outline:none; box-shadow: var(--focus-ring) }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important }
}