/* algeriades.com — composants : extraits d'articles, listes, formulaires

   Rien n'est posé sur un aplat : les contenus reposent directement sur
   la mosaïque, comme dans la maquette d'origine. La structure est tenue
   par les filets et les espaces, pas par des cartes remplies. */

/* Titre de section ---------------------------------------------------- */

/* « Lire aussi » : sans-serif orange, casse normale, comme l'original */
.section-titre {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--accent);
  margin-bottom: calc(var(--pas) * 2);
}

/* Les quatre articles de tête ------------------------------------------
   Contrainte de fond : le site n'a que des vignettes. Les 1531 logos
   font 108px de large en moyenne, 154px au maximum, et il n'existe
   aucune image plus grande. Les illustrations sont donc posées à leur
   taille réelle — les étirer ne donnerait que du flou. */

.articles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--pas) * 4) calc(var(--pas) * 5);
  list-style: none;
  margin-bottom: calc(var(--pas) * 6);
}

.extrait {
  display: flex;
  flex-direction: column;
  gap: var(--pas);
  min-width: 0;
}

/* Les titres d'articles étaient en gras sans-serif blanc sur la maquette
   d'origine (<font face="verdana,arial,helvetica"> + <b>), pas en serif. */
.extrait__titre {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
}

.extrait__titre a {
  color: var(--texte);
  text-decoration: none;
}

.extrait__titre a:visited {
  color: var(--texte);
}

.extrait__titre a:hover,
.extrait__titre a:focus-visible {
  color: var(--or-clair);
}

/* La vignette flotte, le chapô l'habille — la disposition d'origine */
/* Le chapô est dans la même encre que le corps d'un article (--texte), et
   non dans le gris atténué : c'est du texte à lire, pas une annotation. */
.extrait__corps {
  color: var(--texte);
  font-size: 0.85rem;
}

.extrait__illustration {
  float: left;
  margin: 2px calc(var(--pas) * 2) var(--pas) 0;
}

.extrait__illustration img {
  border-radius: 2px;
}

.extrait__suite {
  clear: both;
  padding-top: 2px;
}

/* Lire aussi -----------------------------------------------------------
   Deux colonnes de cinq titres, comme les deux listes de la maquette
   d'origine. Ce sont deux listes distinctes et non un découpage
   automatique : cinq de chaque côté, toujours. */

.lire-aussi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 calc(var(--pas) * 5);
  margin-bottom: calc(var(--pas) * 5);
}

/* Puces carrées vertes et liens verts soulignés, comme l'original */
.lire-aussi ul {
  list-style: square;
  padding-left: calc(var(--pas) * 2.5);
}

.lire-aussi li {
  color: var(--lien);
  padding: 3px 0;
}

.lire-aussi a {
  color: var(--lien);
  font-size: 0.82rem;
}

.lire-aussi a:visited {
  color: var(--lien-visite);
}

.lire-aussi a:hover,
.lire-aussi a:focus-visible {
  color: var(--lien-survol);
}

/* Formulaire de recherche ------------------------------------------------
   Le balisage vient de #FORMULAIRE_RECHERCHE, surchargé dans
   squelettes/formulaires/recherche.html. */

.formulaire_recherche .editer-groupe {
  display: flex;
  gap: var(--pas);
}

/* L'étiquette reste dans le DOM pour les lecteurs d'écran */
.formulaire_recherche label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.formulaire_recherche input.search,
.formulaire_recherche input.text {
  flex: 1;
  min-width: 0;
  width: 100%;
  /* Le champ est posé sur le panneau noir de la colonne : il lui faut
     un ton plus clair, pas plus sombre, pour se détacher. */
  background: #1c1c1c;
  border: 1px solid #3a3a3a;
  border-radius: var(--rayon);
  color: var(--texte);
  padding: var(--pas);
  font-family: inherit;
  /* 16px au minimum : en deçà, iOS zoome à la mise au point du champ */
  font-size: 16px;
}

.formulaire_recherche input::placeholder {
  color: var(--texte-discret);
}

