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

:root {
    --rouge: #C00000;
    --rouge-hero: #FF3B3B;
    --noir: #111111;
    --blanc: #FFFFFF;
    --beige-fond: #F4F1EC;
    --beige-texture: #EDE8E0;
    --gris-section: #F0F0F0;
    --gris-texte: #4A4A4A;
}

body {
    font-family:'Montserrat',sans-serif;
    line-height:1.6;
    color:var(--gris-texte);
    background:var(--beige-fond);
    overflow-x:hidden;
}

html, body { max-width:100%; overflow-x:hidden; }

img { max-width:100%; height:auto; display:block; }

/* Header IDENTIQUE au reste du site */
header {
    position:relative;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    background:var(--blanc);
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
    padding:1.2rem 0;
    border-bottom:2px solid var(--rouge-hero);
}

nav {
    max-width:1200px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 2.2rem;
}

.logo img { height:52px; width:auto; display:block; }

nav a {
    margin-left:1rem;
    text-decoration:none;
    color:var(--noir);
    font-weight:500;
}

.cta-header {
    background:linear-gradient(135deg,#FF3B3B,#FF5A5A);
    color:var(--blanc);
    padding:1rem 2.2rem;
    border-radius:50px;
    font-weight:700;
    font-size:1.05rem;
    text-decoration:none;
    transition:all 0.3s;
    box-shadow:0 6px 20px rgba(255,59,59,0.4);
    border:2px solid rgba(255,255,255,0.2);
    text-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.cta-header:hover {
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 12px 35px rgba(255,59,59,0.5);
    background:linear-gradient(135deg,#FF5A5A,#FF3B3B);
}

/* Hero article */
.hero-article {
    background: radial-gradient(circle at bottom,rgba(192,0,0,0.35) 0,rgba(192,0,0,0.02) 45%,transparent 70%),
                radial-gradient(circle at top,#232733 0,#05060A 60%);
    color:#F7F7F7;
    padding:40px 1.5rem 25px;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.hero-article-inner { max-width:800px; margin:0 auto; }
.hero-article h1 { font-size:clamp(2rem,3vw,2.6rem); font-weight:700; margin-bottom:0.5rem; color:#FFFFFF; }
.hero-article p { font-size:1.05rem; color:rgba(245,245,245,0.9); }

/* Contenu article */
.section-article {
    max-width:900px;
    margin:0 auto;
    padding:40px 1.5rem 25px;
    background:transparent;
}
.section-article .article-meta {
    display:flex;
    flex-wrap:wrap;
    gap:0.8rem;
    align-items:center;
    color:var(--rouge);
    font-size:0.9rem;
    margin-bottom:1.5rem;
}

/* ===========================================
   TAIlLES D'IMAGES PERSONNALISÉES - NOUVEAU
   =========================================== */
/* Garde ta règle existante pour compatibilité */
.section-article img.img-reduite {
    width: 260px !important;
    max-width: 80% !important;
    height: auto !important;
    margin: 0 auto 1.5rem !important;
    display: block !important;
}

/* NOUVELLES CLASSES pour contrôler chaque image individuellement */
.section-article img.img-petite {
    width: 200px !important;
    max-width: 70% !important;
    height: auto !important;
    margin: 0 auto 1.5rem !important;
    display: block !important;
}

.section-article img.img-moyenne {
    width: 280px !important;
    max-width: 85% !important;
    height: auto !important;
    margin: 0 auto 1.5rem !important;
    display: block !important;
}

.section-article img.img-large {
    width: 350px !important;
    max-width: 95% !important;
    height: auto !important;
    margin: 0 auto 1.5rem !important;
    display: block !important;
}

/* Style général de toutes les images de l'article (APPLIQUÉ APRÈS les tailles spécifiques) */
.section-article img {
    border-radius:18px;
    margin-bottom:1.5rem;
    box-shadow:0 18px 45px rgba(0,0,0,0.12);
}

.section-article h2 {
    font-size:1.6rem;
    margin:1.5rem 0 0.6rem;
    color:var(--noir);
}
.section-article h3 {
    font-size:1.3rem;
    margin:1.2rem 0 0.4rem;
    color:var(--noir);
}
.section-article p { margin-bottom:1rem; }
.section-article ul { margin:0.5rem 0 1.5rem 1.2rem; }
.section-article li { margin-bottom:0.4rem; }

/* Encadré / mise en avant */
.encadre-info {
    background:var(--gris-section);
    border-radius:16px;
    padding:1.2rem 1.4rem;
    margin:1.5rem 0;
}
.encadre-info i {
    color:var(--rouge-hero);
    margin-right:0.4rem;
}

/* Bouton retour */
.btn-retour {
    display:inline-block;
    margin-top:2rem;
    padding:0.9rem 1.8rem;
    border-radius:50px;
    background:var(--beige-texture);
    color:var(--noir);
    text-decoration:none;
    font-weight:600;
    transition:all 0.3s;
}
.btn-retour:hover {
    background:var(--rouge-hero);
    color:var(--blanc);
    box-shadow:0 10px 30px rgba(255,59,59,0.35);
}

/* Footer identique */
footer {
    background:#181818;
    color:var(--blanc);
    text-align:center;
    padding:3rem 2rem 2rem;
    margin-top:40px;
}
footer .contact-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:2rem;
    margin-bottom:2rem;
}
footer .contact-grid a {
    color: var(--blanc);
    text-decoration: none;
}
footer .contact-grid a:hover {
    text-decoration: underline;
}
footer p { font-size:0.85rem; margin:0; }

/* Responsive - tailles images adaptées mobile */
@media (max-width:768px) {
    /* Images plus petites sur mobile */
    .section-article img.img-petite { width: 160px !important; max-width: 90% !important; }
    .section-article img.img-moyenne { width: 240px !important; max-width: 95% !important; }
    .section-article img.img-large { width: 300px !important; max-width: 100% !important; }
    
    header {
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:1000;
        padding:0.4rem 0;
        background:var(--blanc);
        box-shadow:0 2px 8px rgba(0,0,0,0.08);
    }

    nav {
        max-width:1200px;
        margin:0 auto;
        padding:0 0.8rem;
        display:flex;
        flex-direction:column;
        gap:0.3rem;
        align-items:stretch;
    }

    nav > div:last-child {
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-start;
        gap:0.4rem;
    }

    nav a {
        font-size:0.9rem;
        padding:0.2rem 0;
        white-space:nowrap;
    }

    .logo img { height:34px; }

    .cta-header {
        padding:0.35rem 0.9rem;
        font-size:0.85rem;
    }

    .hero-article {
        padding:140px 1rem 25px;
    }

    .section-article {
        padding:30px 1rem 40px;
    }

    footer .contact-grid {
        grid-template-columns:1fr;
        text-align:center;
        gap:1rem;
    }
}

@media (min-width:769px) {
    header {
        position:fixed;
        top:0;
        left:0;
        right:0;
    }
    .hero-article {
        padding-top:100px;
    }
}