/* =========================================================================
 * gerem-theme — editorial.css
 *
 * Mappe les block styles Gutenberg (.is-style-*) sur les classes sémantiques
 * du prototype définies dans blog.css. Permet au client d'appliquer un style
 * éditorial depuis l'inspecteur Gutenberg.
 *
 * Inclut aussi quelques raffinements WP-spécifiques.
 * ========================================================================= */

/* --- Block styles Gutenberg → classes proto ------------------------------ */

/* Paragraphe : Chapô */
.wp-block-paragraph.is-style-lead {
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg2);
  font-weight: var(--fw-medium);
}

/* Paragraphe : Exergue */
.wp-block-paragraph.is-style-exergue {
  font-family: var(--font);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-weight: var(--fw-semibold);
  color: var(--c1);
  padding: var(--sp-3) var(--sp-5);
  margin-block: var(--sp-6);
}

/* Paragraphe : Note */
.wp-block-paragraph.is-style-note {
  background: var(--bg-tint-cool);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  font-size: var(--fs-13);
  color: var(--fg2);
}

/* Paragraphe : Petite mention */
.wp-block-paragraph.is-style-mention {
  font-size: var(--fs-12);
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-semibold);
}

/* Heading : avec filet */
.wp-block-heading.is-style-filet {
  position: relative;
  padding-top: var(--sp-4);
  margin-top: var(--sp-7);
}
.wp-block-heading.is-style-filet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--c1);
  border-radius: var(--r-pill);
}

/* Heading : kicker (suréchelon) */
.wp-block-heading.is-style-kicker {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-bold);
  color: var(--c1);
  margin-bottom: var(--sp-2);
  display: inline-block;
}

/* Quote : variante sobre — match l'esprit de .quote-inline du proto
 * (italique + couleur fg2). Reste un bloc <blockquote> en flux ; pour un
 * vrai inline il faut un format Gutenberg custom. */
.wp-block-quote.is-style-inline {
  border-left: 0;
  padding-left: 0;
  background: transparent;
  font-style: italic;
  color: var(--fg2);
}
.wp-block-quote.is-style-inline p {
  font-style: italic;
  color: var(--fg2);
  margin: 0;
}

/* Pullquote : encadrée — calé sur .pullquote-encadree du proto */
.wp-block-pullquote.is-style-encadree {
  position: relative;
  border: 1px solid var(--c1-200);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  background: var(--bg-tint-warm);
  margin-block: var(--sp-6);
  box-shadow: none;
}
.wp-block-pullquote.is-style-encadree::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  left: var(--sp-5);
  font-size: 64px;
  line-height: 1;
  color: var(--c1);
  font-family: Georgia, serif;
  background: var(--bg-tint-warm);
  padding: 0 var(--sp-2);
}
.wp-block-pullquote.is-style-encadree p {
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg1);
  font-weight: var(--fw-medium);
  font-style: italic;
}
.wp-block-pullquote.is-style-encadree cite {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-11);
  color: var(--c1);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-style: normal;
  font-weight: var(--fw-bold);
}

/* --- Contenu d'article : style baseline pour wp:post-content -------------
 * Aligne le rendu auto de wp:post-content sur les classes du prototype.
 *
 * Strategie de specificite : `:where(.article-body)` donne au scope une
 * specificite de 0,0,0 ; les selecteurs internes ne comptent donc que
 * leurs tags. Resultat :
 *   - .a-retenir__list (0,1,0) bat :where(.article-body) ul (0,0,1)
 *   - .note__body      (0,1,0) bat :where(.article-body) p  (0,0,1)
 * Les patterns gardent priorite sans `!important`.
 *
 * Selecteurs en descendant (pas `> direct-child`) pour traverser les
 * wrappers Gutenberg (`.wp-block-group`, `.wp-block-post-content`) que
 * l'editeur peut inserer entre `.article-body` et le contenu reel.
 * ====================================================================== */

/* Block-gap WP -> var(--sp-5) (24px) pour tous les wrappers .wp-block-group
 * eventuellement inseres dans .article-body : aligne l'espacement entre
 * blocs sur le proto (`.article-body > * + * { margin-top: var(--sp-5); }`)
 * meme quand le contenu est emballe dans un Group. */