.formulaire_recherche input.submit {
  flex: none;
  background: var(--or-sombre);
  border: 1px solid var(--or);
  border-radius: var(--rayon);
  color: var(--or-clair);
  padding: var(--pas) calc(var(--pas) * 1.5);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.formulaire_recherche input.submit:hover {
  background: var(--or);
  color: #111;
}

/* Points de rupture ------------------------------------------------------ */

@media (max-width: 900px) {
  .articles {
    gap: calc(var(--pas) * 4) calc(var(--pas) * 3);
  }
}

@media (max-width: 760px) {
  .articles,
  .lire-aussi {
    grid-template-columns: minmax(0, 1fr);
  }

  .articles {
    gap: calc(var(--pas) * 4);
  }
}

/* Article ---------------------------------------------------------------
   Contenu long (article, rubrique, breve) : fil d'ariane, en-tête, et le
   corps de texte rendu par SPIP (.texte-riche). */

.fil {
  font-size: 0.82rem;
  color: var(--texte-discret);
  margin-bottom: calc(var(--pas) * 3);
}

.fil a {
  color: var(--texte-doux);
  text-decoration: none;
}

.fil a:hover,
.fil a:focus-visible {
  color: var(--or-clair);
}

/* Les deux colonnes de la maquette d'origine : le logo puis « Lire aussi »
   à gauche, le texte à droite sur toute la hauteur (l'ancien rowspan=2).

   La taille de texte est posée ici, et pas sur le body : elle ne vaut que
   pour l'article. Elle sert aussi d'unité aux deux « ch » des colonnes,
   qui se mesurent sur la police du conteneur — sans elle, la colonne
   serait dimensionnée sur les 17px du reste du site et la justification
   ne tomberait plus sur les 55 caractères visés. */
.article__corps {
  font-size: var(--texte-article);
  display: grid;
  grid-template-columns: var(--largeur-cote) minmax(0, var(--largeur-lecture));
  grid-template-areas:
    "logo  texte"
    "aussi texte";
  /* La colonne de texte enjambe les deux lignes. Sans hauteur explicite,
     elles sont toutes deux « auto » et se partagent cette hauteur à parts
     égales : « Lire aussi » se retrouvait alors à mi-page, très loin sous
     le logo. La première ligne prend la hauteur du logo, la seconde tout
     le reste — et « Lire aussi » se cale en haut, sous le logo. */
  grid-template-rows: auto 1fr;
  /* Le tableau d'origine avait cellpadding=10 de part et d'autre */
  column-gap: calc(var(--pas) * 2.5);
  row-gap: calc(var(--pas) * 3);
  align-items: start;
  /* La colonne de côté est collée au texte : son contenu s'aligne sur le
     bord qu'elle partage avec lui, comme les align="right" d'origine. */
  justify-items: end;
}

.article__colonne {
  grid-area: texte;
  justify-self: stretch;
  min-width: 0;
}

.article__logo {
  grid-area: logo;
}

.article__logo img {
  border-radius: var(--rayon);
}

/* « Lire aussi » sous le logo : titre orange, puis les titres d'articles
   en petit — l'ancien #CC6600 suivi des liens en size="-2". */
.article__aussi {
  grid-area: aussi;
  text-align: right;
}

.article__aussi-titre {
  font-family: var(--sans);
  font-size: 0.9em;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: var(--pas);
}

.article__aussi ul {
  list-style: none;
}

.article__aussi li {
  margin-bottom: 6px;
}

.article__aussi a {
  font-size: 0.8em;
  line-height: 1.4;
  text-decoration: none;
}

.article__aussi a:hover,
.article__aussi a:focus-visible {
  text-decoration: underline;
}

/* Plus petit que le h1 des autres pages : à côté d'un corps de 15px, le
   titre pleine taille écrasait le texte. La maquette d'origine le composait
   à peine plus gros que le corps (size="-1" contre size="-2") ; on garde
   l'écart d'un vrai titre, sans le laisser dominer la page. */
.article__titre {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  margin-bottom: calc(var(--pas) * 2);
}

/* Le chapô était en gras, à la taille du texte — pas plus gros que lui. */
.article__chapo {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.55;
  color: var(--texte);
  margin-bottom: calc(var(--pas) * 2);
}

/* Les intertitres du texte se mesurent sur le corps de l'article, pas sur
   les clamp en rem de base.css : ceux-ci sont calés sur les 17px du reste
   du site et donnaient à un simple intertitre l'allure d'un titre de page.
   Cadré sur .article__colonne, et non sur .article__corps, pour laisser au
   « Lire aussi » de la colonne de côté sa propre taille. */
.article__colonne h2 {
  font-size: 1.2em;
}

.article__colonne h3,
.article__colonne h4 {
  font-size: 1.05em;
}

/* Corps de texte riche (sortie de #TEXTE) ------------------------------- */

/* Tout corps de texte long du site est à la taille de l'article : page de
   contact, page 404, chapeaux de rubrique. La page article la posait déjà
   sur .article__corps, elle est donc inchangée.

   La taille doit être déclarée ici, sur l'élément même qui porte le
   max-width : celui-ci est en « ch », mesuré sur la police de l'élément.
   Les deux se tiennent, et la justification reste à ~55 caractères quelle
   que soit la page. */
.texte-riche {
  font-size: var(--texte-article);
  max-width: var(--largeur-lecture);
}

/* Variante pleine largeur : la justification de lecture n'a pas de sens
   quand le texte coiffe un bloc qui, lui, occupe toute la colonne — sur la
   page de contact, l'intro se serait arrêtée bien avant le formulaire.
   Posée après .texte-riche : même spécificité, c'est l'ordre qui tranche. */
.texte-riche--large {
  max-width: none;
}

.texte-riche p {
  margin-bottom: calc(var(--pas) * 2);
}

.texte-riche h2,
.texte-riche h3,
.texte-riche h4 {
  margin: calc(var(--pas) * 4) 0 calc(var(--pas) * 1.5);
}

.texte-riche a {
  color: var(--lien);
}

.texte-riche a:visited {
  color: var(--lien-visite);
}

.texte-riche ul,
.texte-riche ol {
  margin: 0 0 calc(var(--pas) * 2) calc(var(--pas) * 3);
}

.texte-riche li {
  margin-bottom: 4px;
}

.texte-riche blockquote,
.texte-riche .spip_poesie {
  border-left: 2px solid var(--or-sombre);
  padding-left: calc(var(--pas) * 2);
  margin: 0 0 calc(var(--pas) * 2);
  color: var(--texte-doux);
  font-style: italic;
}

/* Documents et images insérés par SPIP */
.texte-riche .spip_documents,
.texte-riche figure {
  margin: calc(var(--pas) * 2) 0;
}

.texte-riche img,
.article__texte img {
  height: auto;
  border-radius: var(--rayon);
}

.spip_doc_titre,
.spip_doc_descriptif {
  font-size: 0.82rem;
  color: var(--texte-discret);
}

/* Notes de bas de page */
.texte-riche .spip_note {
  color: var(--texte-doux);
}

.article__ps,
.article__notes {
  margin-top: calc(var(--pas) * 4);
  padding-top: calc(var(--pas) * 2);
  border-top: 1px solid var(--bordure);
  font-size: 0.9em;
  color: var(--texte-doux);
}

/* Ecran etroit : les deux colonnes se déplient en une seule, dans l'ordre
   où on les lit — le logo, le texte, puis « Lire aussi ». C'est pour
   permettre cette réorganisation que les trois pièces sont filles de la
   grille plutôt que rassemblées dans un <aside>.

   Le seuil est à 1200px, très au-dessus du 760px du mobile. La colonne de
   côté est une piste FIXE de 40ch : elle ne se réduit jamais, et tant que
   la fenêtre ne peut pas loger les deux colonnes en entier, elle confisque
   la place au texte au lieu de la partager. Mesuré : à 844px de fenêtre le
   texte tombait à 215px pour 334px de colonne de côté quasi vide, et même
   à 1100px il ne faisait encore que 433px.

   Le calcul du seuil : il faut 378px de colonne de côté + 20px de gouttière
   + 520px de justification de lecture, soit 918px de colonne de contenu ;
   plus la colonne de navigation (200px), sa gouttière (32px) et les marges
   de page (32px) — d'où 1182px, arrondis à 1200. En deçà, une seule colonne
   donne au texte sa pleine mesure. */
@media (max-width: 1200px) {
  .article__corps {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "logo"
      "texte"
      "aussi";
    justify-items: stretch;
  }

  .article__aussi {
    text-align: left;
    padding-top: calc(var(--pas) * 2);
    border-top: 1px solid var(--bordure);
  }
}

/* Sous-rubriques d'une page rubrique */
.sous-rubriques {
  margin-bottom: calc(var(--pas) * 4);
}

.sous-rubriques ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas) calc(var(--pas) * 2);
}

