/* style.css � Etabalme S�rl | R�paration, serrurerie & d�pannage */

/* --- 1. VARIABLES & RESET --- */
:root {
    /* Palette */
    --primary: #1a1a2e;
    --primary-light: #16213e;
    --secondary: #0f3460;
    --accent: #e94560;
    --accent-hover: #d63851;

    /* Fonds & Textes */
    --bg-body: #ffffff;
    --bg-panel: #f8f9fc;
    --bg-light: #f0f2f7;
    --text-main: #1a1a2e;
    --text-light: #5a5a7a;
    --white: #ffffff;

    /* UI */
    --border: #e8eaf0;
    --radius: 12px;
    --shadow: 0 4px 24px rgba(26, 26, 46, 0.06);
    --shadow-hover: 0 8px 40px rgba(26, 26, 46, 0.12);

    /* Typographie */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Espacements */
    --spacing-sm: 20px;
    --spacing-md: 40px;
    --spacing-lg: 80px;
}

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

body {
    font-family: var(--font-sans);
    color: var(--text-main);
    background-color: var(--bg-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
ul { list-style: none; }
img { max-width: 100%; height: auto; }

/* --- 2. TYPOGRAPHIE FLUIDE & UTILS --- */
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; color: var(--primary); }

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); }

.text-secondary { color: var(--accent); }
.text-center { text-align: center; }
.text-light { color: var(--text-light); }

/* --- 3. LAYOUT & CONTENEURS --- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

section { padding: var(--spacing-lg) 0; }

.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* --- 4. COMPOSANTS R�UTILISABLES --- */

/* Cartes */
.card-base {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--shadow);
}

.card-base:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: var(--shadow-hover);
}

.card-base h3 {
    margin-top: 18px;
    margin-bottom: 10px;
}

.card-base p {
    flex-grow: 1;
    color: var(--text-light);
    font-size: 0.92rem;
    line-height: 1.7;
}

/* Ic�nes (syst�me mask SVG) */
.icon-base {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.icon-base.icon-sm { width: 40px; height: 40px; }
.icon-base.icon-lg { width: 80px; height: 80px; }
.icon-base.icon-white { background-color: var(--white); }
.icon-base.icon-light-bg { background-color: var(--bg-light); color: var(--accent); }

/* Boutons */
.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--accent);
    color: var(--white);
}
.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);
}

.btn-outline {
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn-outline:hover {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.05);
}

.btn-white {
    background-color: var(--white);
    color: var(--primary);
}
.btn-white:hover {
    background-color: var(--bg-panel);
    transform: translateY(-2px);
}

/* --- 5. HEADER & NAVIGATION --- */
header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border);
    padding: 15px 0;
}

.nav-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 40px;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.logo span {
    color: var(--accent);
}

.nav-menu {
    display: flex;
    gap: 25px;
    align-items: center;
}

.nav-link {
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.95rem;
}
.nav-link:hover, .nav-link.active { color: var(--accent); }

.nav-cta {
    background-color: var(--accent);
    color: var(--white) !important;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}
.nav-cta:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
}

/* --- 6. SECTIONS SP�CIFIQUES --- */

/* Hero */
.hero {
    padding-top: clamp(120px, 18vw, 200px);
    padding-bottom: clamp(60px, 10vw, 100px);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    text-align: center;
}

.hero h1 {
    color: var(--white);
    max-width: 750px;
    margin: 0 auto 20px auto;
    letter-spacing: -1px;
}

.hero .subtitle {
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    color: rgba(255, 255, 255, 0.75);
    max-width: 620px;
    margin: 0 auto 36px auto;
    font-weight: 300;
    line-height: 1.7;
}

.hero-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
}

.tag {
    background: rgba(233, 69, 96, 0.15);
    color: var(--accent);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(233, 69, 96, 0.3);
}

.hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Section header (titre centr�) */
.section-header {
    text-align: center;
    margin-bottom: 10px;
}

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

/* Split Section */
.split-section {
    background: var(--bg-panel);
}

.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.split-content h2 {
    margin-bottom: 16px;
}

.split-content > p {
    color: var(--text-light);
    margin-bottom: 24px;
    line-height: 1.7;
}

.check-list {
    margin-bottom: 32px;
}

.check-list li {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    font-weight: 500;
    color: var(--text-main);
}

.check-list li::before {
    content: '?';
    width: 24px;
    height: 24px;
    background: var(--accent);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 14px;
    flex-shrink: 0;
}

/* Visual box (stats) */
.split-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}

.stat-item {
    background: var(--primary);
    border-radius: var(--radius);
    padding: 28px 20px;
    color: var(--white);
    text-align: center;
}

.stat-item .big-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 4px;
}

.stat-item .label {
    font-size: 0.85rem;
    opacity: 0.75;
}

/* Zones */
.zones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 40px;
}

.zone-item {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 20px;
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.3s, transform 0.2s;
}

.zone-item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.zone-item::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Contact */
.contact-section {
    background: var(--primary);
    color: var(--white);
}