.article-body {
  --wp--style--block-gap: var(--sp-5);
}

/* Lettrine bordeaux sur le premier paragraphe — match .first-paragraph.
 * Cible le tout premier <p> ou` qu'il soit dans .article-body, mais exclut
 * les <p> internes aux patterns (note/a-retenir/pullquote). */
:where(.article-body) p:first-of-type:not(.a-retenir__body):not(.note__body):not(.pullquote-encadree__quote)::first-letter {
  float: left;
  font-family: var(--font);
  font-weight: var(--fw-extrabold);
  font-size: 4.6em;
  line-height: 0.9;
  color: var(--c1);
  padding: 6px 12px 0 0;
}

/* H2 : match .intertitre-filet (48x3, fw-bold, filet en block ::before).
 * !important sur margin-top : resiste aux `margin-block: var(--wp--style--
 * block-gap)` injectes par theme.json. */
:where(.article-body) h2 {
  position: relative;
  margin-top: var(--sp-7) !important;
  padding-top: var(--sp-3);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg1);
}
:where(.article-body) h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 48px;
  height: 3px;
  background: var(--c1);
}

/* H3 : match .intertitre-sans-filet. */
:where(.article-body) h3 {
  margin-top: var(--sp-6) !important;
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

/* Liens inline dans le corps. */
:where(.article-body) a:not(.wp-element-button):not(.btn) {
  color: var(--c1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:where(.article-body) a:not(.wp-element-button):not(.btn):hover {
  color: var(--c1-hover);
}

/* Listes : auto-applique le style .list-bordeaux du proto.
 * <ul> -> puces bordeaux ; <ol> -> compteurs decimaux bordeaux.
 * Pattern interns (.a-retenir__list, etc.) bat ces regles via leur classe. */
:where(.article-body) ul,
:where(.article-body) ol {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
:where(.article-body) ul > li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg1);
}
:where(.article-body) ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  background: var(--c1);
  border-radius: var(--r-circle);
}
:where(.article-body) ol {
  counter-reset: olb;
}
:where(.article-body) ol > li {
  position: relative;
  padding-left: var(--sp-7);
  counter-increment: olb;
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg1);
}
:where(.article-body) ol > li::before {
  content: counter(olb, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  width: 32px;
  text-align: right;
  padding-right: var(--sp-3);
  border-right: 1px solid var(--c1-200);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  color: var(--c1);
}

/* Listes imbriquees : retombe sur un style sobre (puce ronde fg2 reduite,
 * indent moindre). */
:where(.article-body) :is(ul, ol) :is(ul, ol) {
  margin-top: var(--sp-2);
  gap: var(--sp-2);
}
:where(.article-body) :is(ul, ol) ul > li {
  padding-left: var(--sp-4);
  font-size: var(--fs-14);
  color: var(--fg2);
}
:where(.article-body) :is(ul, ol) ul > li::before {
  left: 4px;
  top: 9px;
  width: 4px;
  height: 4px;
  background: var(--c1-300);
}

/* Figure image : match .article-figure / .article-figure__media / __caption. */
:where(.article-body) .wp-block-image {
  margin: var(--sp-6) 0;
}
:where(.article-body) .wp-block-image img {
  border-radius: var(--r-lg);
  display: block;
}
:where(.article-body) .wp-block-image figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-12);
  font-style: italic;
  color: var(--fg3);
  line-height: var(--lh-body);
}

/* Separateur Gutenberg <hr> : match l'esprit de .typo-separator. */
:where(.article-body) hr.wp-block-separator {
  border: 0;
  height: 0;
  margin: var(--sp-7) auto;
  text-align: center;
  overflow: visible;
  color: var(--c1-300);
}
:where(.article-body) hr.wp-block-separator::before {
  content: "* * *";
  display: inline-block;
  letter-spacing: 0.8em;
  font-size: var(--fs-16);
  color: var(--c1-300);
  user-select: none;
}