.sous-rubriques a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  color: var(--texte);
  text-decoration: none;
  font-size: 0.88rem;
}

.sous-rubriques a:hover,
.sous-rubriques a:focus-visible {
  border-color: var(--or);
  color: var(--or-clair);
}

/* Recherche et formulaires de page -------------------------------------- */

.recherche-page {
  max-width: 30rem;
  margin-bottom: calc(var(--pas) * 3);
}

.recherche-terme {
  color: var(--texte-doux);
  margin-bottom: calc(var(--pas) * 3);
}

/* Pagination — page de recherche uniquement -------------------------------
   Le balisage vient du modele de SPIP (prive/modeles/pagination.html) :
   une <ul class="pagination-items"> de <li class="pagination-item">, la
   page courante portant « on active », les ellipses « tbc disabled ».
   Rien de tout cela n'etait habille a l'origine, d'ou la file de chiffres
   nus qu'on voyait avant. */

.pagination {
  margin-top: calc(var(--pas) * 5);
}

.pagination-items {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pas);
}

.pagination-item-label {
  display: block;
  min-width: 34px;
  padding: 5px 9px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  text-align: center;
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--texte-doux);
}

a.pagination-item-label:hover,
a.pagination-item-label:focus-visible {
  border-color: var(--or);
  color: var(--or-clair);
}

