:root {
            /* Palette Noire Élégante */
            --primary-color: #0A0A0A;
            --secondary-color: #1A1A1A;
            --accent-color: #D4AF37;
            --text-dark: #FFFFFF;
            --text-light: #B8B8B8;
            --white: #FFFFFF;
            --glass-bg: rgba(0, 0, 0, 0.4);
            --glass-border: rgba(255, 255, 255, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Navigation */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(20px);
            z-index: 1000;
            border-bottom: 1px solid var(--glass-border);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        .nav-brand h1 {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 400;
            color: var(--accent-color);
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-link {
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 400;
            transition: color 0.3s ease;
            position: relative;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--accent-color);
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background: var(--accent-color);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }

        .hamburger span {
            width: 25px;
            height: 2px;
            background: var(--text-dark);
            margin: 3px 0;
            transition: 0.3s;
        }

        /* Navigation adjustments for shop page */
        .cart-icon {
            position: relative;
            cursor: pointer;
            font-size: 1.5rem;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: transform 0.3s ease;
            order: 1;
        }

        /* Couleur par défaut + hover */
.nav-menu a.nav-link {
  color: var(--text-dark);
  text-decoration: none;
  position: relative;
  transition: color .25s ease;
}
.nav-menu a.nav-link:hover { color: var(--accent-color); }

/* Soulignement animé façon “after” (optionnel) */
.nav-menu a.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--accent-color);
  transition: width .25s ease;
}
.nav-menu a.nav-link:hover::after,
.nav-menu .current-menu-item > a::after,
.nav-menu .current_page_item > a::after,
.nav-menu .current-menu-ancestor > a::after,
.nav-menu a.nav-link.is-active-link::after { width: 100%; }

/* Liens actifs en or */
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a,
.nav-menu .current-menu-ancestor > a,
.nav-menu a.nav-link.is-active-link {
  color: var(--accent-color);
}