/* --- Reset propre du conteneur block-editor pour l'éditeur (admin) ------- */
.editor-styles-wrapper {
  background: var(--bg);
}

/* =========================================================================
 * Header responsive : burger menu mobile
 * Toggle CSS pur via checkbox masquée + label burger. Sur desktop la nav
 * reste inline ; en <= 768px la nav devient un panneau qui s'ouvre/ferme.
 * Le CTA "Demander une démo" reste à droite, sur la même ligne que le logo.
 * ========================================================================= */
.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Bandeau CTA "Demander une démo" — version mobile, pleine largeur sous
 * la topbar. Masqué en desktop, le bouton dans .topbar-actions le remplace. */
.topbar-cta-banner {
  display: none;
}
.nav-burger {
  display: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--border1);
  background: var(--bg-window);
  color: var(--fg1);
  flex-shrink: 0;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
}
.nav-burger:hover { border-color: var(--c1); color: var(--c1); }
.nav-burger i { font-size: 20px; }
.nav-burger__close { display: none; }
.nav-burger__label { line-height: 1; }
.nav-toggle:checked ~ .shell .nav-burger .nav-burger__open { display: none; }
.nav-toggle:checked ~ .shell .nav-burger .nav-burger__close { display: inline; }

@media (max-width: 1024px) {
  /* Sur tablette, on garde la nav inline mais on a déjà la search-pill cachée
   * (du proto). Pas de burger encore. */
  .nav-burger { display: none; }
}

@media (max-width: 768px) {
  .site-header .shell {
    padding-left: var(--sp-4);
    padding-right: var(--sp-5);
  }
  .site-header .topbar {
    grid-template-columns: 1fr auto;
    column-gap: var(--sp-3);
  }
  .nav-burger {
    display: inline-flex;
    margin-right: var(--sp-3);
  }
  .primary-nav-wrapper { display: none; }

  /* Quand le checkbox est checked, on déploie la nav en panel sous le topbar. */
  .nav-toggle:checked ~ .shell .primary-nav-wrapper {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-window);
    border-top: 1px solid var(--border1);
    border-bottom: 1px solid var(--border1);
    box-shadow: var(--sh-3);
    padding: var(--sp-4) var(--sp-5);
    z-index: var(--z-dropdown);
  }
  .nav-toggle:checked ~ .shell .primary-nav-wrapper .primary-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .nav-toggle:checked ~ .shell .primary-nav-wrapper .primary-nav li {
    border-bottom: 1px solid var(--border-soft);
  }
  .nav-toggle:checked ~ .shell .primary-nav-wrapper .primary-nav li:last-child {
    border-bottom: 0;
  }
  .nav-toggle:checked ~ .shell .primary-nav-wrapper .primary-nav a {
    display: block;
    padding: var(--sp-4) 0;
    font-size: var(--fs-16);
    color: var(--fg1);
  }
  .nav-toggle:checked ~ .shell .primary-nav-wrapper .primary-nav a:hover {
    color: var(--c1);
  }

  /* Le header devient relative pour que le panneau absolute s'y ancre. */
  .site-header { position: relative; }

  /* CTA desktop : caché en mobile, remplacé par le bandeau pleine largeur. */
  .topbar-actions__cta { display: none; }

  /* Bandeau CTA mobile : sticky en bas du viewport, toujours visible. */
  .topbar-cta-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-4) var(--sp-5);
    background: var(--c1);
    color: #fff;
    text-decoration: none;
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.01em;
    transition: background var(--dur-2) var(--ease-out);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
    padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  }
  /* Compense l'espace pris par le bandeau pour ne pas masquer le footer. */
  body {
    padding-bottom: 64px;
  }

  /* Article hero : breadcrumb trop espacé en mobile, on resserre. */
  .article-hero {
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
  }
  .article-hero .breadcrumb {
    margin-bottom: var(--sp-3);
  }
  .article-hero__head {
    gap: var(--sp-3);
  }
  .topbar-cta-banner:hover {
    background: var(--c1-hover);
    color: #fff;
    text-decoration: none;
  }
  .topbar-cta-banner i { font-size: 18px; }
  .topbar-cta-banner > i:last-child { font-size: 14px; opacity: 0.7; }

  /* Subbar catégories : scroll horizontal propre, sans scrollbar visible.
   * Le label "Catégories" est masqué pour gagner de la place. */
  .subbar__label { display: none; }
  .subbar__inner {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
  .subbar__inner::-webkit-scrollbar { display: none; }
  .subbar__link {
    padding: var(--sp-3) var(--sp-2);
    font-size: var(--fs-12);
  }
}


