/* =============================================================================
   etesvousconforme.fr — espace actualités
   Complète style.css : on n'y redéfinit ni les couleurs, ni les polices, ni les
   boutons. Uniquement ce que la chronologie et les articles ajoutent.
============================================================================= */

.fil{font-size:14px;margin-bottom:14px}
.fil a{color:var(--corps-clair);text-decoration:none}
.fil a:hover{color:var(--accent)}

.titre-bloc{font-family:var(--titre);font-size:22px;margin:44px 0 18px;padding-bottom:10px;
            border-bottom:1px solid var(--trait)}

/* --- Nos analyses ---------------------------------------------------------- */
.grille-articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.carte-article{display:block;padding:24px;border:1px solid var(--trait);border-radius:3px;
               background:var(--surface);text-decoration:none;color:inherit;
               transition:border-color .15s,transform .15s}
.carte-article:hover{border-color:var(--accent);transform:translateY(-2px)}
.carte-article .date{font-size:12px;letter-spacing:.05em;text-transform:uppercase;
                     color:var(--corps-clair)}
.carte-article h3{font-family:var(--titre);font-size:18.5px;line-height:1.35;margin:8px 0 10px;
                  color:var(--encre)}
.carte-article p{font-size:14.5px;line-height:1.6;color:var(--corps);margin-bottom:14px}
.carte-article .lire{font-size:13.5px;font-weight:600;color:var(--accent)}

/* --- La chronologie -------------------------------------------------------- */
/* Une colonne de dates à gauche, le fait à droite : on lit la succession des
   événements, ce qui est exactement ce qu'un dirigeant vient chercher. */
.chronologie{list-style:none;margin:0;padding:0;border-left:2px solid var(--trait);
             margin-left:8px}
.breve{position:relative;display:grid;grid-template-columns:150px 1fr;gap:20px;
       padding:20px 0 20px 26px}
.breve::before{content:"";position:absolute;left:-7px;top:27px;width:12px;height:12px;
               border-radius:50%;background:var(--fond);border:2px solid var(--trait-fort)}
.breve.epinglee::before{background:var(--accent);border-color:var(--accent)}
.breve-date{font-size:13px;color:var(--corps-clair);padding-top:2px;white-space:nowrap}
.breve-corps h3{font-family:var(--titre);font-size:16.5px;line-height:1.45;margin:0 0 6px}
.breve-corps h3 a{color:var(--encre);text-decoration:none;
                  border-bottom:1px solid transparent}
.breve-corps h3 a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.breve-note{font-size:14.5px;line-height:1.65;color:var(--corps);margin:0 0 6px}
.breve-source{font-size:12.5px;color:var(--corps-clair);margin:0}

.mention-flux{margin-top:28px;font-size:14px;color:var(--corps-clair)}

/* --- Article --------------------------------------------------------------- */
.prose .chapeau{font-size:18px;line-height:1.65;color:var(--corps);margin-bottom:26px;
                padding-left:16px;border-left:3px solid var(--accent)}
.prose blockquote{margin:20px 0;padding:14px 20px;background:var(--fond-2);
                  border-left:3px solid var(--trait-fort);font-size:15.5px}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
            background:var(--fond-2);padding:2px 6px;border-radius:2px}
.source-article{margin-top:30px;padding-top:16px;border-top:1px solid var(--trait);
                font-size:14px;color:var(--corps-clair)}

.encart-diagnostic{margin-top:40px;padding:28px 30px;background:var(--fond-2);
                   border:1px solid var(--trait);border-radius:3px}
.encart-diagnostic h2{font-size:20px;margin:0 0 8px;border:0;padding:0}
.encart-diagnostic p{font-size:15px;line-height:1.65;margin-bottom:18px;max-width:60ch}

@media (max-width:700px){
  .breve{grid-template-columns:1fr;gap:6px;padding-left:22px}
  .breve-date{font-size:12.5px}
}

/* --- Illustrations --------------------------------------------------------- */
/* Les visuels sont hébergés chez nous (voir api/veille.php) : pas d'appel vers
   un site tiers au chargement, donc pas d'image cassée le jour où la source
   réorganise ses fichiers. */
.carte-article{padding:0;overflow:hidden}
.carte-article .vignette{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--fond-2)}
.carte-article .vignette img{width:100%;height:100%;object-fit:cover;display:block}
.carte-article .date,.carte-article h3,.carte-article p,.carte-article .lire{margin-left:24px;margin-right:24px}
.carte-article .date{display:block;margin-top:20px}
.carte-article .lire{display:block;margin-bottom:22px}

.breve-image{display:block;float:right;width:132px;margin:0 0 12px 18px;border-radius:3px;
             overflow:hidden;border:1px solid var(--trait)}
.breve-image img{width:100%;height:88px;object-fit:cover;display:block}

.illustration{margin:0 0 28px;padding:0}
.illustration img{width:100%;height:auto;display:block;border-radius:3px;border:1px solid var(--trait)}
.illustration figcaption{font-size:12.5px;color:var(--corps-clair);margin-top:8px}

@media (max-width:700px){
  .breve-image{float:none;width:100%;margin:0 0 12px}
  .breve-image img{height:150px}
}

/* Date de publication inconnue : on affiche la date de repérage, en la
   distinguant nettement d'une vraie date de publication. */
.breve-date .date-inconnue{font-style:italic;color:var(--trait-fort)}