/* ============================================
   BLOG — CORPS D'ARTICLE
   Complement de .legal-content, charge par les
   SEULES pages d'article (/<lang>/blog/<slug>.html)
   ============================================ */

/*
   POURQUOI CETTE FEUILLE EXISTE

   Les articles reprennent .legal-content, dont le bloc de style s'intitule
   deja « LEGAL / ARTICLE CONTENT » (css/style.css). Mais cette classe ne
   traite que h2, h3, p et a : elle a ete ecrite pour cgu.html et
   mentions-legales.html, qui ne contiennent ni liste, ni image, ni citation.
   Les 17 articles repris du WordPress en comptent 155 elements de liste et
   43 images.

   POURQUOI UN FICHIER A PART, ET NON QUELQUES LIGNES DANS style.css

   Parce que cgu.html et mentions-legales.html emploient la meme classe et que
   leur rendu est intangible. Un fichier separe, charge par les seules pages
   d'article (src/fr/blog/blog.11tydata.js, champ `styles`), rend l'absence
   d'effet sur ces deux pages DEMONTRABLE plutot que probable : les regles
   ci-dessous ne sont jamais servies avec elles. Le second garde-fou est le
   prefixe .legal-content sur chaque selecteur, qui empeche ces regles de
   deborder sur le nav, le footer ou le fond de page de l'article lui-meme.

   D'OU VIENNENT LES VALEURS

   Des tokens existants (css/tokens.css) et du rythme deja pose par
   .legal-content : interligne 1.8 comme ses paragraphes, --primary pour les
   marqueurs, --border pour les filets, --radius pour les images,
   --heading-color pour les intertitres. Aucune couleur ni aucun espacement
   nouveau n'est introduit.

   Ce qui est reglee ici est declare au registre : docs/DIVERGENCES.md, R13.
*/

/* ---- LISTES ----
   css/style.css pose « * { margin: 0; padding: 0 } ». Une <ul> se retrouve
   donc sans retrait, et ses puces, dessinees en dehors de la boite de
   contenu, sortent du conteneur ou disparaissent sous le bord. Le retrait est
   donc obligatoire, pas decoratif. L'interligne reprend celui des
   paragraphes de .legal-content (1.8) pour que le texte ne change pas de
   rythme en entrant dans une liste. */
.legal-content ul,
.legal-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
    max-width: none;
}
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li {
    line-height: 1.8;
    margin-bottom: 0.5rem;
}
.legal-content li:last-child { margin-bottom: 0; }
.legal-content li::marker { color: var(--primary); }

/* Listes imbriquees : puce distincte, et pas de double interligne au
   raccordement avec l'element parent. */
.legal-content li > ul,
.legal-content li > ol { margin: 0.5rem 0 0; }
.legal-content li > ul { list-style: circle; }

/* Un paragraphe a l'interieur d'un element de liste (liste « lache » du
   markdown) ne doit pas ajouter sa propre marge basse a celle du <li>. */
.legal-content li > p { margin-bottom: 0.5rem; }
.legal-content li > p:last-child { margin-bottom: 0; }

/* ---- IMAGES ----
   max-width imperatif : les 37 images d'article sont versees en pleine
   resolution, 15 d'entre elles depassent les 760 px du conteneur et la plus
   large fait 28 851 px. Sans plafond, elles debordent de la colonne et
   installent un defilement horizontal sur toute la page.
   `height: auto` empeche l'ecrasement vertical une fois la largeur contrainte. */
.legal-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2rem auto;
    border-radius: var(--radius);
}

/* Le markdown produit « <p><img></p> » pour une image seule sur sa ligne. Le
   paragraphe ne porte alors aucun texte : sa marge basse s'ajouterait a celle
   de l'image. */
.legal-content p:has(> img:only-child) { margin-bottom: 0; }

/* ---- FIGURE ET LEGENDE ----
   Aucun des 17 articles migres ne produit de <figure> : le markdown rend une
   image seule en « <p><img></p> », et les legendes du WordPress ont ete
   reprises en paragraphes en italique. Ces regles couvrent le cas ou un
   auteur ecrirait la forme semantique a la main dans son markdown. */
