/* ============================================================
   LISIBILITÉ DES PAGES DE CONTENU
   Gestion des Directions Communales — AE Global Service
   Novembre 2026
   ------------------------------------------------------------
   À charger APRÈS site.css. Ne remplace rien : corrige des
   défauts mesurés dans un vrai navigateur, à 390 px.

   LE DÉFAUT PRINCIPAL, ET IL TOUCHE TOUTES LES PAGES

   site.css écrit, ligne 302 :
        .contenu-page { padding: 56px 0 }

   Or cette classe est posée sur le MÊME élément que .conteneur,
   qui apportait la gouttière : padding:0 24px. En raccourci,
   « padding: 56px 0 » remet les côtés à ZÉRO. Le texte des pages
   intérieures touchait donc les deux bords de l'écran — mesuré :
   largeur 390 px sur une fenêtre de 390 px, aucune marge.

   C'est ce qu'on voyait sur la page d'actualité, et cela valait
   pour toutes les pages intérieures des deux communes, le
   fichier site.css étant identique de part et d'autre.
   ============================================================ */


/* ------------------------------------------------------------
   1. LA GOUTTIÈRE REVIENT
   On reprend les valeurs de .conteneur : 24 px, et 18 px sur
   téléphone. Le max-width de .conteneur continue de s'appliquer,
   donc rien ne change sur grand écran sinon que le texte cesse
   de coller au bord quand la fenêtre fait exactement 1180 px.
   ------------------------------------------------------------ */
.contenu-page {
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 760px) {
  .contenu-page {
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* ------------------------------------------------------------
   2. LE GRAND TITRE
   Mesuré : 32 px pour un interligne de 34,5 px, soit 1,08. Sur
   un titre de quatre lignes, les lignes se touchent presque et
   les accents majuscules viennent buter sur la ligne du dessus.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  /* Le bandeau respire encore : 26 px le tassaient contre le menu et
     lui faisaient perdre son rôle d'en-tête. On réduit par rapport
     au bureau (56/48) sans l'écraser. */
  .page-tete {
    padding-top: 38px;
    padding-bottom: 32px;
  }
  .page-tete h1 {
    /* Le titre reste grand — c'est l'en-tête de la page. Ce qui le
       rendait pénible à lire, ce n'était pas sa taille mais son
       interligne de 34 px pour 32 px de corps : les lignes se
       touchaient. On desserre à 1,26 et on borne la casse sur les
       très longs titres. */
    font-size: clamp(1.6rem, 7vw, 2rem);
    line-height: 1.26;
    margin-bottom: 10px;
    /* Un titre long ne doit pas déborder sur un mot très long
       (un nom de localité, une référence de marché). */
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .page-tete p {
    font-size: .95rem;
  }
  .fil {
    font-size: .78rem;
    flex-wrap: wrap;
    row-gap: 2px;
  }
}


/* ------------------------------------------------------------
   3. L'IMAGE DE L'ARTICLE
   Sans proportion imposée, une photo verticale ou très large
   déforme la page, et la hauteur saute pendant le chargement.
   On fixe le cadre, l'image s'y adapte par recadrage.
   ------------------------------------------------------------ */
.article-image {
  margin: 0 0 26px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--vert-pale, #EDF4F0);
}

.article-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Le haut de l'image porte le plus souvent les visages et le
     sujet : en cas de recadrage, c'est le bas que l'on perd. */
  object-position: center 35%;
}

@media (max-width: 760px) {
  .article-image {
    /* La photo prend toute la largeur, gouttière comprise : c'est
       plus franc qu'une image rétrécie au milieu du texte. */
    margin-left: -18px;
    margin-right: -18px;
    border-radius: 0;
    margin-bottom: 22px;
  }
  .article-image img {
    aspect-ratio: 4 / 3;
  }
}


/* ------------------------------------------------------------
   4. LE CHAPÔ  (le résumé, en tête d'article)
   Il était posé en style direct dans la vue : 1,15 rem, vert,
   demi-gras — sur quatre lignes de vert soutenu, la lecture
   fatigue et l'on ne distingue plus le résumé du corps.
   On en fait un vrai chapô : même famille, un cran au-dessus du
   texte, avec un filet qui le détache sans l'alourdir.
   ------------------------------------------------------------ */
.article-chapo {
  margin: 0 0 24px;
  padding-left: 16px;
  border-left: 3px solid var(--or, #B8860B);
  font-size: 1.08rem;
  line-height: 1.68;
  color: var(--encre, #1A211E);
  font-weight: 400;
  max-width: 760px;
}

@media (max-width: 760px) {
  .article-chapo {
    font-size: 1.02rem;
    line-height: 1.62;
    padding-left: 13px;
    margin-bottom: 20px;
  }
}


/* ------------------------------------------------------------
   5. LE CORPS DU TEXTE
   .prose a déjà max-width:760px et un interligne de 1,75. Sur
   téléphone, on espace un peu les paragraphes : c'est ce qui
   fait respirer un texte long bien plus que la taille.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .prose {
    font-size: 1rem;
    line-height: 1.72;
  }
  .prose p {
    margin-bottom: 18px;
  }
  .prose p:last-child {
    margin-bottom: 0;
  }
}

/* De la place sous le dernier paragraphe : la bulle d'assistance
   et la barre du bas viennent sinon couvrir la fin du texte. */
@media (max-width: 760px) {
  .contenu-page {
    padding-bottom: 32px;
  }
  .contenu-page > div:last-child {
    margin-bottom: 18px;
  }
}


/* ------------------------------------------------------------
   6. LES CARTES D'ACTUALITÉ
   Une colonne sur téléphone, c'est déjà le cas. On ajuste ce
   qui se voit : la proportion des vignettes, et un titre qui ne
   se coupe pas au milieu d'un mot.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .grille-actu {
    gap: 18px;
  }
  .carte-actu .visuel,
  .carte-actu .vignette {
    aspect-ratio: 16 / 9;
  }
  .carte-actu .corps {
    padding: 16px;
  }
  .carte-actu h3 {
    font-size: 1.1rem;
    line-height: 1.34;
    overflow-wrap: break-word;
  }
  .carte-actu .corps p {
    font-size: .92rem;
    line-height: 1.6;
  }
}

/* Deux colonnes sur les tablettes : trois serrent trop, une seule
   gâche la largeur. */
@media (min-width: 761px) and (max-width: 1040px) {
  .grille-actu {
    grid-template-columns: repeat(2, 1fr);
  }
}