.contact-section h2 { color: var(--white); }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.contact-info > p {
    opacity: 0.75;
    margin-bottom: 28px;
    line-height: 1.7;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.95rem;
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: rgba(233, 69, 96, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon .icon-base {
    width: 22px;
    height: 22px;
    background-color: var(--accent);
}

/* Formulaire */
.contact-form {
    background: var(--primary-light);
    border-radius: var(--radius);
    padding: 36px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    opacity: 0.8;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-group textarea {
    height: 100px;
    resize: vertical;
}

.btn-submit {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
    font-family: var(--font-sans);
}

.btn-submit:hover {
    background: var(--accent-hover);
}

/* Footer */
footer {
    background-color: #0f0f1a;
    color: rgba(255, 255, 255, 0.5);
    padding: 40px 0;
    font-size: 0.85rem;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-inner a {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s;
}

.footer-inner a:hover {
    color: var(--accent);
}

/* --- 7. BOUTON HAMBURGER --- */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 1001;
    margin-left: auto;
}

.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* --- 8. MEDIA QUERIES MOBILE --- */
@media (max-width: 768px) {

    .mobile-menu-toggle {
        display: flex !important;
        margin-left: 15px;
    }

    .nav-flex {
        padding: 10px 0;
    }

    .nav-left {
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        padding: 20px;
        border-bottom: 1px solid var(--border);
        gap: 15px;
        display: none;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        z-index: 999;
    }

    .nav-menu.mobile-open {
        display: flex !important;
        animation: slideDown 0.3s ease-out;
    }

    .nav-link {
        display: block;
        padding: 12px 0;
        font-size: 1.1rem;
        border-bottom: 1px solid var(--bg-panel);
        width: 100%;
    }
    .nav-link:last-child { border-bottom: none; }

    .grid-responsive {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .split-grid,
    .contact-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    .split-visual { order: -1; }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero .subtitle {
        text-align: center;
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
    }

    section { padding: 60px 0; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 9. D�FINITIONS DES IC�NES (SVG mask) --- */

.icon-wrench {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z'/%3E%3C/svg%3E");
}

.icon-lock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z'/%3E%3C/svg%3E");
}

.icon-gear {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.02-.397-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.02-.397-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
}

.icon-window {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 3.75h16.5v16.5H3.75z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 3.75v16.5M3.75 12h16.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 3.75h16.5v16.5H3.75z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 3.75v16.5M3.75 12h16.5'/%3E%3C/svg%3E");
}

.icon-bolt {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z'/%3E%3C/svg%3E");
}

.icon-paint {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42'/%3E%3C/svg%3E");
}

.icon-clock {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
}

.icon-phone {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z'/%3E%3C/svg%3E");
}

.icon-mail {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75'/%3E%3C/svg%3E");
}

.icon-pin {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z'/%3E%3C/svg%3E");
}

.icon-shield {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z'/%3E%3C/svg%3E");
}

.icon-hand {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.05 4.575a1.575 1.575 0 1 0-3.15 0v3m3.15-3v-1.5a1.575 1.575 0 0 1 3.15 0v1.5m-3.15 0 .075 5.925m3.075.075V4.575c0 .66.525 1.185 1.185 1.185h.075c.66 0 1.185-.525 1.185-1.185v-.075m-2.445 8.355.075 5.925m3.075-5.925V4.575c0 .66.525 1.185 1.185 1.185h.075c.66 0 1.185-.525 1.185-1.185v-.075m-2.445 8.355.075 5.925m3.075-5.925v5.925c0 .66.525 1.185 1.185 1.185h.075c.66 0 1.185-.525 1.185-1.185v-5.925m-2.445 0V4.575c0 .66.525 1.185 1.185 1.185h.075c.66 0 1.185-.525 1.185-1.185v-.075'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.05 4.575a1.575 1.575 0 1 0-3.15 0v3m3.15-3v-1.5a1.575 1.575 0 0 1 3.15 0v1.5m-3.15 0 .075 5.925m3.075.075V4.575c0 .66.525 1.185 1.185 1.185h.075c.66 0 1.185-.525 1.185-1.185v-.075m-2.445 8.355.075 5.925m3.075-5.925V4.575c0 .66.525 1.185 1.185 1.185h.075c.66 0 1.185-.525 1.185-1.185v-.075m-2.445 8.355.075 5.925m3.075-5.925v5.925c0 .66.525 1.185 1.185 1.185h.075c.66 0 1.185-.525 1.185-1.185v-5.925m-2.445 0V4.575c0 .66.525 1.185 1.185 1.185h.075c.66 0 1.185-.525 1.185-1.185v-.075'/%3E%3C/svg%3E");
}

/* --- 10. UTILITAIRES & ANIMATIONS --- */

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar personnalis�e (optionnel) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-panel);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* S�lection de texte */
::selection {
    background: var(--accent);
    color: var(--white);
}
/* --- 12. FOOTER GRID (pour le footer injecté) --- */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-info h4 { color: var(--accent); margin-bottom: 15px; }
.footer-info p { color: #ccc; margin-bottom: 10px; }
.footer-info a:hover { color: var(--white); text-decoration: underline; }

.hosting-badge {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}
.hosting-badge a { color: var(--white); text-decoration: underline; }

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-info[style*="right"] { text-align: left !important; }
}