/* ==========================================================================
   Blog public — liste et article
   ==========================================================================

   Complète accueil.css, qui porte déjà « .grille-articles » et
   « .carte-article ». Seuls les éléments propres au blog sont déclarés ici.
   ========================================================================== */

/* L'en-tête public est une pilule flottante posée par-dessus le contenu :
   la marge haute doit dégager sa hauteur, pas seulement respirer. */
.blog-public,
.article-public {
    padding-block: 6rem 5rem;
}

/* --------------------------------------------------------------------------
   Liste — en-tête et recherche
   -------------------------------------------------------------------------- */

.blog-public__entete {
    max-width: 42rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.blog-public__entete h1 {
    margin: 0.5rem 0 0.75rem;
    font-size: 2.5rem;
    line-height: 1.15;
}

.blog-public__entete p {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--couleur-texte-doux);
}

.blog-public__recherche {
    display: flex;
    gap: 0.75rem;
    max-width: 34rem;
    margin: 0 auto 3rem;
}

.blog-public__champ {
    position: relative;
    flex: 1;
}

.blog-public__champ i {
    position: absolute;
    top: 50%;
    left: 1.25rem;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--couleur-texte-doux);
    font-size: 0.9375rem;
    pointer-events: none;
    transition: color var(--transition-douce);
}

/* Le champ est redéclaré ici plutôt que d'hériter du style de base :
   celui des formulaires est pensé pour une colonne étroite, pas pour
   une barre de recherche mise en avant. */
.blog-public__champ input {
    width: 100%;
    height: 3.25rem;
    padding: 0 1.25rem 0 3rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-pilule);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    color: var(--couleur-texte);
    font-size: 0.9375rem;
    box-shadow: var(--ombre-legere);
    transition: border-color var(--transition-douce),
                box-shadow var(--transition-douce),
                background var(--transition-douce);
}

.blog-public__champ input::placeholder {
    color: var(--couleur-texte-doux);
}

.blog-public__champ input:focus {
    outline: none;
    border-color: var(--couleur-primaire);
    background: var(--champ-bg-focus);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--couleur-primaire) 15%, transparent);
}

.blog-public__champ input:focus + i,
.blog-public__champ:focus-within i {
    color: var(--couleur-primaire);
}

/* La croix native du champ de recherche jure avec la charte. */
.blog-public__champ input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.blog-public__recherche .bouton {
    height: 3.25rem;
    padding-inline: 1.75rem;
    border-radius: var(--rayon-pilule);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Liste — état vide et pagination
   -------------------------------------------------------------------------- */

.blog-public__vide {
    max-width: 32rem;
    margin-inline: auto;
    padding: 3rem 2rem;
    text-align: center;
}

.blog-public__vide h2 {
    margin: 1.25rem 0 0.625rem;
    font-size: 1.375rem;
}

.blog-public__vide p {
    margin: 0 0 1.5rem;
    color: var(--couleur-texte-doux);
}

.blog-public__pagination {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

/* --------------------------------------------------------------------------
   Vignette de carte — épingle
   -------------------------------------------------------------------------- */

.carte-article__vignette {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carte-article__epingle {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--rayon-pilule);
    background: var(--couleur-accent);
    color: #FFFFFF;
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Article — fil d'Ariane
   -------------------------------------------------------------------------- */

.article-public__fil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-width: 48rem;
    margin: 0 auto 2rem;
    font-size: 0.875rem;
    color: var(--couleur-texte-doux);
}

.article-public__fil a {
    color: var(--couleur-texte-doux);
    text-decoration: none;
    transition: color var(--transition-rapide);
}

.article-public__fil a:hover {
    color: var(--couleur-primaire);
}

.article-public__fil i {
    font-size: 0.625rem;
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Article — en-tête
   -------------------------------------------------------------------------- */

.article-public__entete {
    max-width: 48rem;
    margin: 0 auto 2.5rem;
}

.article-public__epingle {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    margin-bottom: 1rem;
    padding: 0.3125rem 0.875rem;
    border-radius: var(--rayon-pilule);
    background: color-mix(in srgb, var(--couleur-accent) 15%, transparent);
    color: var(--couleur-accent);
    font-size: 0.8125rem;
    font-weight: 600;
}

.article-public__titre {
    margin: 0 0 1rem;
    font-size: 2.75rem;
    line-height: 1.1;
}

.article-public__chapo {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--couleur-texte-doux);
}

.article-public__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--couleur-bordure);
    font-size: 0.9375rem;
    color: var(--couleur-texte-doux);
}