.legal-content figure {
    margin: 2rem 0;
    max-width: none;
}
.legal-content figure img { margin: 0 auto; }
.legal-content figcaption {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---- INTERTITRE DE NIVEAU 4 ----
   .legal-content s'arrete a h3. Deux articles descendent au niveau 4. Sans
   cette regle, le h4 garde le « max-width: 700px » des titres de
   css/style.css et se replie 60 px avant les paragraphes qui l'entourent. */
.legal-content h4 {
    font-size: 0.95rem;
    color: var(--heading-color);
    margin-top: 1.5rem;
    max-width: none;
}

/* ---- CITATIONS ----
   Un article reprend trois declarations de dirigeants en citation. */
.legal-content blockquote {
    margin: 1.5rem 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--primary);
    max-width: none;
}
.legal-content blockquote p:last-child { margin-bottom: 0; }

/* ---- SEPARATEUR ----
   Le reset « * { margin: 0 } » laisse un <hr> colle au texte, avec le relief
   grave par defaut du navigateur. */
.legal-content hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 2.5rem 0;
}

/* ---- MOTS TRES LONGS ----
   Les articles citent des URL et des identifiants (CVE-2024-3094, noms de
   protocoles) qu'aucune espace ne coupe. Sur mobile, un seul de ces mots
   suffit a elargir la page. */
.legal-content { overflow-wrap: break-word; }

/* ============================================
   R111 — L'ARTICLE EN CARTE, PUIS « NOS AUTRES
   ARTICLES » EN CARROUSEL (note de recette 192)
   ============================================
   Demande : le contenu dans une carte « au style habituel des cartes du
   site », centree dans la page, contenu aligne a gauche : etiquette, titre,
   photo de couverture, texte. En dessous, hors de la carte, un carrousel des
   autres articles.

   Composants existants seulement : `.card` (fond verre, --radius-lg,
   bordure et ombre du site) ; l'etiquette `.blog-card-tag` et les cartes
   `.blog-card` de la liste du blog ; le carrousel `.feat-carousel` des pages
   produits, fleches comprises (R37 les descend sur la ligne des points
   jusqu'a 1170 px). Ce qui suit ne fait qu'ajuster ces composants a leur
   nouvelle place ; valeurs tirees de tokens.css. */

/* La carte : centree, a la largeur du texte (760 px, celle de
   .legal-content) plus ses marges interieures. */
.article-carte {
    max-width: calc(760px + 6rem);
    margin: 0 auto;
    padding: 3rem;
    text-align: left;
}
/* `.card:hover` passe la carte en degrade violet (molecules.css) : utile sur
   une vignette cliquable, deroutant sur une page entiere qu'on lit. La carte
   d'article garde donc son fond au survol. */
.article-carte:hover {
    background: var(--card-bg-glass);
    border-color: var(--card-border-glass);
}
.article-carte .legal-content {
    max-width: none;
    margin: 0;
}

/* Titre : aligne a gauche, a la largeur de la carte. La taille des <h1> du
   site (jusqu'a 3.2rem, style.css) est celle d'un bandeau centre ; dans une
   colonne de 760 px, le titre le plus long passait a six lignes. */
.article-titre {
    max-width: none;
    margin: 0 0 1.5rem;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    color: var(--heading-color);
}

/* Couverture : sous le titre, a gauche, jamais agrandie au-dela de sa taille
   (des logos de 300 px ne s'etirent pas sur 760). */
.article-couverture {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 2rem;
    border-radius: var(--radius);
}

/* Carrousel : les cartes du blog remplissent la hauteur de leur diapositive,
   pour que les six soient de meme taille quel que soit leur texte. */
.article-autres .blog-card { height: 100%; }
/* La diapositive est plus etroite qu'une carte de la liste (340 px au plus) :
   « AUTHENTIFICATION · 7 NOVEMBRE 2024 » passait sous la fleche du coin
   (constate a 1100 px). L'etiquette lui laisse sa place et passe a la ligne. */
.article-autres .blog-card-tag { padding-right: 1.5rem; }

@media (max-width: 640px) {
    .article-carte { padding: 1.75rem 1.25rem; }
}