/* =========================================================================
 * Sidebar article — bloc CTA "Demander une démo".
 * Le bouton primaire est blanc (texte bordeaux) sur fond bordeaux de la card.
 * Le lien secondaire "Découvrir l'application" est discret en blanc 78%.
 * ========================================================================= */
/* Texte du pitch CTA : remonte la lisibilité (le proto le mettait en 13px
 * blanc 78% → trop fin sur le fond bordeaux). */
.aside-cta p {
  font-size: var(--fs-16);
  color: rgba(255, 255, 255, 0.95);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}
.aside-cta p strong {
  color: #fff;
  font-weight: var(--fw-semibold);
}
.aside-cta h3 {
  font-size: var(--fs-20);
  margin-bottom: var(--sp-3);
}

/* Le bloc devient flex column pour orchestrer le rythme entre titre,
 * paragraphe, bouton et lien secondaire. */
.aside-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.aside-cta__primary {
  width: 100%;
  justify-content: center;
  background: #fff;
  color: var(--c1);
  border-color: #fff;
  margin-top: var(--sp-2);
}
.aside-cta__primary:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--c1-press);
  border-color: rgba(255, 255, 255, 0.92);
}

/* Lien secondaire : "a.aside-cta__link" + sélecteur ancestor pour gagner en
 * spécificité contre le `a { color: var(--c1) }` global du proto. */
.aside-cta a.aside-cta__link,
.aside-cta__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-end;
  margin-top: var(--sp-4);
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.aside-cta a.aside-cta__link:hover,
.aside-cta__link:hover {
  color: #fff;
  border-color: #fff;
  text-decoration: none;
}
.aside-cta__link i { font-size: 14px; }

/* =========================================================================
 * Lien CTA "Découvrir la plateforme Gerem" dans le footer.
 * Style chip discret, contrasté sur fond sombre du site-footer.
 * ========================================================================= */