/* Mobile panel (reprend ton style) */
@media (max-width: 768px) {
  .nav-menu {
    display: none;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    right: 20px; top: 64px;
    background: rgba(0,0,0,0.95);
    border: 1px solid var(--glass-border);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    z-index: 1001;
  }
  .nav-menu.active { display: flex; }
  .no-scroll { overflow: hidden; }
}


        /* Hero Section */
        .hero {
            padding: 120px 20px 80px;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
        }

        .hero-content {
            text-align: center;
            max-width: 600px;
            z-index: 2;
            position: relative;
        }

        .hero-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: var(--text-dark);
            animation: fadeInUp 1s ease;
        }

        .hero-subtitle {
            font-size: 1.2rem;
            color: var(--text-light);
            margin-bottom: 2.5rem;
            animation: fadeInUp 1s ease 0.3s both;
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            animation: fadeInUp 1s ease 0.6s both;
        }

        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary {
            background: var(--accent-color);
            color: white;
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
        }

        .btn-secondary {
            background: transparent;
            color: var(--text-dark);
            border: 2px solid var(--accent-color);
        }

        .btn-secondary:hover {
            background: var(--accent-color);
            color: white;
            transform: translateY(-2px);
        }

        .btn-outline {
            background: transparent;
            color: var(--accent-color);
            border: 2px solid var(--accent-color);
        }

        .btn-outline:hover {
            background: var(--accent-color);
            color: white;
            transform: translateY(-2px);
        }

        /* Floating Pearls Animation */
        .hero-visual {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .floating-pearls {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .pearl {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), rgba(212, 175, 55, 0.4));
            backdrop-filter: blur(5px);
            animation: float 6s ease-in-out infinite;
        }

        .pearl-1 {
            width: 20px;
            height: 20px;
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .pearl-2 {
            width: 15px;
            height: 15px;
            top: 60%;
            right: 15%;
            animation-delay: 2s;
        }

        .pearl-3 {
            width: 25px;
            height: 25px;
            top: 80%;
            left: 20%;
            animation-delay: 4s;
        }

        .pearl-4 {
            width: 18px;
            height: 18px;
            top: 30%;
            right: 30%;
            animation-delay: 1s;
        }

        .pearl-5 {
            width: 12px;
            height: 12px;
            top: 70%;
            right: 40%;
            animation-delay: 3s;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }

        /* Sections */
        .presentation,
        .gallery-preview,
        .shop-preview {
            padding: 80px 0;
            background: var(--primary-color);
        }

        .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .section-header h3 {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 1rem;
        }

        .section-header p {
            font-size: 1.1rem;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }

        /* Glass Cards */
        .glass {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
        }

        .presentation-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .presentation-card {
            padding: 2.5rem 2rem;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .presentation-card:hover {
            transform: translateY(-10px);
        }

        .card-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
        }

        .presentation-card h4 {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

        .presentation-card p {
            color: var(--text-light);
            line-height: 1.6;
        }

        /* Gallery Preview */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .gallery-item {
            aspect-ratio: 1;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
            transition: transform 0.3s ease;
            cursor: pointer;
        }

        .gallery-item:hover {
            transform: scale(1.05);
        }

        .gallery-placeholder {
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            color: var(--text-dark);
            position: relative;
        }

        .gallery-placeholder::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(212,175,55,0.1) 0%, rgba(255,255,255,0.05) 100%);
        }

        .gallery-cta {
            text-align: center;
        }

        /* Shop Preview */
        .shop-preview {
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(20px);
        }

        .shop-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        .shop-text h3 {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            color: var(--text-dark);
            margin-bottom: 1.5rem;
        }

        .shop-text p {
            font-size: 1.1rem;
            color: var(--text-light);
            margin-bottom: 2rem;
            line-height: 1.7;
        }

        .coming-soon {
            margin-bottom: 2rem;
        }

        .badge {
            background: var(--accent-color);
            color: white;
            padding: 8px 16px;
            border-radius: 25px;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .shop-visual {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .mockup-container {
            position: relative;
        }

        .phone-mockup {
            width: 250px;
            height: 450px;
            background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
            border-radius: 25px;
            border: 3px solid var(--glass-border);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .phone-mockup::before {
            content: '📱';
            font-size: 4rem;
            opacity: 0.3;
        }

        /* Footer */
        .footer {
            background: var(--primary-color);
            color: var(--text-dark);
            padding: 3rem 0 1rem;
            border-top: 1px solid var(--glass-border);
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .footer-brand h4 {
            font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            color: var(--accent-color);
            margin-bottom: 1rem;
        }

        .footer-links ul {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 0.5rem;
        }

        .footer-links a,
        .social-link {
            color: var(--text-light);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-links a:hover,
        .social-link:hover {
            color: var(--accent-color);
        }

        .social-links {
            display: flex;
            gap: 1rem;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid #444;
            color: #ccc;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hamburger {
                display: flex;
            }
            
            .nav-menu {
                display: none;
            }
            
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .shop-content {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .presentation-grid {
                grid-template-columns: 1fr;
            }
            
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

/* ====== Page “propre” Crearocailles ====== */
.cc-page{
  max-width: 980px;
  margin: 40px auto 80px;
  padding: 0 20px;
}

.cc-page-head{
  margin: 0 0 22px;
}

.cc-title{
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  color: #f5d36c;
  margin: 0 0 10px;
  letter-spacing: .2px;
  text-shadow: 0 1px 0 #000;
}

.cc-lead{
  color:#cfcfcf;
  font-size: clamp(16px, 1.6vw, 18px);
  opacity:.9;
  margin: 0;
}

/* Corps du texte */
.cc-prose{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: clamp(18px, 2.5vw, 26px);
  color:#ddd;
  line-height: 1.7;
}

/* Typographie & rythme */
.cc-prose > * + *{ margin-top: 1em; }
.cc-prose p{ margin: .8em 0; }
.cc-prose a{
  color:#f5d36c;
  text-underline-offset: 2px;
}
.cc-prose a:hover{ color:#fff1b0; }

.cc-prose h2, .cc-prose h3, .cc-prose h4{
  margin: 1.6em 0 .6em;
  color:#f2e4b3;
  line-height:1.25;
  text-shadow: 0 1px 0 #000;
}
.cc-prose h2{ font-size: clamp(22px, 2.4vw, 28px); border-bottom:1px solid rgba(245,211,108,.18); padding-bottom:.3em; }
.cc-prose h3{ font-size: clamp(19px, 2vw, 22px); }
.cc-prose h4{ font-size: clamp(17px, 1.8vw, 19px); }

.cc-prose hr{
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,211,108,.35), transparent);
  margin: 2em 0;
}

/* Listes */
.cc-prose ul{ padding-left: 1.2em; }
.cc-prose ol{ padding-left: 1.4em; }
.cc-prose li{ margin:.35em 0; }
.cc-prose ul li::marker{ color:#f5d36c; }

/* Citations & code */
.cc-prose blockquote{
  margin: 1em 0;
  padding: .9em 1.1em;
  border-left: 3px solid #f5d36c;
  background: rgba(255,255,255,.03);
  color:#e9e3cf;
  border-radius: 8px;
}
.cc-prose code, .cc-prose kbd{
  background:#101010;
  border:1px solid rgba(255,255,255,.08);
  padding:.15em .45em;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.95em;
}

/* Tableaux */
.cc-prose table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
}
.cc-prose th, .cc-prose td{
  padding:.6em .75em;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cc-prose thead th{
  background: rgba(245,211,108,.08);
  color:#f5d36c;
  font-weight:600;
}
.cc-prose tbody tr:nth-child(even){ background: rgba(255,255,255,.02); }

/* Images & figures */
.cc-prose img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.cc-prose figure{ margin: 1.2em 0; }
.cc-prose figcaption{
  font-size:.9em;
  color:#bfbfbf;
  text-align:center;
  margin-top:.5em;
  opacity:.85;
}

/* Callouts (astuce/info/alerte) — optionnel */
.cc-note, .cc-info, .cc-warning{
  padding:.9em 1em;
  border-radius:10px;
  border:1px solid;
}
.cc-note{ background:rgba(245,211,108,.08); border-color:rgba(245,211,108,.35); color:#f5d36c; }
.cc-info{ background:rgba(120,180,255,.08); border-color:rgba(120,180,255,.35); color:#cae1ff; }
.cc-warning{ background:rgba(255,120,120,.08); border-color:rgba(255,120,120,.35); color:#ffc9c9; }

/* Boutons générés par éditeur/shortcodes éventuels */
.cc-prose .button, .cc-prose .wp-block-button__link{
  background: linear-gradient(180deg, #f5d36c, #e8b93e);
  color:#111 !important;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-prose .wp-block-button__link:hover{ filter: brightness(1.05); }

/* Plugins de partage (icônes) — harmonisation rapide */
.cc-prose .sharedaddy, .entry-content .sharedaddy{
  margin-top: 1rem;
}



/* ========== Variables & bases ========= */
:root{
  --bg:#0e0e0f;
  --panel:#151516;
  --panel-2:#1b1c1d;
  --text:#e9e9ea;
  --muted:#a2a2a6;
  --line:rgba(255,255,255,.06);
  --gold:#e7c875;           /* or doux */
  --gold-2:#ccad53;         /* survol/ombre */
  --shadow:0 10px 35px rgba(0,0,0,.35);
}

.site-main{color:var(--text)}
a{color:var(--gold);text-decoration:none}
a:hover{color:#fff}

/* ========== Containers & sections ========= */
.container{max-width:1100px;margin:0 auto;padding:0 22px}
.section{padding:56px 0}
.section-head{text-align:center;margin-bottom:28px}
.section-title{font-size:32px;line-height:1.2;margin:0 0 8px}
.section-sub{color:var(--muted);margin:0}

/* ========== HERO ========= */
.hero{position:relative;padding:110px 0 90px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));}
.hero-title{font-size:48px;line-height:1.15;margin:0 0 14px}
.hero-sub{color:var(--muted);margin:0 0 22px}
.hero-cta{display:flex;gap:12px;justify-content:center}
@media (max-width:640px){
  .hero-title{font-size:36px}
  .hero-cta{flex-wrap:wrap}
}

/* petites étincelles décoratives */
.hero-sparkle{position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,var(--gold),transparent 60%);opacity:.6}
.hero-sparkle-1{top:26px;left:8%}
.hero-sparkle-2{top:52%;right:14%}
.hero-sparkle-3{bottom:18%;left:22%}

/* ========== Boutons ========= */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:10px 16px;font-weight:600;line-height:1;border:1px solid var(--line);background:transparent;color:var(--text);box-shadow:none;transition:.2s}
.btn:hover{border-color:rgba(255,255,255,.18);transform:translateY(-1px)}
.btn.btn-gold{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#151515;border:none;box-shadow:0 6px 18px rgba(231,200,117,.28)}
.btn.btn-gold:hover{filter:saturate(1.05) brightness(1.05)}
.btn.btn-ghost{border:1px solid var(--gold);color:var(--gold)}
.btn.btn-ghost:hover{background:rgba(231,200,117,.08);color:#fff}
.btn.pill{padding:7px 12px;border-radius:999px;border:1px solid var(--line)}

/* ========== Features (3 cartes) ========= */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:630px){.feature-grid{grid-template-columns:1fr}}
.feature-card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:var(--shadow);
}
.feature-icon{font-size:22px;line-height:1;margin-bottom:6px}
.feature-title{font-size:18px;margin:0 0 4px}
.feature-text{color:var(--muted);margin:0}

/* ========== Cartes (dernières créations) ========= */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:980px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards-grid{grid-template-columns:1fr}}

.card{
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
}
.card-media{display:block;aspect-ratio:16/10;background:#0c0c0d}
.card-img{width:100%;height:100%;object-fit:cover;display:block}
.card-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#191a1b,#121213)}
.card-body{padding:14px 14px 12px}
.card-title{font-size:18px;margin:6px 0 6px}
.card-title a{color:#fff}
.entry-excerpt{color:var(--muted);margin:0 0 12px}
.card-meta{display:flex;justify-content:space-between;align-items:center;gap:10px}
.post-date{font-size:12px;color:var(--muted)}

/* Badges / pills */
.badge,.pill{display:inline-flex;align-items:center;border-radius:999px;font-size:12px;font-weight:600}
.badge{padding:4px 8px;background:rgba(231,200,117,.1);color:var(--gold);border:1px solid rgba(231,200,117,.25)}
.pill{padding:6px 10px;border:1px solid var(--line);color:var(--text)}
.pill-success{background:rgba(114,201,130,.14);color:#8ee19f;border:1px solid rgba(114,201,130,.28)}

/* ========== Section actions ========= */
.section-actions{display:flex;justify-content:center;margin-top:16px}

/* ========== Bloc Boutique (split) ========= */
.shop-split{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
@media (max-width:900px){.shop-split{grid-template-columns:1fr}}
.shop-col{min-width:0}
.shop-badges{display:flex;gap:8px;margin:10px 0}
.shop-actions{margin-top:10px}
.mock-img,.mock-ph{
  width:100%;border-radius:22px;border:1px solid var(--line);
  background:linear-gradient(140deg,#1b1c1d,#0f1011 70%);aspect-ratio:9/16;
  box-shadow:var(--shadow);
}

/* ========== Fins de page & utilitaires ========= */
.muted{color:var(--muted)}
/* harmonise les listes par défaut dans cette page */
.site-main .feature-card ul,
.site-main .entry-excerpt ul{margin:8px 0 0 18px}


/* Perles décoratives (parallax) */
.hero { position: relative; overflow: hidden; }
.pearl{
  position:absolute; z-index:0;
  width:14px; height:14px; border-radius:50%;
  background:
    radial-gradient(40% 40% at 35% 35%, rgba(255,255,255,.9), rgba(255,255,255,.15) 60%),
    radial-gradient(80% 80% at 65% 65%, rgba(231,200,117,.35), rgba(0,0,0,.0) 70%);
  box-shadow:
    0 0 12px rgba(231,200,117,.18),
    inset 0 1px 2px rgba(255,255,255,.5);
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform .2s linear;
  opacity:.9;
}
.pearl::after{
  content:"";
  position:absolute; inset:-8px; border-radius:50%;
  background: radial-gradient(circle, rgba(231,200,117,.14), transparent 60%);
  filter: blur(4px);
  z-index:-1;
}
/* Variantes de tailles si besoin */
.pearl[data-size="sm"] { width:10px; height:10px; }
.pearl[data-size="lg"] { width:18px; height:18px; }

/* ========= Page Contact ========= */
.page-contact .container,
.page-id-contact .container { /* au cas où */
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 28px);
}

/* Carte centrale */
.page-contact .contact-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  padding: clamp(18px, 3.2vw, 32px);
}

/* Titre */
.page-contact h1{
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1;
  margin: 0 0 18px;
  color: #f2e6c0;
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
}

/* Sous-texte / accroche */
.page-contact .lead{
  color: #c8c8c8;
  margin-bottom: 18px;
}

/* Barre de partage (plugin flottant à gauche) : garder visible mais ne pas gêner */
.page-contact .contact-card{ position: relative; }
.page-contact .contact-card::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
}
.addtoany_share_save_container{ z-index: 30; } /* si tu utilises AddToAny */

/* Champs de formulaire — Contact Form 7, WPForms & génériques */
.page-contact .wpcf7,
.page-contact .wpforms-container,
.page-contact form{
  margin-top: 14px;
}

/* Labels */
.page-contact label{
  display: block;
  font-weight: 600;
  color: #e8e8e8;
  margin: 12px 0 6px;
}

/* Inputs / textareas */
.page-contact input[type="text"],
.page-contact input[type="email"],
.page-contact input[type="url"],
.page-contact input[type="tel"],
.page-contact input[type="search"],
.page-contact input[type="number"],
.page-contact textarea,
.page-contact select,
.page-contact .wpforms-field input,
.page-contact .wpforms-field textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,10,.7);
  color: #f4f4f4;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.page-contact textarea{
  min-height: 160px;
  resize: vertical;
}

/* Focus état */
.page-contact input:focus,
.page-contact textarea:focus,
.page-contact select:focus{
  border-color: rgba(245, 200, 90, .7);
  box-shadow: 0 0 0 3px rgba(245, 200, 90, .18);
  background: rgba(18,18,18,.85);
}

/* Erreurs (CF7 / WPForms) */
.page-contact .wpcf7-not-valid-tip,
.page-contact .wpforms-error{
  color: #ffb3b3;
  font-size: 13px;
  margin-top: 6px;
}
.page-contact .wpcf7-response-output{
  margin-top: 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: #eaeaea;
  padding: 10px 12px;
}

/* Bouton envoyer */
.page-contact input[type="submit"],
.page-contact .wpforms-submit,
.page-contact button[type="submit"]{
  appearance: none;
  border: none;
  cursor: pointer;
  margin-top: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f6d35f, #d6a72f);
  color: #1a1200;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(214, 167, 47, .35);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.page-contact input[type="submit"]:hover,
.page-contact .wpforms-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(214, 167, 47, .42);
  filter: saturate(1.05);
}
.page-contact input[type="submit"]:active,
.page-contact .wpforms-submit:active{ transform: translateY(0); }

/* Icônes “Spread the love” (ligne sous le titre) */
.page-contact .share-inline{
  display:flex; gap:10px; align-items:center;
  margin: 4px 0 12px;
}
.page-contact .share-inline .icon{
  width: 28px; height: 28px; display:grid; place-items:center;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .1s ease, filter .2s ease, background .2s ease;
}
.page-contact .share-inline .icon:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  background: rgba(255,255,255,.12);
}

/* Responsive */
@media (max-width: 720px){
  .page-contact .contact-card{ padding: 16px; }
  .page-contact h1{ font-size: 34px; }
}

.page-contact .wpcf7 .ajax-loader{ display:none; } /* masque le spinner natif */
.page-contact .is-sending input[type="submit"]{
  pointer-events: none; opacity: .85; filter: grayscale(.1);
}

/* Forcer la grille et sa largeur */
.cgia-gallery { width: 100%; display:block; }
.cgia-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }

/* Compat responsive */
@media (max-width: 900px){ .cgia-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .cgia-grid{ grid-template-columns: 1fr; } }

/* Cartes visibles */
.cgia-card { display:block; background:#171717; border:1px solid #2a2a2a; border-radius:14px; overflow:hidden; }
.cgia-thumb img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }

/* Eviter qu’un conteneur parent masque la grille (certains builders) */
.cgia-gallery, .cgia-grid { overflow: visible !important; }

/* Conteneur */
.cg-wrap{max-width:1100px;margin:0 auto;padding:40px 16px}

/* Titre + chips */
.cg-head{margin-bottom:18px}
.cg-title{font-size:clamp(28px,3vw,40px);line-height:1.15;color:#f2f4f5;margin:0 0 10px}
.cg-chips{display:flex;gap:8px;list-style:none;padding:0;margin:0}
.cg-chips li a{display:inline-block;padding:.25rem .6rem;border:1px solid #3a3a3a;border-radius:999px;
  text-decoration:none;color:#ddd}
.cg-chips li a:hover{background:#f5d36c;color:#111;border-color:#f5d36c}

/* Hero (image à la une) */
.cg-hero{margin:18px 0 16px;border-radius:16px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);background:#111;width: 616px;}
.cg-hero img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
.cg-caption{font-size:.9rem;color:#aaa;padding:8px 14px;background:linear-gradient(180deg,#0f0f0f,#0b0b0b)}

/* Extrait & contenu */
.cg-excerpt{color:#d8d8d8;margin:10px 0 20px;font-size:1.05rem}
.cg-content{color:#e9e9e9;background:rgba(20,20,20,.6);border:1px solid #2a2a2a;border-radius:14px;
  padding:22px;line-height:1.65}
.cg-content img{display:block;width:58%;height:auto;border-radius:14px;margin:14px 0;
  box-shadow:0 6px 22px rgba(0,0,0,.35)}

/* Footer + nav */
.cg-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:24px 0 10px}
.cg-btn{display:inline-block;padding:.6rem .9rem;border-radius:10px;border:1px solid #444;color:#ddd;
  text-decoration:none}
.cg-btn:hover{background:#f5d36c;color:#111;border-color:#f5d36c}
.cg-nav{display:flex;gap:10px}
.cg-prev a,.cg-next a{color:#bbb;text-decoration:none}
.cg-prev a:hover,.cg-next a:hover{color:#f5d36c}

/* Bloc “Vous aimerez aussi” */
.cg-related{margin:28px 0 8px}
.cg-subtitle{font-size:1.25rem;margin:0 0 12px;color:#f5d36c}
.cg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.cg-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.cg-grid{grid-template-columns:1fr}}
.cg-card{display:block;background:#161616;border:1px solid #2a2a2a;border-radius:12px;overflow:hidden;
  text-decoration:none}
.cg-thumb img{display:block;width:100%;height:180px;object-fit:cover}
.cg-card-title{color:#eaeaea;padding:.7rem .9rem}
.cg-card:hover .cg-card-title{color:#f5d36c}

/* ----- Listes standard : rythme + puces dorées ----- */
.cc-prose ul{ padding-left:1.15em; margin:.8em 0; }
.cc-prose ol{ padding-left:1.35em; margin:.8em 0; }
.cc-prose li{ margin:.35em 0; }
.cc-prose ul li::marker{ color:#f5d36c; }          /* puces dorées */
.cc-prose ol li::marker{ color:#d6c080; font-weight:600; }

/* Sous-listes : espace + taille un poil plus petite */
.cc-prose li > ul, 
.cc-prose li > ol{ margin:.45em 0 .35em; font-size:.96em; }

/* ----- Checklist (ajoute .is-check à ton <ul>) ----- */
.cc-prose ul.is-check{ list-style:none; padding-left:0; }
.cc-prose ul.is-check li{
  display:flex; gap:.55em; align-items:baseline; margin:.45em 0;
}
.cc-prose ul.is-check li::before{
  content:"✔"; font-weight:700; color:#89f58a;
  background:rgba(137,245,138,.1);
  border:1px solid rgba(137,245,138,.35);
  border-radius:6px; font-size:.8em;
  width:1.2em; height:1.2em; display:inline-grid; place-items:center;
}

/* ----- Steps numérotés (ajoute .is-steps à ton <ol>) ----- */
.cc-prose ol.is-steps{ counter-reset:step; list-style:none; padding-left:0; }
.cc-prose ol.is-steps li{
  counter-increment:step; position:relative; padding-left:2.2em;
  margin:.6em 0; min-height:1.6em;
}
.cc-prose ol.is-steps li::before{
  content: counter(step);
  position:absolute; left:0; top:.1em;
  width:1.6em; height:1.6em; border-radius:50%;
  display:grid; place-items:center; font-weight:700;
  color:#111; background:linear-gradient(180deg,#f5d36c,#e8b93e);
  box-shadow:0 2px 6px rgba(0,0,0,.35); border:1px solid rgba(0,0,0,.3);
}

/* ----- Définitions (dl/dt/dd) ----- */
.cc-prose dl{ margin:1em 0; }
.cc-prose dt{ color:#f2e4b3; font-weight:600; margin-top:.7em; }
.cc-prose dd{ margin:.25em 0 .5em 0; color:#d8d8d8; }

/* Wrapper responsive : entoure tes tables d’un <div class="cc-table-wrap"> */
.cc-table-wrap{ width:100%; overflow:auto; border-radius:12px; }

/* Table “pro” */
.cc-prose table{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  border-radius:12px; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* En-tête */
.cc-prose thead th{
  background:linear-gradient(180deg, rgba(245,211,108,.16), rgba(245,211,108,.08));
  color:#f5d36c; font-weight:700;
  border-bottom:1px solid rgba(245,211,108,.28);
}

/* Cellules */
.cc-prose th, .cc-prose td{
  padding:.7em .9em; border-bottom:1px solid rgba(255,255,255,.06);
  text-align:left;
}
.cc-prose tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }
.cc-prose tbody tr:hover{ background:rgba(245,211,108,.06); }

/* Alignements utiles (ajoute ces classes sur <td> ou <th>) */
.cc-prose td.is-num, .cc-prose th.is-num{ text-align:right; font-variant-numeric: tabular-nums; }
.cc-prose td.is-center, .cc-prose th.is-center{ text-align:center; }

/* Caption (légende) */
.cc-prose caption{
  caption-side: bottom; text-align:left;
  color:#bfbfbf; padding:.6em .2em .2em;
  font-size:.92em; opacity:.9;
}

.cc-tip, .cc-alert{
  padding:.85em 1em; border-radius:10px; margin:1em 0;
  border:1px solid; display:flex; gap:.6em; align-items:flex-start;
}
.cc-tip{  border-color:rgba(120,180,255,.35); background:rgba(120,180,255,.08); color:#d7e9ff; }
.cc-alert{border-color:rgba(255,120,120,.35); background:rgba(255,120,120,.08); color:#ffd6d6; }
.cc-tip::before{ content:"💡"; }
.cc-alert::before{ content:"⚠️"; }


/* ===== Patch “pages simples” – safe overrides ===== */

/* 1) Rythme & premières marges */
.cc-prose > :first-child { margin-top: 0 !important; }
.cc-prose > :last-child  { margin-bottom: 0 !important; }
.cc-prose p { margin: .9em 0; }

/* 2) Titres : évite les “paquets” trop serrés sous un Hn */
.cc-prose h2 + p,
.cc-prose h3 + p,
.cc-prose h4 + p { margin-top: .55em; }

/* 3) Listes : alignement & sous-listes */
.cc-prose ul, .cc-prose ol { margin: .85em 0 .95em; }
.cc-prose li { margin: .35em 0; }
.cc-prose li > ul,
.cc-prose li > ol { margin: .45em 0 .35em; padding-left: 1.15em; }

/* Variante “compacte” possible (si besoin sur une section) */
.cc-prose .is-compact { margin: .5em 0; }
.cc-prose .is-compact li { margin: .25em 0; }

/* 4) Emphase & sélection (micro-contraste) */
.cc-prose strong { color: #fff; }
.cc-prose em    { opacity: .95; }
.cc-prose ::selection { background: rgba(245,211,108,.28); color: #111; }

/* 5) Images & blocs WP */
.cc-prose .wp-block-image img { border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.cc-prose .wp-block-image figcaption,
.cc-prose figure figcaption { color:#bfbfbf; text-align:center; font-size: .9em; margin-top:.45em; }

/* 6) Citations WP */
.cc-prose .wp-block-quote,
.cc-prose blockquote {
  border-left: 3px solid #f5d36c;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  padding: .95em 1.1em .95em 1.15em;
}
.cc-prose .wp-block-quote cite { display:block; color:#cfcfcf; opacity:.9; margin-top:.4em; }

/* 7) Tableaux : wrapper scroll + zébrage + hover (harmonisés) */
.cc-prose .cc-table-wrap        { width:100%; overflow:auto; border-radius:12px; }
.cc-prose table                 { width:100%; border-collapse:separate; border-spacing:0;
                                  background:rgba(255,255,255,.02);
                                  border:1px solid rgba(255,255,255,.08);
                                  border-radius:12px; overflow:hidden;
                                  box-shadow:0 8px 24px rgba(0,0,0,.25); }
.cc-prose thead th              { background:linear-gradient(180deg, rgba(245,211,108,.16), rgba(245,211,108,.08));
                                  color:#f5d36c; font-weight:700;
                                  border-bottom:1px solid rgba(245,211,108,.28); }
.cc-prose th, .cc-prose td      { padding:.7em .9em; border-bottom:1px solid rgba(255,255,255,.06); text-align:left; }
.cc-prose tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }
.cc-prose tbody tr:hover        { background:rgba(245,211,108,.06); }
.cc-prose td.is-center, .cc-prose th.is-center { text-align:center; }
.cc-prose td.is-num,    .cc-prose th.is-num    { text-align:right; font-variant-numeric:tabular-nums; }

/* Optionnel: en-tête “collant” (quand la table scrolle dans .cc-table-wrap)
.cc-prose thead th { position: sticky; top: 0; z-index: 2; }
*/

/* 8) Boutons/editor (au cas où) */
.cc-prose .wp-block-button__link {
  background: linear-gradient(180deg, #f5d36c, #e8b93e);
  color:#111 !important;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-prose .wp-block-button__link:hover { filter: brightness(1.05); }

/* 9) Focus accessibles (clavier) – uniquement dans la prose */
.cc-prose a:focus,
.cc-prose button:focus,
.cc-prose .wp-block-button__link:focus {
  outline: 2px dashed rgba(245,211,108,.8);
  outline-offset: 2px;
}

/* 10) Petites harmonisations de plugins de partage dans la prose */
.cc-prose .sharedaddy { margin-top: 1rem; }