@font-face{font-family:'Open Sans';src:url('fonts/OpenSans-Regular.ttf') format('truetype');font-weight:normal;font-style:normal}
:root{--main-color:purple;--font-serif:"Bodoni MT",serif;--font-sans:"Open Sans",sans-serif}
body{margin:0;font-family:var(--font-sans);background-color:#f9f9f9;color:#333;line-height:1.6;padding-top:100px}
header{background-color:var(--main-color);color:white;padding:20px;text-align:center;position:fixed;top:0;left:0;width:100%;z-index:1000}
header h1{font-family:var(--font-serif);margin:0}
nav ul,.nav-secondaire ul{list-style:none;display:flex;padding:0;margin:0}
nav ul{justify-content:flex-start;gap:40px;margin-bottom:10px}
.nav-secondaire ul{gap:15px}
nav a,.nav-secondaire a{text-decoration:none;color:white;font-weight:bold}
.nav-secondaire a:hover{text-decoration:underline}
main{padding:20px 0}
.section-mauve{background-color:#f3e6f9;padding:30px 0}
.contenu-centre{max-width:1100px;margin:0 auto;padding:0 10px}
.autres-articles{background-color:white;padding:40px 0}
form.form-custom{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:20px}
form label,form input,form select{font-family:var(--font-sans)}
form label{font-weight:bold;display:block;margin-top:10px}
form input,form select{padding:6px;width:100%;margin-top:4px;border-radius:4px;border:1px solid #aaa}
fieldset{border:1px solid #ccc;padding:15px;border-radius:6px}
legend{font-weight:bold;font-family:var(--font-serif);color:var(--main-color)}
.form-submit{grid-column:span 2;text-align:center;margin-top:20px}
button[type="submit"]{background-color:var(--main-color);color:white;border:none;padding:12px 24px;font-size:16px;border-radius:6px;cursor:pointer;font-family:var(--font-sans)}
button[type="submit"]:hover{background-color:#5d1c7c}
.article-principal,.article-secondaire{background:transparent;border:none;margin-bottom:30px;padding:0}
.article-secondaire{padding:10px;background:white;margin-bottom:20px}
.article-principal img{width:100%;height:auto;max-height:500px;object-fit:cover}
.article-ligne{background-color:transparent;border:none;padding:0;display:flex;align-items:flex-start;gap:15px}
.article-ligne img{width:200px;height:140px;object-fit:cover;border:4px}
.article-ligne .texte,.grid-articles .texte{flex:1;display:flex;flex-direction:column;justify-content:center}
.article-ligne .texte p,.grid-articles .texte p{margin:0;font-weight:bold}
.article-ligne .texte p{font-size:14px;color:#333}
.col-md-6,.col-md-3{border:none}
.texte{padding:20px}
.texte h2{font-size:28px;margin:0;color:#222;line-height:1.4;font-weight:bold}
.texte p{font-size:18px;margin:0;color:#555}
.categorie,.grid-articles .categorie{background-color:purple;color:white;font-weight:bold;text-transform:uppercase;margin-bottom:10px;display:inline-block}
.categorie{padding:3px 10px;font-size:14px;border:3px;align-self:flex-start}
.grid-articles .categorie{font-size:10px;padding:2px 6px;margin-bottom:4px;border-radius:0}
@media(max-width:700px){.article-block{flex-direction:column}.article-block img{width:100%;height:auto}.texte{padding:15px}.article-block.full-width{grid-column:span 2}}
.autres-articles .contenu-centre{margin:0;padding-left:155px;padding-right:0}
.grid-articles{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;max-width:900px;margin:auto;padding:20px 0}
.grid-articles .article{display:flex;align-items:flex-start;gap:15px;background-color:transparent;border:none;padding:10px 0;text-align:left;font-size:13px}
.grid-articles .article img{width:90px;height:60px;object-fit:cover;flex-shrink:0}
.grid-articles .texte p{font-size:13px;color:#222;line-height:1.4}
@media(max-width:600px){.grid-articles{grid-template-columns:1fr}}
p:hover,h2:hover,.lien-article:hover h2{text-decoration:underline}
.page-articles p:hover,.page-articles h2:hover{text-decoration:none}
.lien-article{display:block;color:inherit;text-decoration:none}
#burger-btn{background:none;border:none;color:white;font-size:28px;cursor:pointer;position:absolute;top:20px;right:20px;z-index:1100}
#burger-menu{display:none;position:absolute;top:60px;right:20px;background-color:white;border:1px solid #ccc;list-style:none;padding:0;margin:0;z-index:1099}
#burger-menu li a{display:block;padding:12px 20px;text-decoration:none;color:black;font-weight:bold}
#burger-menu li a:hover{background-color:#f0f0f0}
.contenu-centre-article{max-width:800px;margin:0 auto;padding:20px;text-align:justify}
.contenu-centre-article img{display:block;margin:20px auto;max-width:100%;height:auto}
.contenu-centre-article h2{text-align:center;margin:30px 0 20px;font-weight:bold}
.contenu-centre-article figcaption{text-align:center;font-style:italic;font-size:14px;margin-bottom:15px;color:#555}
.note-article{font-size:12px;color:#555;margin-top:-10px;margin-bottom:20px}
.contenu-centre-article>img:first-of-type{max-width:100%;width:1000px;display:block;margin:30px auto}
.header-container{display:flex;align-items:center;justify-content:space-between;padding:10px 20px}
.logo-france24{display:flex;align-items:center;gap:20px}
.logo-france24 img{height:40px}
.grid-articles .article p{font-weight:bold}
.pour-aller-plus-loin{color:purple;text-align:right;font-weight:bold;margin-top:20px;margin-bottom:0;cursor:default;font-size:16px}
.pour-aller-plus-loin .fleche{margin-left:8px;font-size:16px}
.footer-france24{background-color:#f3e6f9;padding:40px 20px 20px;font-size:14px;color:#333;text-align:center}
.footer-france24 h4{margin-bottom:10px;font-size:16px;color:purple;font-weight:bold}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;margin-bottom:20px}
.footer-france24 nav ul,.footer-france24 section ul{list-style:none;padding:0;margin:0}
.footer-france24 li{margin-bottom:6px}
.footer-france24 a{
    text-decoration:none;
    color:#333;
    white-space:normal;
    word-break:break-word;
}
.footer-france24 a:hover{text-decoration:underline;color:purple}
.social-icons{display:flex;gap:10px;margin-top:10px;padding-left:0}
.social-icons li{list-style:none}
.social-icons img{width:24px;height:24px;object-fit:contain;transition:transform 0.2s ease}
.social-icons img:hover{transform:scale(1.1)}
.footer-copy{text-align:center;color:#666;font-size:13px;margin-top:20px}
/* L'essentiel du jour */
.article-avec-aside {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    gap: 40px;
}

.essentiel-lateral {
    flex: 0 0 300px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    padding: 20px;
    font-family: var(--font-sans);
    font-size: 14px;
}

.essentiel-lateral h3 {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 20px;
    color: #0a0a0a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.carre-bleu {
    width: 12px;
    height: 12px;
    background-color: purple;
    display: inline-block;
}

.bloc-essentiel {
    margin-bottom: 20px;
}

.bloc-essentiel p {
    margin: 0;
    font-weight: bold;
    line-height: 1.4;
}

.bloc-essentiel .tag {
    display: inline-block;
    margin-top: 5px;
    font-size: 12px;
    color: purple;
    font-weight: bold;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .article-avec-aside {
        flex-direction: column;
    }

    .essentiel-lateral {
        width: 100%;
        margin-top: 30px;
    }
}
form.form-custom {
    background-color: white;
    padding: 30px;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    max-width: 1000px;
    margin: 40px auto;
}

form.form-custom fieldset {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 0;
    background-color: #f9f9f9;
}

form.form-custom legend {
    font-family: var(--font-serif);
    font-weight: bold;
    color: var(--main-color);
    font-size: 16px;
    margin-bottom: 10px;
}

form.form-custom label {
    font-weight: bold;
    display: block;
    margin-top: 10px;
}

form.form-custom input,
form.form-custom select {
    padding: 8px;
    width: 100%;
    margin-top: 4px;
    border-radius: 0;
    border: 1px solid #aaa;
}

.form-submit {
    grid-column: span 2;
    text-align: center;
    margin-top: 20px;
}

.form-submit button[type="submit"] {
    background-color: var(--main-color);
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 0;
    cursor: pointer;
    font-family: var(--font-sans);
}

.form-submit button[type="submit"]:hover {
    background-color: #5d1c7c;
}

.article-demo {
    margin-top: 40px;
    padding: 30px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
}

.article-demo h2 {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: bold;
    color: var(--main-color);
}
/* Layout principal : article + formulaire */
.custom-layout {
    display: flex;
    flex-direction: row;
    gap: 40px;
    padding: 40px;
    max-width: 1200px;
    margin: auto;
}

/* Article */
.zone-article {
    flex: 3;
    font-family: var(--font-sans);
}

.zone-article img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

/* Formulaire */
.zone-formulaire {
    flex: 1;
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ccc;
    font-family: var(--font-sans);
}

.zone-formulaire h3 {
    font-size: 18px;
    color: var(--main-color);
    margin-bottom: 15px;
}

.zone-formulaire label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

.zone-formulaire input,
.zone-formulaire select {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border: 1px solid #aaa;
    border-radius: 0;
}

.form-submit {
    text-align: center;
    margin-top: 20px;
}

.form-submit button {
    padding: 10px 20px;
    background-color: var(--main-color);
    color: white;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 900px) {
    .custom-layout {
        flex-direction: column;
    }
}