a.pagination-item-label:visited {
  color: var(--texte-doux);
}

/* La page courante : posee, pas cliquable */
.pagination-item.active .pagination-item-label {
  border-color: var(--or-sombre);
  background: var(--fond-carte);
  color: var(--or-clair);
}

/* Les « … » entre deux plages de numeros ne sont pas des boutons */
.pagination-item.disabled .pagination-item-label {
  border-color: transparent;
  color: var(--texte-discret);
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Formulaires SPIP (contact, écrire à l'auteur) sur fond sombre */
/* Le formulaire occupe toute la colonne. Plafonné à 40rem il laissait un
   large vide à sa droite — la colonne fait 774px sur un écran de 1000. */
.formulaire-page {
  max-width: none;
}

/* Les champs d'une ligne, eux, restent courts : étirés sur toute la
   largeur ils deviennent pénibles à relire. C'est aussi ce que faisait la
   maquette d'origine — deux champs brefs, et la seule zone de texte au
   large. La zone de texte garde donc son width: 100%. */
.formulaire-page input[type="text"],
.formulaire-page input[type="email"],
.formulaire-page input[type="url"],
.formulaire_spip input.text {
  max-width: 28rem;
}

.formulaire_spip {
  margin: calc(var(--pas) * 2) 0;
}

.formulaire_spip fieldset {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: calc(var(--pas) * 2);
  margin: 0 0 calc(var(--pas) * 2);
}

.formulaire_spip legend {
  padding: 0 var(--pas);
  color: var(--texte-doux);
}

.formulaire_spip label,
.formulaire-page label {
  display: block;
  margin-bottom: 4px;
  color: var(--texte-doux);
  font-size: 0.9rem;
}

.formulaire_spip .editer:not(.editer-groupe) {
  margin-bottom: calc(var(--pas) * 2);
}

.formulaire-page input[type="text"],
.formulaire-page input[type="email"],
.formulaire-page input[type="url"],
.formulaire-page textarea,
.formulaire_spip input.text,
.formulaire_spip textarea {
  width: 100%;
  background: #1c1c1c;
  border: 1px solid #3a3a3a;
  border-radius: var(--rayon);
  color: var(--texte);
  padding: var(--pas);
  font-family: inherit;
  font-size: 16px;
}

.formulaire-page textarea,
.formulaire_spip textarea {
  min-height: 8rem;
  resize: vertical;
}

.formulaire-page .btn,
.formulaire_spip .btn,
.formulaire-page button[type="submit"],
.formulaire-page input[type="submit"] {
  background: var(--or-sombre);
  border: 1px solid var(--or);
  border-radius: var(--rayon);
  color: var(--or-clair);
  padding: var(--pas) calc(var(--pas) * 2);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.formulaire-page .btn:hover,
.formulaire_spip .btn:hover {
  background: var(--or);
  color: #111;
}

/* Messages de retour SPIP */
.formulaire_spip .reponse_formulaire {
  padding: var(--pas);
  border-radius: var(--rayon);
  margin-bottom: calc(var(--pas) * 2);
}

.formulaire_spip .reponse_formulaire_ok {
  border: 1px solid #2f7d32;
  color: #7cf07c;
}

.formulaire_spip .reponse_formulaire_erreur,
.formulaire_spip .erreur_message {
  border: 1px solid #a33;
  color: #f0a0a0;
}