@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');
        
:root {
    /* --- Palette Domicat --- */
    --couleur-primaire: 200 140 0; /* rgb(200,140,0) */
    --couleur-primaire-hover: 170 120 0; 
    --couleur-primaire-clair: 255 222 105; /* rgb(255,222,105) */
}

body {
    font-family: 'Satoshi', sans-serif;
}

/* --- FRIENDLY HERO --- */
.hero-friendly {
    background-color: #f8f9fa; /* A soft off-white */
    position: relative;
    overflow: hidden;
}

.hero-friendly::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background-color: rgba(var(--couleur-primaire), 0.08);
    top: -250px;
    left: -250px;
    filter: blur(50px);
}

.hero-friendly::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background-color: rgba(var(--couleur-primaire), 0.05);
    bottom: -200px;
    right: -150px;
    filter: blur(50px);
}

.hero-content-wrapper {
    position: relative;
    z-index: 2;
}

/* --- Premium Card Gradient/Gloss Effect --- */
.card-premium {
    position: relative;
    overflow: hidden;
    /* A nice, trendy gradient using the primary color */
    background: linear-gradient(135deg, rgb(96, 165, 250) 0%, rgb(var(--couleur-primaire)) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* This pseudo-element creates the moving "shine" effect on hover */
.card-premium::after {
    content: "";
    position: absolute;
    top: 0;
    left: -200%;
    width: 200%;
    height: 100%;
    transform: skewX(-20deg);
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transition: left 0.6s ease-out;
}

.card-premium:hover::after {
    left: 100%;
}

.img-how-it-works {
    height: 500px;
    max-width: 400px;
    width: 100%;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
}

.font-brand {
    font-family: "Faculty Glyphic", cursive;
}

/* --- Cozy Section Background --- */
.section-cozy {
    background: linear-gradient(180deg, rgba(var(--couleur-primaire-clair), 0.25) 0%, rgba(255,255,255,1) 60%);
}

/* Badge icon pour les cartes services */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background-color: rgba(var(--couleur-primaire), 0.1);
    color: rgb(var(--couleur-primaire));
    font-size: 20px;
}

/* --- Cozy helpers --- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 9999px;
    background-color: rgba(var(--couleur-primaire-clair), 0.7);
    color: rgb(var(--couleur-primaire));
    border: 1px solid rgba(var(--couleur-primaire), 0.1);
    font-weight: 600;
}

.note {
    background: #fff;
    border-left: 4px solid rgb(var(--couleur-primaire));
    border-radius: 8px;
    padding: 12px 16px;
}

.lift {
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}