/* ════════════════════════════════════════════════════════════════════════
   DOGGEN CLUB DE FRANCE — Composants & utilitaires statiques
   ──────────────────────────────────────────────────────────────────────────
   Ce fichier contient les classes de composants qui NE sont PAS
   recompilées via Tailwind. Il peut être édité à chaud sur OVH mutualisé.

   À charger après tailwind.css :
     <link rel="stylesheet" href="/css/tailwind.css">
     <link rel="stylesheet" href="/css/dcf-prestige.css">

   Tokens utilisés (cf. tailwind.config.js) :
     #1a1a2e (midnight)  #c9a840 (gold)  #c9a840 (gold) #faf8f4 (cream)
     #f5f1e8 (parchment) #e8e3d9 (stone) #1c1916 (ink)  #6b6560 (warm-gray)
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 1. TYPOGRAPHIE — classes sémantiques ─────────────────────────── */

.serif-display,
.display-serif,
.ann-serif,
.p-serif {
    font-family: 'Cormorant Garamond', Garamond, Georgia, 'Times New Roman', serif;
}

/* Surtitre or — la signature DCF */
.eyebrow {
    font-family: 'Figtree', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #c9a840;
}
.eyebrow--mute { color: #6b6560; }
.eyebrow--white { color: rgba(255, 255, 255, 0.6); }

/* Lede / chapeau italique — caractère éditorial */
.lede {
    font-family: 'Cormorant Garamond', Garamond, Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.55;
    color: #6b6560;
}
.lede--lg { font-size: 1.375rem; }

/* Drop cap éditorial pour les premiers paragraphes prestige */
.dcf-drop-cap::first-letter {
    font-family: 'Cormorant Garamond', Garamond, Georgia, serif;
    font-size: 4rem;
    font-weight: 600;
    line-height: 0.85;
    color: #c9a840;
    float: left;
    margin: 0.25rem 0.5rem 0 0;
}


/* ─── 2. LE FILET DORÉ — la signature visuelle DCF ─────────────────── */

.gold-rule {
    display: block;
    width: 3rem;
    height: 1px;
    background: #c9a840;
    flex-shrink: 0;
}
.gold-rule--short  { width: 1.5rem; }
.gold-rule--long   { width: 5rem; }
.gold-rule--center { margin-left: auto; margin-right: auto; }

/* Variante "double" — pour les pages institutionnelles (héros standard FCI) */
.gold-rule--double {
    height: 5px;
    background: transparent;
    border-top: 1px solid #c9a840;
    border-bottom: 1px solid #c9a840;
}

/* Combo avec eyebrow : <span class="gold-rule"></span><span class="eyebrow">…</span> */


/* ─── 3. BOUTONS — un seul système, deux variantes ──────────────────── */

.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.875rem;
    background: #c9a840;
    color: #1a1a2e;
    font-family: 'Figtree', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: 9999px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(201, 168, 64, 0.25);
    cursor: pointer;
}
.btn-gold:hover {
    background: #d8b955;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(201, 168, 64, 0.35);
}
.btn-gold:disabled,
.btn-gold[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.875rem;
    color: #c9a840;
    font-family: 'Figtree', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: 9999px;
    border: 1px solid rgba(201, 168, 64, 0.5);
    background: transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}
.btn-ghost:hover {
    background: #c9a840;
    color: #1a1a2e;
    border-color: #c9a840;
}

/* Variante sur fond clair : or plus foncé pour le contraste AA */
.btn-ghost--light {
    color: #a8892e;
    border-color: rgba(168, 137, 46, 0.45);
}
.btn-ghost--light:hover {
    background: #1a1a2e;
    color: #c9a840;
    border-color: #1a1a2e;
}


/* ─── 4. SECTIONS HÉROS — fond bleu nuit avec halos ────────────────── */

.dcf-hero {
    position: relative;
    background: #1a1a2e;
    color: white;
    overflow: hidden;
    isolation: isolate;
}
.dcf-hero::before {
    content: '';
    position: absolute;
    top: -200px;
    left: -200px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(201, 168, 64, 0.12) 0%, transparent 60%);
    z-index: -1;
    pointer-events: none;
}
.dcf-hero::after {
    content: '';
    position: absolute;
    bottom: -300px;
    right: -200px;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(201, 168, 64, 0.08) 0%, transparent 60%);
    z-index: -1;
    pointer-events: none;
}

/* Filigrane héraldique — à utiliser dans un héros qui contient :
   <svg class="dcf-watermark"><use href="#dcf-monogram"/></svg> */
.dcf-watermark {
    position: absolute;
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
    width: 700px;
    height: 700px;
    opacity: 0.04;
    color: #c9a840;
    z-index: 0;
    pointer-events: none;
}
@media (max-width: 900px) {
    .dcf-watermark {
        width: 500px;
        height: 500px;
        right: -150px;
        opacity: 0.06;
    }
}


