/* ==========================================================================
   EDITORIAL.CSS — art-piramida.com
   Refonte 23/09/2026 (retour Mathias) : la RUBRIQUE devient une vraie une de
   journal (à la une + secondaires + grille + pagination), et le GABARIT
   ARTICLE reçoit une typographie riche (strong/em/citation/encadrés/figures/
   listes en cartes) puisque le contenu lui-même reste nu (gras/italique/
   images posés par un autre agent, jamais ici).
   Chargé APRÈS style.css (voir inc/produits.php §7) : ne redéfinit aucun
   jeton --fond/--plaque/--encre/--sourde/--accent/--argon/--filet, ne fait
   que consommer ceux de style.css. Angles droits partout, mode clair
   uniquement, aucune police en dehors de Tilt Warp / Onest.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. MASTHEAD DE RUBRIQUE — remplace l'encadré gris "RUBRIQUE / ..."
   (retour Mathias 23/09 : "le héros ne donne pas envie"). Un vrai nameplate
   de journal : filet épais en tête, date du jour, nombre d'articles, titre,
   chapô SEULEMENT si la description existe (rien d'inventé), navigation
   entre les rubriques du site, filet fin en pied.
   -------------------------------------------------------------------------- */
.ap-masthead{
  background:var(--fond);
  border-top:3px solid var(--encre);
  border-bottom:1px solid var(--filet);
}
.ap-masthead-haut{
  display:flex;flex-wrap:wrap;gap:6px 16px;
  justify-content:space-between;align-items:center;
  padding-block:12px;
  border-bottom:1px solid var(--filet);
  font-family:var(--police-boitier);
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--sourde);
}
.ap-masthead-corps{padding-block:24px 18px}
.ap-masthead-titre{margin-bottom:10px}
.ap-masthead-chapo{font-size:17px;line-height:1.55;color:var(--sourde);max-width:64ch;margin:0}
.ap-masthead-nav{border-top:1px solid var(--filet)}
.ap-masthead-nav-liste{
  display:flex;gap:6px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-block:10px;
  scrollbar-width:thin;
}
.ap-masthead-lien{
  flex:none;white-space:nowrap;
  font-family:var(--police-boitier);font-size:13px;
  padding:7px 14px;
  color:var(--sourde);
  border:1px solid var(--filet);
}
.ap-masthead-lien:hover{color:var(--encre);border-color:var(--sourde)}
.ap-masthead-lien.est-actif{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

@media (max-width:640px){
  .ap-masthead-haut{font-size:11px}
  .ap-masthead-corps{padding-block:18px 14px}
}

/* --------------------------------------------------------------------------
   1. RUBRIQUE — À la une + secondaires
   -------------------------------------------------------------------------- */
.ap-une-zone{padding-block:36px 44px}

.ap-une{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:32px;
  align-items:stretch;
  margin-bottom:36px;
}
.ap-une-media{position:relative;display:block;background:var(--plaque)}
.ap-une-media .ap-photo{height:100%;aspect-ratio:auto}
.ap-une-media .ap-photo img{height:100%;min-height:320px}
.ap-une-media .ap-pastille{top:16px;left:16px;right:auto}

.ap-une-corps{display:flex;flex-direction:column;justify-content:center;padding-block:4px}
.ap-une-corps .ap-article-cat{display:inline-block;font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.ap-une-corps h2{font-size:clamp(1.7rem,2.2vw + 1rem,2.6rem);margin-bottom:14px}
.ap-une-corps h2 a{color:inherit}
.ap-une-corps h2 a:hover{color:var(--accent)}
.ap-une-corps .ap-chapo{margin-bottom:18px}
.ap-une-corps .ap-carte-meta{margin-bottom:20px}
.ap-une-corps .ap-bouton{align-self:flex-start}

.ap-une-secondaires{margin-top:0}
.ap-une-secondaires .ap-carte h3{font-size:16.5px}

/* meta commune : date · temps de lecture · [auteur/rubrique] */
.ap-carte-meta{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12.5px;color:var(--sourde);letter-spacing:.01em;margin-bottom:6px}
.ap-carte-meta span+span::before{content:"·";display:inline-block;margin-right:10px;color:var(--filet)}
.ap-une-corps .ap-carte-meta span+span::before{color:var(--sourde)}

/* pastille "rubrique" en surimpression sur les cartes de la grille du bas —
   neutre (plaque+filet), distincte de l'accent réservé à "À la une". */
.ap-carte-media{position:relative}
.ap-carte-rubrique{
  position:absolute;top:10px;left:10px;
  background:var(--plaque);color:var(--sourde);
  border:1px solid var(--filet);
  font-size:11px;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 9px;
}

.ap-grille-titre{font-size:clamp(1.4rem,1.4vw + 1rem,1.9rem);margin-bottom:22px}

@media (max-width:900px){
  .ap-une{grid-template-columns:1fr;gap:20px}
  .ap-une-media .ap-photo{aspect-ratio:16/9}
  .ap-une-media .ap-photo img{min-height:0}
}

/* --------------------------------------------------------------------------
   2. CTA CONTEXTUEL DE RUBRIQUE — discret mais présent : une ligne, un
   filet d'accent à gauche, jamais un bloc plein écran ni une alerte.
   -------------------------------------------------------------------------- */
.ap-cta-contextuel{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--plaque);
  border-left:3px solid var(--accent);
  padding:16px 20px;
  margin-block:20px 8px;
}
.ap-cta-contextuel p{margin:0;font-size:14.5px;color:var(--encre)}
.ap-cta-contextuel .ap-bouton{flex:none}

/* --------------------------------------------------------------------------
   3. PAGINATION — the_posts_pagination() n'était stylée nulle part.
   -------------------------------------------------------------------------- */
.ap-pagination-nav .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.ap-pagination-nav .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding-inline:8px;
  border:1px solid var(--filet);
  background:var(--plaque);
  color:var(--encre);
  font-family:var(--police-boitier);
  font-size:14px;
}
.ap-pagination-nav .page-numbers.current{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ap-pagination-nav .page-numbers:not(.current):not(.dots):hover{border-color:var(--accent);color:var(--accent)}
.ap-pagination-nav .page-numbers.dots{border-color:transparent;background:none;color:var(--sourde)}
.ap-pagination-nav .page-numbers.prev,.ap-pagination-nav .page-numbers.next{padding-inline:16px}

/* --------------------------------------------------------------------------
   4. GABARIT ARTICLE — typographie riche du corps (.ap-contenu).
   Le contenu en base reste nu aujourd'hui (pas de gras/italique/image) :
   ces règles habillent CE QUI SERA posé par le rédacteur, sans rien casser
   sur un article encore nu.
   -------------------------------------------------------------------------- */

/* chapô : déjà en 500/21px via style.css — on ajoute juste un repère visuel
   qui le distingue nettement du corps de lecture. */
.ap-article-intro .ap-chapo{
  padding-left:14px;
  border-left:2px solid var(--filet);
}

/* strong : encre pleine + surlignage discret (jamais un fond plein, un trait
   de surbrillance bas, comme un feutre passé une fois). */
.ap-contenu strong{
  font-weight:600;
  color:var(--encre);
  background-image:linear-gradient(transparent 72%, color-mix(in srgb, var(--accent) 22%, transparent) 72%);
}

/* em : italique VISIBLE — demande explicite de Mathias le 23/09 (R-0851),
   prime sur la charte (Onest n'a pas d'italique : oblique synthétique assumée). */
.ap-contenu em{
  font-style:italic;
  font-weight:500;
  color:var(--encre);
}

/* citation / pull-quote : un guillemet en Tilt Warp en fond, un filet
   d'accent, texte en 500 (toujours pas d'italique synthétique). */
.ap-contenu blockquote{
  position:relative;
  margin:34px 0;
  padding:26px 28px 24px 34px;
  background:var(--plaque);
  border-left:3px solid var(--accent);
  font-family:var(--police-lecture);
  font-weight:500;
  font-size:clamp(19px,1.6vw + 12px,23px);
  line-height:1.5;
  color:var(--encre);
}
.ap-contenu blockquote::before{
  content:"”";
  position:absolute;
  top:-10px;left:14px;
  font-family:var(--police-boitier);
  font-size:64px;
  line-height:1;
  color:var(--accent);
  opacity:.22;
  pointer-events:none;
}
.ap-contenu blockquote p{margin:0}
.ap-contenu blockquote p+p{margin-top:.6em}
.ap-contenu blockquote cite{
  display:block;margin-top:14px;
  font-family:var(--police-lecture);
  font-weight:400;font-style:normal;
  font-size:13px;color:var(--sourde);
  letter-spacing:.02em;
}
.ap-contenu blockquote cite::before{content:"— "}

/* H2 : filet d'accent court au-dessus du titre, en plus du filet neutre déjà
   posé par style.css (border-top) — deux repères, un seul en couleur. */
.ap-contenu h2{position:relative}
.ap-contenu h2::before{
  content:"";
  display:block;
  width:44px;height:3px;
  background:var(--accent);
  margin-bottom:16px;
}

/* figures / images de corps (posées par le rédacteur) : cadre net + traits
   de coupe cohérents avec le reste du site, légende travaillée. */
.ap-contenu figure{
  position:relative;
  border:1px solid var(--filet);
  background:var(--plaque);
  padding:6px;
}
.ap-contenu figure img{display:block;width:100%;height:auto;margin:0}
.ap-contenu figure::before,.ap-contenu figure::after{
  content:"";position:absolute;width:10px;height:10px;
  border-top:1.5px solid var(--sourde);border-left:1.5px solid var(--sourde);
  top:-1px;left:-1px;
}
.ap-contenu figure::after{
  left:auto;right:-1px;top:auto;bottom:-1px;
  border-top:0;border-left:0;
  border-bottom:1.5px solid var(--sourde);border-right:1.5px solid var(--sourde);
}
.ap-contenu figcaption{
  padding:10px 6px 4px;
  font-size:12.5px;line-height:1.5;color:var(--sourde);
}

/* listes de corps (hors sb-checklist) : cartes numérotées, jamais des puces
   nues — le doctrine "zéro liste à puces" s'applique à TOUT le contenu. */
.ap-contenu ul:not([class]),.ap-contenu ol:not([class]){
  list-style:none;
  display:grid;
  gap:2px;
  margin:22px 0;
  padding:0;
  counter-reset:ap-liste;
}
.ap-contenu ul:not([class]) li,.ap-contenu ol:not([class]) li{
  position:relative;
  padding:12px 16px 12px 46px;
  margin:0;
  background:var(--plaque);
  border-bottom:1px solid var(--filet);
  font-size:16px;
  line-height:1.5;
}
.ap-contenu ul:not([class]) li:first-child,.ap-contenu ol:not([class]) li:first-child{border-top:1px solid var(--filet)}
.ap-contenu ul:not([class]) li::before,.ap-contenu ol:not([class]) li::before{
  counter-increment:ap-liste;
  content:counter(ap-liste);
  position:absolute;left:14px;top:12px;
  display:inline-grid;place-items:center;
  width:22px;height:22px;
  font-family:var(--police-boitier);font-size:12px;
  color:var(--accent);border:1px solid var(--accent);
}
/* une liste non ordonnée reste numérotée visuellement (cohérence visuelle),
   sauf si elle contient déjà des liens de navigation (sommaire, menus) —
   ceux-ci portent une classe et ne passent jamais par ce sélecteur. */

/* --------------------------------------------------------------------------
   5. IMAGE À LA UNE — crédit discret en coin (posé par single.php quand la
   légende de la médiathèque existe ; rien si elle est vide).
   -------------------------------------------------------------------------- */
.ap-article-photo-cadre{position:relative}
.ap-credit-coin{
  position:absolute;
  right:10px;bottom:10px;
  background:color-mix(in srgb, var(--encre) 72%, transparent);
  color:#fff;
  font-size:11px;
  letter-spacing:.02em;
  padding:3px 8px;
  max-width:70%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:640px){
  .ap-credit-coin{font-size:10px;padding:2px 6px}
  .ap-contenu blockquote{padding:20px 18px 18px 24px;font-size:18px}
  .ap-contenu blockquote::before{font-size:48px;top:-4px;left:8px}
}
.ap-une-corps h2,.ap-grille h3,.ap-produit-tete h1{text-wrap:balance}