.footer-col__app-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c1);
  border: 1px solid var(--c1);
  border-radius: var(--r-pill);
  color: #fff;
  text-decoration: none;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  box-shadow: var(--sh-4);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.footer-col__app-link:hover {
  background: var(--c1-hover);
  border-color: var(--c1-hover);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.footer-col__app-link i { font-size: 16px; }

/* =========================================================================
 * Logo SVG Gerem (inline via shortcode [gerem_brand]).
 * Le SVG a un viewBox 660x160 (~4.1:1). On contraint la hauteur et on laisse
 * la width s'auto-calculer. Override des couleurs en blanc dans le footer.
 * ========================================================================= */
.brand__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.brand__logo svg {
  display: block;
  height: 36px;
  width: auto;
}
.site-footer .brand__logo svg {
  height: 40px;
}
@media (max-width: 768px) {
  .site-header .brand__logo svg {
    height: 28px;
  }
}

/* =========================================================================
 * Fix : .hero-secondaries — rows de hauteur naturelle.
 * Le proto utilisait `grid-template-rows: repeat(3, 1fr)` qui étirait chaque
 * card .hero-sec à 1/3 de la hauteur de la column .hero-featured adjacente.
 * Résultat : grand espace blanc sous la date. On compacte en `auto`.
 * ========================================================================= */
.hero-secondaries {
  grid-template-rows: repeat(3, auto);
  align-content: start;
}

/* =========================================================================
 * Fix : guillemet décoratif de .pullquote-encadree.
 * Le ::before du proto a un background opaque qui peut chevaucher les
 * premières lettres du texte. On le rend transparent et on le sort vers
 * le haut pour qu'il flotte au-dessus du cadre, façon "guillemet ornement".
 * ========================================================================= */
.pullquote-encadree::before {
  background: transparent;
  padding: 0;
  top: -32px;
  left: var(--sp-4);
  color: var(--c1-300);
}

/* =========================================================================
 * Agrandir le sommaire (TOC) — confort de lecture
 * ========================================================================= */
.toc-sidebar ol li a {
  font-size: var(--fs-16);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
  line-height: var(--lh-snug);
}
.toc-sidebar ol li a::before {
  font-size: var(--fs-13);
}
.aside-card.toc-sidebar .aside-card__title {
  font-size: var(--fs-13);
}

/* =========================================================================
 * Archive toolbar — champs de filtre du shortcode [gerem_archive_filters]
 * Réutilise les styles du proto (.archive-toolbar, .archive-toolbar__sort)
 * et ajoute le styling des labels-conteneurs et des selects custom.
 * ========================================================================= */
.archive-toolbar__field {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-13);
  color: var(--fg2);
}
.archive-toolbar__field-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-12);
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fw-semibold);
}
.archive-toolbar__field select,
.archive-toolbar select {
  appearance: none;
  background: var(--bg-window);
  border: 1px solid var(--border1);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-7) var(--sp-2) var(--sp-3);
  font-family: var(--font);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--fg1);
  background-image: linear-gradient(45deg, transparent 50%, var(--fg3) 50%),
                    linear-gradient(135deg, var(--fg3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.archive-toolbar__field select:focus,
.archive-toolbar select:focus {
  border-color: var(--c1);
  outline: none;
  box-shadow: var(--sh-focus);
}
.archive-toolbar__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  margin-left: var(--sp-2);
}
.archive-toolbar__actions .btn { white-space: nowrap; }

/* =========================================================================
 * Archive toolbar dépliable (<details><summary>)
 * Le formulaire est masqué par défaut ; le summary affiche un toggle avec
 * compteur de filtres actifs et chevron qui pivote à l'ouverture.
 * ========================================================================= */
.archive-toolbar-wrapper {
  margin: var(--sp-5) 0;
}
.archive-toolbar-wrapper > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-window);
  border: 1px solid var(--border1);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.archive-toolbar-wrapper > summary::-webkit-details-marker { display: none; }
.archive-toolbar-wrapper > summary:hover {
  border-color: var(--c1);
  background: var(--c1-50);
}
.archive-toolbar-toggle__icon {
  display: inline-flex;
  color: var(--c1);
}
.archive-toolbar-toggle__icon i { font-size: 16px; }
.archive-toolbar-toggle__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  background: var(--c1);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}
.archive-toolbar-toggle__chevron {
  margin-left: var(--sp-2);
  color: var(--fg3);
  transition: transform var(--dur-2) var(--ease-out);
}
.archive-toolbar-wrapper[open] > summary .archive-toolbar-toggle__chevron {
  transform: rotate(180deg);
}
.archive-toolbar-wrapper[open] > summary {
  border-color: var(--c1);
  background: var(--c1-50);
}
.archive-toolbar-wrapper > .archive-toolbar {
  margin-top: var(--sp-3);
}

/* Responsive : stack vertical en mobile, chaque champ pleine largeur. */
@media (max-width: 768px) {
  .archive-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
  }
  .archive-toolbar__label {
    margin: 0 0 var(--sp-1);
  }
  .archive-toolbar__field,
  .archive-toolbar__sort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    width: 100%;
  }
  .archive-toolbar__field select,
  .archive-toolbar__sort select,
  .archive-toolbar select {
    flex: 1;
    min-width: 0;
  }
  .archive-toolbar__field-label {
    flex-shrink: 0;
  }
  .archive-toolbar__spacer { display: none; }
  .archive-toolbar__actions {
    margin-left: 0;
    margin-top: var(--sp-2);
    width: 100%;
  }
  .archive-toolbar__actions .btn { flex: 1; justify-content: center; }
}

/* =========================================================================
 * Search-pill activée en vrai <form> avec <input>
 * ========================================================================= */