/* ─── 5. CARTES ÉDITORIALES — bordure cohérente, hover doré ────────── */

.dcf-card {
    background: white;
    border: 1px solid #e8e3d9;
    border-radius: 8px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.dcf-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -10px rgba(26, 26, 46, 0.15);
    border-color: rgba(201, 168, 64, 0.4);
}

/* Variante avec barre dorée en haut au survol — pour les services */
.dcf-card--accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #c9a840;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.dcf-card--accent:hover::before {
    transform: scaleX(1);
}

/* Carte sur fond sombre */
.dcf-card--dark {
    background: #2a2940;
    border-color: rgba(201, 168, 64, 0.15);
    color: white;
}
.dcf-card--dark:hover {
    border-color: rgba(201, 168, 64, 0.5);
    background: #1f1f35;
}


/* ─── 6. BADGES & PILLS ────────────────────────────────────────────── */

.dcf-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-family: 'Figtree', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.dcf-badge--gold {
    background: rgba(201, 168, 64, 0.12);
    color: #a8892e;
    border: 1px solid rgba(201, 168, 64, 0.25);
}
.dcf-badge--gold-dark {
    background: rgba(201, 168, 64, 0.15);
    color: #c9a840;
    border: 1px solid rgba(201, 168, 64, 0.3);
}
.dcf-badge--neutral {
    background: rgba(232, 227, 217, 0.5);
    color: #6b6560;
    border: 1px solid #e8e3d9;
}


/* ─── 7. SECTIONS ─ FONDS & SÉPARATEURS ────────────────────────────── */

.dcf-section          { padding: 5rem 0; }
.dcf-section--sm      { padding: 3rem 0; }
.dcf-section--lg      { padding: 7rem 0; }
.dcf-section--cream   { background: #faf8f4; }
.dcf-section--parchment { background: #f5f1e8; }
.dcf-section--white   { background: white; border-top: 1px solid #e8e3d9; border-bottom: 1px solid #e8e3d9; }
.dcf-section--midnight { background: #1a1a2e; color: white; position: relative; overflow: hidden; }
.dcf-section--midnight::before {
    content: '';
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(201, 168, 64, 0.08) 0%, transparent 60%);
    pointer-events: none;
}


/* ─── 8. EN-TÊTE DE SECTION — pattern réutilisable ─────────────────── */

.dcf-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}
.dcf-section-header__eyebrow {
    font-family: 'Figtree', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #c9a840;
    display: block;
    margin-bottom: 1rem;
}
.dcf-section-header h2 {
    font-family: 'Cormorant Garamond', Garamond, Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.875rem, 2vw + 1rem, 2.625rem);
    line-height: 1.15;
    color: #1a1a2e;
    margin-bottom: 0;
    letter-spacing: -0.005em;
}
.dcf-section--midnight .dcf-section-header h2 { color: white; }
.dcf-section-header .gold-rule { margin: 1.25rem auto; }
.dcf-section-header__lede {
    font-family: 'Cormorant Garamond', Garamond, Georgia, serif;
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.55;
    color: #6b6560;
    max-width: 36em;
    margin: 0 auto;
}
.dcf-section--midnight .dcf-section-header__lede { color: rgba(255,255,255,0.7); }


/* ─── 9. PRESTIGE — overrides ciblés sur les pages clés ────────────── */

/* H1 héros homepage : applique automatiquement la display-serif si besoin */
.dcf-display-title {
    font-family: 'Cormorant Garamond', Garamond, Georgia, serif;
    font-weight: 600;
    font-size: clamp(2.75rem, 5vw + 1rem, 4.75rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
}
.dcf-display-title em {
    font-style: italic;
    font-weight: 500;
    color: #c9a840;
    display: block;
}


/* ─── 10. ANIMATIONS d'entrée — opt-in via class .anim-fade-up ─────── */

@keyframes dcfFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.anim-fade-up {
    opacity: 0;
    animation: dcfFadeUp 0.5s cubic-bezier(.2,.7,.2,1) forwards;
}
.anim-fade-up.delay-1 { animation-delay: 0.05s; }
.anim-fade-up.delay-2 { animation-delay: 0.1s; }
.anim-fade-up.delay-3 { animation-delay: 0.15s; }
.anim-fade-up.delay-4 { animation-delay: 0.2s; }
.anim-fade-up.delay-5 { animation-delay: 0.25s; }
.anim-fade-up.delay-6 { animation-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
    .anim-fade-up { opacity: 1; animation: none; }
}


/* ─── 11. ACCESSIBILITÉ — rappel WCAG AA ───────────────────────────── */

/* Focus visible homogène — accessibilité clavier */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #c9a840;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Sélection de texte aux couleurs DCF */
::selection {
    background: rgba(201, 168, 64, 0.3);
    color: #1a1a2e;
}