.article-public__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.article-public__meta i {
    color: var(--couleur-primaire);
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Article — corps et pied
   -------------------------------------------------------------------------- */

.article-public__corps {
    max-width: 48rem;
    margin-inline: auto;
}

.article-public__pied {
    display: flex;
    justify-content: center;
    max-width: 48rem;
    margin: 3.5rem auto 0;
    padding-top: 2.5rem;
    border-top: 1px solid var(--couleur-bordure);
}

/* --------------------------------------------------------------------------
   Article — suggestions
   -------------------------------------------------------------------------- */

.article-public__suggestions {
    margin-top: 4rem;
    padding-top: 3.5rem;
    border-top: 1px solid var(--couleur-bordure);
}

/* --------------------------------------------------------------------------
   Écrans étroits
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .blog-public,
    .article-public {
        padding-block: 5.5rem 3.5rem;
    }

    .blog-public__entete h1 {
        font-size: 1.875rem;
    }

    .blog-public__recherche {
        flex-direction: column;
    }

    .blog-public__recherche .bouton {
        justify-content: center;
    }

    .article-public__titre {
        font-size: 1.875rem;
    }

    .article-public__chapo {
        font-size: 1.0625rem;
    }

    .article-public__meta {
        gap: 0.75rem 1.25rem;
    }

    .article-public__pied .bouton {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Cartes d'articles — présentation publique
   ==========================================================================

   Complète accueil.css. La vignette occupe une proportion fixe, le corps
   pousse la ligne de métadonnées en bas : les cartes d'une même rangée
   s'alignent quelle que soit la longueur des textes.
   ========================================================================== */

.blog-public .carte-article,
.article-public .carte-article {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    transition: transform var(--transition-douce), box-shadow var(--transition-douce);
}

.blog-public .carte-article:hover,
.article-public .carte-article:hover {
    transform: translateY(-6px);
    box-shadow: var(--ombre-flottante);
}

/* --------------------------------------------------------------------------
   Vignette
   -------------------------------------------------------------------------- */

.blog-public .carte-article__vignette,
.article-public .carte-article__vignette {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg,
        var(--couleur-primaire) 0%,
        var(--couleur-primaire-clair) 45%,
        color-mix(in srgb, var(--couleur-accent) 55%, var(--couleur-primaire-clair)) 100%);
    color: #FFFFFF;
    font-size: 2.25rem;
    overflow: hidden;
}

/* Voile lumineux qui balaie la vignette au survol. */
.blog-public .carte-article__vignette::after,
.article-public .carte-article__vignette::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent 35%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 65%);
    transform: translateX(-100%);
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-public .carte-article:hover .carte-article__vignette::after,
.article-public .carte-article:hover .carte-article__vignette::after {
    transform: translateX(100%);
}

.blog-public .carte-article__vignette i,
.article-public .carte-article__vignette i {
    position: relative;
    z-index: 1;
    opacity: 0.85;
    transition: transform var(--transition-douce);
}

.blog-public .carte-article:hover .carte-article__vignette i,
.article-public .carte-article:hover .carte-article__vignette i {
    transform: scale(1.12);
}

/* --------------------------------------------------------------------------
   Corps
   -------------------------------------------------------------------------- */

.blog-public .carte-article__corps,
.article-public .carte-article__corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
}

.blog-public .carte-article__corps h2,
.blog-public .carte-article__corps h3,
.article-public .carte-article__corps h3 {
    margin: 0 0 0.75rem;
    font-size: 1.1875rem;
    line-height: 1.35;
}