.search-pill {
  /* form au lieu de div : on garde les styles flex du proto */
}
.search-pill__input {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--fg1);
  padding: 0;
  flex: 1;
  min-width: 0;
  outline: none;
}
.search-pill__input::placeholder { color: var(--fg3); }
.search-pill__submit {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
}
.search-pill:focus-within {
  border-color: var(--c1);
  box-shadow: var(--sh-focus);
}

/* =========================================================================
 * Compat Gutenberg : neutraliser les wrappers que WP injecte entre le
 * conteneur de grille (.post-grid / .hero-grid / .hero-secondaries) et
 * les <article.post-card / .hero-featured / .hero-sec>.
 *
 * Hiérarchie sans fix :
 *   .hero-grid
 *     > .wp-block-query                  <-- wrapper Query
 *       > <ul>.wp-block-post-template    <-- wrapper post-template
 *         > <li>.wp-block-post           <-- wrapper post
 *           > <article>.hero-featured
 *
 * Sans `display: contents`, c'est le .wp-block-query qui occupe la cellule
 * grid → l'aspect-ratio 16/9 du media s'étire sur toute la largeur du shell
 * (jusqu'à 720px de haut). Et la grille suivante s'affiche très bas.
 *
 * Avec display:contents en cascade, l'<article> devient enfant direct de
 * la grille et occupe sa cellule normalement.
 * ========================================================================= */
.hero-grid > .wp-block-query,
.hero-secondaries > .wp-block-query,
.post-grid > .wp-block-query,
.post-grid .wp-block-post-template,
.post-grid > .wp-block-post-template,
.hero-grid .wp-block-post-template,
.hero-grid > .wp-block-post-template,
.hero-secondaries .wp-block-post-template,
.hero-secondaries > .wp-block-post-template {
  display: contents;
}

.post-grid .wp-block-post,
.hero-grid .wp-block-post,
.hero-secondaries .wp-block-post {
  display: contents;
  list-style: none;
}

/* Gutenberg pose `is-layout-constrained` sur le wrapper du wp:query, ce qui
 * applique un max-width interne. On laisse la mise en forme à `.shell`. */
.wp-block-query.home-grid-query,
.wp-block-query.home-hero-query,
.wp-block-query.home-hero-featured-query,
.wp-block-query.home-hero-secondaries-query,
.wp-block-query.read-also-query,
.wp-block-query.archive-grid-query,
.wp-block-query.search-results-query {
  max-width: none;
}

/* Les blocs WP qui rendent des inner-elements ajoutent leurs propres classes
 * sur les containers ; on cible le rendu de wp:post-terms (kicker) pour qu'il
 * se comporte comme le span original. */
.wp-block-post-terms.kicker,
.wp-block-post-terms.kicker a {
  color: inherit;
  text-decoration: none;
}
.wp-block-post-terms.kicker {
  display: inline-block;
}

/* wp:post-title rend par défaut un wrapper <h3 class="wp-block-post-title">
 * qui contient un <a>. Le proto stylait le titre directement ; on neutralise
 * la couleur du lien. */
.post-card__title a,
.hero-featured__title a,
.hero-sec__title a {
  color: inherit;
  text-decoration: none;
}
.post-card__title a:hover,
.hero-featured__title a:hover,
.hero-sec__title a:hover {
  color: var(--c1);
}

/* wp:post-excerpt génère un <p.wp-block-post-excerpt__excerpt> interne. */
.post-card__excerpt p,
.hero-featured__lead p {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* wp:post-date / wp:post-author-name : retirer la mise en forme par défaut */
.author-meta .wp-block-post-date,
.author-meta .wp-block-post-date a,
.author-meta .wp-block-post-author-name {
  font: inherit;
  color: var(--fg3);
  text-decoration: none;
}
.author-meta .wp-block-post-author-name {
  color: var(--fg2);
  font-weight: var(--fw-semibold);
}
/* Pousse la date à droite dans toutes les .author-meta. */
.author-meta .wp-block-post-date {
  margin-left: auto;
}
/* Cache le séparateur "·" qui se retrouve orphelin juste avant la date. */
.author-meta__sep:has(+ .wp-block-post-date) {
  display: none;
}