/* --- style.css : Variables globales et styles communs --- */

/* Variables de couleurs */
:root{
  --fond:#CED3D6;
  --surface:#D9E0E2;
  --logo-fond:#D2D7DA;
  --metal:#606A73;
  --metal-moyen:#515B64;
  --metal-fonce:#323F48;
  --ombre:#161F27;
  --blanc:#FFFFFF;
  --ease:cubic-bezier(.22,.8,.3,1);
}

/* Reset de base */
*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
html{scroll-behavior:smooth}
body{background:var(--fond);color:var(--ombre);line-height:1.6;min-height:100vh;overflow-x:hidden}
a:focus-visible,button:focus-visible{outline:3px solid var(--ombre);outline-offset:2px}

/* Conteneur principal (utilisé sur toutes les pages) */
.contenu{padding:30px 24px 40px;max-width:980px;margin:0 auto}

/* Titres de section */
h2{color:var(--ombre);font-size:1.3rem;margin:38px 0 14px;display:inline-block;border-bottom:3px solid var(--metal-fonce);padding-bottom:6px}

/* Le fil d'actualité (partagé) */
.fil{list-style:none;border-left:3px solid var(--metal-fonce);margin-left:8px}
.fil li{position:relative;background:var(--surface);border:1px solid var(--metal);border-radius:14px;padding:16px 20px;margin:0 0 14px 24px;box-shadow:0 6px 16px rgba(22,31,39,.12)}
.fil li::before{content:"";position:absolute;left:-36px;top:22px;width:15px;height:15px;border-radius:50%;background:var(--metal-fonce);border:3px solid var(--metal)}
.fil time{font-size:.78rem;font-weight:700;color:var(--metal-moyen);text-transform:uppercase;letter-spacing:.5px}
.fil .tag{display:inline-block;font-size:.68rem;font-weight:700;background:var(--metal-fonce);color:var(--surface);border-radius:10px;padding:1px 9px;margin-left:6px}
.fil h4{margin:2px 0 4px}
.fil p{color:var(--metal-fonce);font-size:.95rem}

/* Les blocs "À propos" (partagés) */
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.box{background:var(--surface);border:1px solid var(--metal);border-top:5px solid var(--metal-fonce);border-radius:15px;padding:20px;box-shadow:0 8px 20px rgba(22,31,39,.12)}
.box h3{font-size:1.1rem;margin-bottom:8px}
.box p{color:var(--metal-fonce);font-size:.95rem}

/* Le footer (partagé) */
footer{margin-top:44px;background:linear-gradient(180deg,var(--metal-fonce),var(--ombre));color:var(--surface);border-radius:20px;padding:28px;text-align:center}
footer h3{margin-bottom:14px}
.contacts{display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.contacts a{color:var(--surface);text-decoration:none;opacity:.85}
.contacts a:hover{opacity:1;text-decoration:underline}
.copy{margin-top:18px;padding-top:14px;border-top:1px solid var(--metal);font-size:.85rem;opacity:.8}

/* Responsive global */
@media(max-width:600px){
  .contenu{padding:20px 12px 30px}
}