.blog-public .carte-article__corps h2 a,
.blog-public .carte-article__corps h3 a,
.article-public .carte-article__corps h3 a {
    color: var(--couleur-texte);
    text-decoration: none;
    transition: color var(--transition-rapide);
}

.blog-public .carte-article__corps h2 a:hover,
.blog-public .carte-article__corps h3 a:hover,
.article-public .carte-article__corps h3 a:hover {
    color: var(--couleur-primaire);
}

.blog-public .carte-article__corps p,
.article-public .carte-article__corps p {
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--couleur-texte-doux);

    /* Trois lignes au plus : les cartes gardent la même hauteur. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Métadonnées, poussées en bas de carte
   -------------------------------------------------------------------------- */

.blog-public .carte-article__meta,
.article-public .carte-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--couleur-bordure);
    font-size: 0.8125rem;
    color: var(--couleur-texte-doux);
}

.blog-public .carte-article__meta span,
.article-public .carte-article__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.blog-public .carte-article__meta i,
.article-public .carte-article__meta i {
    color: var(--couleur-primaire);
    font-size: 0.75rem;
}

/* ==========================================================================
   Article — finitions
   ========================================================================== */

/* La première lettre du premier paragraphe, en lettrine. Discrète, mais
   elle installe immédiatement un ton éditorial. */
.article-public__corps > p:first-of-type::first-letter {
    float: left;
    margin: 0.05em 0.65rem 0 0;
    color: var(--couleur-primaire);
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 0.85;
}

/* Le chapô est mis en valeur par un filet vertical plutôt que par une
   simple couleur : il se distingue du corps sans l'écraser. */
.article-public__chapo {
    padding-left: 1.25rem;
    border-left: 3px solid color-mix(in srgb, var(--couleur-primaire) 35%, transparent);
}

/* --------------------------------------------------------------------------
   Métadonnées de tête
   -------------------------------------------------------------------------- */

.article-public__meta {
    align-items: center;
}

.article-public__meta time {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Corps — respiration de lecture
   -------------------------------------------------------------------------- */

.article-public__corps {
    font-size: 1.125rem;
    line-height: 1.8;
}

.article-public__corps > p {
    margin-bottom: 1.5rem;
}

/* Le premier titre du corps ne colle pas aux métadonnées. */
.article-public__corps > h2:first-child,
.article-public__corps > h3:first-child {
    margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Fil d'Ariane — pilule discrète
   -------------------------------------------------------------------------- */

.article-public__fil {
    padding: 0.5rem 1.125rem;
    border-radius: var(--rayon-pilule);
    background: color-mix(in srgb, var(--couleur-primaire) 5%, transparent);
    width: fit-content;
}

/* --------------------------------------------------------------------------
   Pied d'article
   -------------------------------------------------------------------------- */

.article-public__pied {
    gap: 1rem;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Suggestions — filet dégradé plutôt qu'un trait plat
   -------------------------------------------------------------------------- */

.article-public__suggestions {
    position: relative;
    border-top: none;
}

.article-public__suggestions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: min(100%, 48rem);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
        transparent 0%,
        var(--couleur-bordure) 20%,
        var(--couleur-bordure) 80%,
        transparent 100%);
}

/* --------------------------------------------------------------------------
   Écrans étroits
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .article-public__corps {
        font-size: 1.0625rem;
        line-height: 1.75;
    }

    .article-public__corps > p:first-of-type::first-letter {
        font-size: 3rem;
    }

    .article-public__chapo {
        padding-left: 1rem;
    }

    .article-public__fil {
        font-size: 0.8125rem;
        padding: 0.4375rem 0.875rem;
    }
}

/* ==========================================================================
   Cartes d'articles en page d'accueil
   ==========================================================================

   La section « Derniers articles » de l'accueil reprend exactement les
   cartes de la liste publique. Plutôt que de dupliquer chaque règle, la
   classe « .accueil » est rattachée ici aux mêmes sélecteurs.
   ========================================================================== */

.accueil .carte-article {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    transition: transform var(--transition-douce), box-shadow var(--transition-douce);
}

.accueil .carte-article:hover {
    transform: translateY(-6px);
    box-shadow: var(--ombre-flottante);
}

.accueil .carte-article__vignette {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg,
        var(--couleur-primaire) 0%,
        var(--couleur-primaire-clair) 45%,
        color-mix(in srgb, var(--couleur-accent) 55%, var(--couleur-primaire-clair)) 100%);
    color: #FFFFFF;
    font-size: 2.25rem;
    overflow: hidden;
}

