/* ============================================================
   Palette validée : Bleu très foncé & tons sel / sable
   Côte & Sable — Maison de caractère
   ============================================================ */
:root {
  /* ── Couleurs principales ── */
  --cyc-bleu-principal:  #16304A;   /* Accent principal — utilisé comme fallback partout */
  --cyc-header-bg:       #0B1624;   /* Header / footer */
  --cyc-footer-bg:       #0B1624;
  --cyc-texte-fonce:     #08111C;   /* Texte principal */
  --cyc-bleu-bouton:     #1B3958;   /* Survol / bouton secondaire */

  /* ── Tons sable / sel ── */
  --cyc-sable:           #E8DECF;   /* Fond sable global */
  --cyc-sable-doux:      #D8C5A6;   /* Blocs chaleureux / séparateurs */
  --cyc-beige-mineral:   #C9B28E;   /* Beige minéral */

  /* ── Ancien mapping conservé pour compatibilité Tailwind ── */
  --cyc-cuivre:          #C9B28E;   /* remplace le cuivre chaud → beige minéral */

  /* ── Typographies ── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter Tight', system-ui, sans-serif;

  --header-height: 0px;
}

/* --- Reset / Base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* ✅ CORRECTION RESPONSIVE : toutes les images s'adaptent à leur conteneur */
img {
  max-width: 100%;
  height: auto;
}

/* --- Typographie ---------------------------------------------------------- */
.font-display { font-family: var(--font-display); }
.font-logo    { font-family: var(--font-display); font-optical-sizing: auto; }

h1, .h1 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; color: var(--cyc-texte-fonce); }
h2, .h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; color: var(--cyc-bleu-principal); }
h3, .h3 { font-size: 1rem; font-weight: 600; color: var(--cyc-bleu-principal); }

/* Logo Cyclotropic 974 — version v11 image maximisée dans le cercle */
.cyc-brand {
  position: relative;
  isolation: isolate;
  gap: 14px;
  margin-left: -10px;
}

.cyc-brand::before {
  content: none;
}

.cyc-brand-mark-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0;
  overflow: hidden;
  background: #E8DECF;
  border: 3px solid #9b5647;
  box-shadow:
    0 4px 16px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.04) inset;
}

.cyc-brand-mark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  transform: scale(1.34);
  transform-origin: center;
  filter: none;
}

.cyc-brand-copy {
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .cyc-brand {
    gap: 16px;
    margin-left: -12px;
  }

  .cyc-brand-mark-wrap {
    width: 82px;
    height: 82px;
  }

  .cyc-brand-mark {
    transform: scale(1.35);
  }
}

@media (min-width: 1024px) {
  .cyc-brand {
    margin-left: -16px;
  }

  .cyc-brand-mark-wrap {
    width: 92px;
    height: 92px;
  }

  .cyc-brand-mark {
    transform: scale(1.36);
  }
}