/* inline.css — Styles personnalisés Cocoon® (CSS variables, classes utilitaires propres au site).
   Extrait des index*.php pour mutualisation entre les 3 langues. */

:root {
      --c-text: #3A4148;
      --c-cream: #F4F1EE;
      --c-primary: #6B2E6B;
      --c-secondary: #4BA8D4;
      --c-tertiary: #2E6C87;
      --c-soft: #B862B8;
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      color: var(--c-text);
      -webkit-font-smoothing: antialiased;
    }
    .font-script { font-family: 'Pinyon Script', cursive; }
    .font-editorial { font-family: 'Cormorant Garamond', Georgia, serif; }
    .bg-cream { background-color: var(--c-cream); }
    .bg-dark { background-color: var(--c-text); }
    .bg-primary { background-color: var(--c-primary); }
    .text-primary { color: var(--c-primary); }
    .text-tertiary { color: var(--c-tertiary); }
    .border-primary { border-color: var(--c-primary); }
    a, button { transition: all 0.25s ease; }
    .btn-primary { background: var(--c-primary); color: #fff; }
    .btn-primary:hover { background: #5A2659; transform: translateY(-1px); box-shadow: 0 10px 25px -5px rgba(107, 46, 107, 0.35); }
    .btn-outline { border: 2px solid var(--c-primary); color: var(--c-primary); }
    .btn-outline:hover { background: var(--c-primary); color: #fff; }
    .link-primary { color: var(--c-primary); }
    .link-primary:hover { color: var(--c-soft); }
    .hero-decoration {
      background:
        radial-gradient(circle at 70% 30%, rgba(107, 46, 107, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(75, 168, 212, 0.08) 0%, transparent 50%);
    }
    .section-title em { font-style: italic; color: var(--c-primary); }
    .cta-gradient { background: linear-gradient(135deg, #2E6C87 0%, #6B2E6B 100%); }

    /* ─── Tarifs : grille avec image Paris à droite en desktop ─── */
    .tarifs-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      align-items: start;
    }
    @media (min-width: 768px) {
      .tarifs-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
        gap: 3rem;
      }
    }
    @media (min-width: 1024px) {
      .tarifs-grid { gap: 3.5rem; }
    }

    /* Logo intégré : nautilus + "Cocoon" en SVG unifié */
    .logo-cocoon { display: inline-block; vertical-align: middle; height: 48px; }
    .logo-cocoon-lg { height: 72px; }
    .logo-cocoon-sm { height: 36px; }

    /* ─── Tableaux cliquables (lien vers site d'exposition) ─── */
    .painting-link {
      display: block;
      position: relative;
      overflow: hidden;
    }
    .painting-link img { transition: transform 0.4s ease; }
    .painting-link:hover img { transform: scale(1.03); }
    .painting-link::after {
      content: "Voir l'œuvre ↗";
      position: absolute;
      bottom: 10px; right: 10px;
      background: rgba(255,255,255,0.95);
      color: var(--c-primary);
      font-family: 'Inter', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 0.35rem 0.7rem;
      border-radius: 999px;
      opacity: 0;
      transform: translateY(6px);
      transition: all 0.25s ease;
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }
    .painting-link:hover::after { opacity: 1; transform: translateY(0); }

/* ─── Compense classes display Tailwind manquantes dans le compilé ─── */
@media (min-width: 1024px) {
  .lg\:hidden { display: none !important; }
}

.gap-0\.5 { gap: 0.125rem; }

/* ─── Galeries 2-photos : hauteur fixe uniforme (cohérence visuelle) ─── */
/* .h-64 manquait dans le Tailwind compilé → images à ratio naturel,         */
/* hauteurs incohérentes entre blocs. On fixe 360px ; object-cover recadre.  */
/* Les 6 photos (Meysonniers, Vallée Rose, Siripanna) sont alignées.         */
.h-64 { height: 360px; }