.accueil .carte-article__vignette::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent 35%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 65%);
    transform: translateX(-100%);
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.accueil .carte-article:hover .carte-article__vignette::after {
    transform: translateX(100%);
}

.accueil .carte-article__vignette i {
    position: relative;
    z-index: 1;
    opacity: 0.85;
    transition: transform var(--transition-douce);
}

.accueil .carte-article:hover .carte-article__vignette i {
    transform: scale(1.12);
}

.accueil .carte-article__corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
}

.accueil .carte-article__corps h3 {
    margin: 0 0 0.75rem;
    font-size: 1.1875rem;
    line-height: 1.35;
}

.accueil .carte-article__corps h3 a {
    color: var(--couleur-texte);
    text-decoration: none;
    transition: color var(--transition-rapide);
}

.accueil .carte-article__corps h3 a:hover {
    color: var(--couleur-primaire);
}

.accueil .carte-article__corps p {
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--couleur-texte-doux);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.accueil .carte-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--couleur-bordure);
    font-size: 0.8125rem;
    color: var(--couleur-texte-doux);
}

.accueil .carte-article__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.accueil .carte-article__meta i {
    color: var(--couleur-primaire);
    font-size: 0.75rem;
}

/* ==========================================================================
   Commentaires
   ========================================================================== */

.commentaires {
    max-width: 48rem;
    margin: 4rem auto 0;
    padding-top: 3rem;
    border-top: 1px solid var(--couleur-bordure);
}

.commentaires__entete h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 2rem;
    font-size: 1.5rem;
}

.commentaires__entete i {
    color: var(--couleur-primaire);
    font-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   Avis de confirmation et d'erreur
   -------------------------------------------------------------------------- */

.commentaires__avis {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1.125rem 1.375rem;
    border-radius: var(--rayon-m);
}

.commentaires__avis--succes {
    background: color-mix(in srgb, var(--couleur-succes) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--couleur-succes) 30%, transparent);
}

.commentaires__avis--erreur {
    background: color-mix(in srgb, var(--couleur-erreur) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--couleur-erreur) 28%, transparent);
}

.commentaires__avis-icone {
    flex-shrink: 0;
    font-size: 1.125rem;
}

.commentaires__avis--succes .commentaires__avis-icone {
    color: var(--couleur-succes);
}

.commentaires__avis--erreur .commentaires__avis-icone {
    color: var(--couleur-erreur);
}

.commentaires__avis strong {
    display: block;
    margin-bottom: 0.25rem;
}

.commentaires__avis p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--couleur-texte-doux);
}

.commentaires__avis ul {
    margin: 0;
    padding-left: 1.125rem;
    font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Liste
   -------------------------------------------------------------------------- */

.commentaires__liste {
    margin: 0 0 3rem;
    padding: 0;
    list-style: none;
}

.commentaire {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--couleur-bordure);
}

.commentaire:last-child {
    border-bottom: none;
}

.commentaire__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--rayon-pilule);
    background: linear-gradient(135deg,
        var(--couleur-primaire) 0%,
        var(--couleur-primaire-clair) 100%);
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.commentaire__corps {
    flex: 1;
    min-width: 0;
}

.commentaire__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.commentaire__auteur {
    font-weight: 600;
}

.commentaire__date {
    font-size: 0.8125rem;
    color: var(--couleur-texte-doux);
}

