/* KDO Étincelle — styles communs */
:root {
  --creme: #FFF8F1;
  --corail: #FF6B5B;
  --corail-fonce: #E8513F;
  --prune: #3D2C5E;
  --or: #F4B860;
  --or-fonce: #D9952F;

  --fond: var(--creme);
  --texte: #3D2C5E;
  --titre: #3D2C5E;
  --doux: rgba(61, 44, 94, .72);
  --carte: #FFFFFF;
  --bord: rgba(61, 44, 94, .1);
  --ombre: 0 10px 30px rgba(61, 44, 94, .12);
  --etincelle: #F4B860;

  --titres: "Fraunces", Georgia, "Times New Roman", serif;
  --textes: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1A1229;
    --texte: #F3EAF2;
    --titre: #FFF8F1;
    --doux: rgba(255, 248, 241, .72);
    --carte: #261B3B;
    --bord: rgba(255, 248, 241, .12);
    --ombre: 0 10px 30px rgba(0, 0, 0, .35);
    --etincelle: #F7C978;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--textes);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--titres); color: var(--titre); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
a { color: var(--corail); }
img, svg { display: block; max-width: 100%; }

/* ---------- Étincelles de fond ---------- */
.ciel { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ciel i {
  position: absolute;
  width: var(--t, 10px); height: var(--t, 10px);
  color: var(--etincelle);
  opacity: 0;
  animation: scintille var(--d, 5s) ease-in-out var(--r, 0s) infinite;
  will-change: opacity, transform;
}
.ciel i svg { width: 100%; height: 100%; }
@keyframes scintille {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  50% { opacity: var(--o, .7); transform: scale(1) rotate(45deg); }
}

/* ---------- Logo ---------- */
.logo { color: var(--titre); }
.logo .kdo { fill: none; stroke: var(--corail); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.logo .nom { fill: currentColor; font-family: var(--titres); font-style: italic; font-weight: 500; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 54px; padding: 0 1.6em;
  border: 0; border-radius: 999px;
  font: 700 1.05rem/1 var(--textes);
  text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, #FF7A6B, var(--corail-fonce));
  color: #fff;
  box-shadow: 0 8px 22px rgba(232, 81, 63, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.bouton:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(232, 81, 63, .42); }
.bouton:active { transform: scale(.97); }
.bouton:focus-visible, .bouton-doux:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
.bouton-doux {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 54px; padding: 0 1.4em; border-radius: 999px;
  font: 700 1.05rem/1 var(--textes); text-decoration: none; cursor: pointer;
  background: transparent; color: var(--titre);
  border: 2px solid var(--bord);
  -webkit-tap-highlight-color: transparent;
}
.bouton-doux:hover { border-color: var(--or); }
.bouton[disabled], .bouton[aria-disabled="true"] {
  background: var(--bord); color: var(--doux); box-shadow: none; cursor: not-allowed; transform: none;
}
.badge {
  display: inline-block; padding: .3em .7em; border-radius: 999px;
  background: var(--or); color: #3D2C5E;
  font: 700 .72rem/1 var(--textes); letter-spacing: .04em; text-transform: uppercase;
}

/* ---------- Mise en page générale ---------- */
.conteneur { position: relative; z-index: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.entete { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.entete .logo { width: 116px; }
.entete nav a { color: var(--doux); text-decoration: none; font-weight: 500; font-size: .95rem; }
.entete nav a:hover { color: var(--corail); }

.pied { position: relative; z-index: 1; text-align: center; padding: 40px 16px 32px; color: var(--doux); font-size: .9rem; }
.pied .logo { width: 84px; margin: 0 auto 10px; }
.pied a { color: var(--doux); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ciel i { opacity: .35; }
}