.commentaire__texte {
    margin: 0;
    line-height: 1.7;
    color: var(--couleur-texte);

    /* Les retours à la ligne saisis par le visiteur sont conservés, sans
       qu'aucune balise ne soit interprétée. */
    white-space: pre-line;
    overflow-wrap: break-word;
}

.commentaires__vide {
    margin: 0 0 3rem;
    padding: 2rem;
    border: 1px dashed var(--couleur-bordure);
    border-radius: var(--rayon-m);
    text-align: center;
    color: var(--couleur-texte-doux);
}

/* --------------------------------------------------------------------------
   Formulaire
   -------------------------------------------------------------------------- */

.commentaires__formulaire {
    padding: 2rem;
}

.commentaires__formulaire h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

.commentaires__mention {
    margin: 0 0 1.75rem;
    font-size: 0.875rem;
    color: var(--couleur-texte-doux);
}

.commentaires__formulaire .champ + .champ,
.commentaires__formulaire .ligne-champs + .champ {
    margin-top: 1.25rem;
}

/* Les deux colonnes s'alignent par le haut : sans cela, un libellé
   plus long décale son champ vers le bas. */
.commentaires__formulaire .ligne-champs {
    align-items: start;
}

.commentaires__formulaire .ligne-champs .champ {
    margin-top: 0;
}

.commentaires__formulaire .bouton {
    margin-top: 1.5rem;
}

.commentaires__fermes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1.5rem;
    border-radius: var(--rayon-m);
    background: color-mix(in srgb, var(--couleur-texte) 5%, transparent);
    color: var(--couleur-texte-doux);
    font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Écrans étroits
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .commentaires {
        margin-top: 3rem;
        padding-top: 2.5rem;
    }

    .commentaires__entete h2 {
        font-size: 1.25rem;
    }

    .commentaire__avatar {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.75rem;
    }

    .commentaires__formulaire {
        padding: 1.5rem;
    }

    .commentaires__formulaire .bouton {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   Image de couverture — cartes et page d'article
   ========================================================================== */

/* Cartes (liste, suggestions, accueil) : l'image remplit la vignette et
   masque le dégradé, qui reste le repli des articles sans couverture.
   Le recadrage est voulu : la grille reste régulière. */
.blog-public .carte-article__vignette img,
.article-public .carte-article__vignette img,
.accueil .carte-article__vignette img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-douce);
}

.blog-public .carte-article:hover .carte-article__vignette img,
.article-public .carte-article:hover .carte-article__vignette img,
.accueil .carte-article:hover .carte-article__vignette img {
    transform: scale(1.05);
}

/* L'épingle reste lisible par-dessus une photo. */
.carte-article__epingle {
    z-index: 2;
    box-shadow: var(--ombre-legere);
}

/* Page d'article : image entière, à son ratio naturel, alignée sur la
   colonne de lecture. Seule une image très haute est plafonnée. */
.article-public__couverture {
    max-width: 48rem;
    margin: 0 auto 2.5rem;
    overflow: hidden;
    border-radius: var(--rayon-l);
    box-shadow: var(--ombre-douce);
}

.article-public__couverture img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 40rem;
    object-fit: cover;
}

@media (max-width: 640px) {
    .article-public__couverture {
        margin-bottom: 2rem;
        border-radius: var(--rayon-m);
    }
}


/* ==========================================================================
   Grille et vignette — proportions stables
   ========================================================================== */

/* « auto-fill » conserve les colonnes vides : un article seul garde la
   largeur d'une carte au lieu de s'étirer sur toute la rangée. */
.blog-public .grille-articles,
.article-public .grille-articles,
.accueil .grille-articles {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

/* La hauteur fixe d'accueil.css l'emportait sur le ratio : la vignette
   redevient un vrai 16:9, quelle que soit la largeur de la carte. */
.blog-public .carte-article__vignette,
.article-public .carte-article__vignette,
.accueil .carte-article__vignette {
    height: auto;
}