/* site.css — assemblée par build-css.sh, ne pas éditer : modifier les sources */

/* ===== src/port-generateperf-reset.css ===== */
/*--------------------------------------------------------------
# Règles reprises de plugins/generateperf/css/reset.css (GeneratePerf 3.1.3-beta.3), feuille retirée.
# Écartées : border-radius !important sur button/input/textarea, barre de progression (remplacée), légende
# d'image à la une (en-tête d'article en blocs), curseur du branding (logo inline).
--------------------------------------------------------------*/
:root {
  --spacing: 2rem;
  --spacer: 2rem;
}

html {
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6, figcaption, blockquote cite {
  text-wrap: balance;
}

h1 img {
  border-radius: 50%;
  margin-right: .75em;
}

.archive .page-header .page-title {
  display: flex;
  align-items: center;
}

.rounded {
  border-radius: 50%;
}

.paging-navigation,
.text-center {
  text-align: center;
}

@media (max-width: 768px) {
  .sidebar {
    margin-top: 40px;
  }
}

.sidebar,
.widget {
  contain: layout style;
}

body .wp-block-search__label {
  width: auto;
}

/* Réserve de place des insertions publicitaires et des contenus intégrés (CLS) */
.site-content ins:not([data-anchor-status]) {
  contain: content;
  display: block;
  height: 280px;
  width: 100%;
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);
}

.instagram-media,
.twitter-tweet,
.tiktok-embed {
  contain: content;
  min-height: 300px;
}

.component {
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);
}

body.overlayed {
  overflow: hidden;
  height: 100%;
}

@media (min-width: 769px) {
  .one-container.right-sidebar .site-main,
  .one-container.both-right .site-main {
    margin-right: 40px !important;
  }
}

svg.icon {
  vertical-align: top;
}

[data-goto]:hover,
[data-share-url]:hover,
[data-gpmodal-trigger]:hover,
.gb-query-loop-item:hover,
.gb-loop-item:hover {
  cursor: pointer;
}

[data-goto]:not(.button):not(.gb-button):hover {
  text-decoration: underline;
}

.o50 {
  opacity: 50%;
}

.entry-meta .o50 {
  margin: 0 .5em;
}

p[role="doc-subtitle"] {
  margin-top: 1em;
}

.wp-block-latest-posts__list:not(.is-grid) li {
  margin-bottom: 20px;
}

.entry-header .byline {
  display: inline-flex;
  column-gap: .5em;
  flex-wrap: wrap;
  align-items: baseline;
}

.entry-header .byline img {
  align-self: center;
}

/* ===== src/plugin/pause-offscreen.css ===== */
/* GeneratePerf — Pause des animations CSS hors viewport (option pause_offscreen).
   Le script js/pause-offscreen.js pose .playing tant que l'élément est visible.
   !important volontaire : le raccourci `animation:` d'un thème ou d'un bloc remet
   animation-play-state à running, et un sélecteur composé (.logos .marquee, #id…)
   battrait n'importe quelle spécificité raisonnable. Entre déclarations !important,
   la spécificité tranche : .pause-offscreen.playing l'emporte sur .pause-offscreen. */
.pause-offscreen {
    animation-play-state: paused !important;
}

.pause-offscreen.playing {
    animation-play-state: running !important;
}

/* Respect de prefers-reduced-motion (WCAG 2.3.3), limité aux éléments concernés :
   le bloc global du wiki (*, *::before, *::after) reste un choix du thème.
   Déclaré après les règles ci-dessus : à spécificité et importance égales, il gagne. */
@media (prefers-reduced-motion: reduce) {
    .pause-offscreen,
    .pause-offscreen.playing {
        animation: none !important;
    }
}

/* ===== src/plugin/overlay.css ===== */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  .overlay > iframe,
  .overlay > video {
    aspect-ratio: 16 / 9;
    width: 90%;
    height: auto;
    max-height: 90%;
    max-width: calc(90vh * (16 / 9));
  }
  .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }

  body.overlayed .generateperf-sticky-commentbox {
    display: none;
  }
/* ===== src/plugin/sticky-sidebar.css ===== */
@media(min-width: 768px) {
    body.sticky-sidebar .inside-right-sidebar,
    body.sticky-sidebar .inside-left-sidebar {
      position: sticky;
      top: 20px;
      max-height: calc(100vh - 20px);
      overflow-y: auto;
    }
}
/* ===== src/plugin/splitted-list.css ===== */
.splitted-list[data-columns] {
  margin-bottom: 2.5em !important;
  column-count: 2;
  column-gap: 20px;
  margin-left: 1em;
}

@media(min-width: 768px) {
  .splitted-list[data-columns="3"],
  .splitted-list[data-columns="4"] {
    column-count: 3;
  }
}

@media(min-width: 1024px) {
  .splitted-list[data-columns="4"] {
    column-count: 4;
  }
}
/* ===== src/plugin/tags-list.css ===== */
ul.tags_list_summary {
  list-style-type: none;
  margin: 0 0 var(--spacing) !important;
  display: flex;
  column-gap: 10px;
  row-gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

ul.tags_list_summary a {
  border-radius: var(--border-radius);
}

ul.tags_list_summary a,
ul.tags_list_summary a:hover {
  text-decoration-line: none !important;
}
/* ===== src/components.css ===== */
/*--------------------------------------------------------------
# Composants GeneratePerf : sommaire, pastilles, notation, partage, boîte auteur, articles liés, listes.
# Balisage relevé sur un article du site ; les feuilles du plugin sont retirées (inc/setup.php).
--------------------------------------------------------------*/

/* Sommaire (details.toc) */
.toc {
  display: block;
  margin: 2em 0;
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  background-image: linear-gradient(225deg, var(--light) 0 var(--cut), transparent var(--cut));
  background-origin: border-box;
  contain: content;
}

.toc:not([open]) {
  width: fit-content;
}

.toc summary {
  padding: 14px 44px 14px 18px;
  font-family: Tektur, Tektur-fallback, sans-serif;
  font-weight: 600;
  color: var(--darkest);
  cursor: pointer;
  list-style-position: inside;
}

.toc summary::marker {
  color: var(--accent);
}

.toc summary:hover {
  color: var(--accent);
}

.toc[open] summary .hide,
.toc summary .show {
  display: inline;
}

.toc summary .hide,
.toc[open] summary .show {
  display: none;
}

.intoc {
  margin: 0;
  padding: 0 20px 18px;
  list-style-type: none;
  counter-reset: toc;
}

.intoc > li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 36px;
  counter-increment: toc;
}

.intoc > li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: Tektur, Tektur-fallback, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.intoc ul {
  margin: 8px 0 0;
  list-style: none;
}

.intoc ul > li {
  margin-bottom: 6px;
  font-size: 0.95em;
}

.intoc a {
  color: var(--darkest);
  text-decoration: none;
  text-wrap: balance;
}

.intoc a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 0.2em;
}

/* Pastilles de rubriques et de thèmes */
.badges-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.4;
}

.badges-container > ul {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.badges-container > ul > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.badges-container a {
  display: inline-block;
  padding: 5px 14px 5px 12px;
  font-family: Tektur, Tektur-fallback, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  color: var(--darkest);
  border: 1px solid var(--line-strong);
  background-image: linear-gradient(225deg, var(--darkest) 0 8px, transparent 8px);
  background-origin: border-box;
}

.badges-container a:first-letter {
  text-transform: uppercase;
}

.badges-container .post-categories a {
  border-color: var(--darkest);
  background-color: var(--darkest);
  background-image: linear-gradient(225deg, var(--primary) 0 8px, transparent 8px);
  color: var(--lightest);
}

.badges-container a:is(:hover, :focus) {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--darkest);
}

.badges-container.above-title { margin-bottom: 12px; }
.badges-container.under-title { margin-top: 12px; }
.badges-container.after-content { margin-top: var(--spacing); }
.badges-container.sidebar-top { margin-bottom: var(--spacing); }

ul.pills {
  margin-left: 0;
  list-style-type: none;
  counter-reset: pills-number;
  line-height: 2.4;
}

ul.pills li {
  display: inline-block;
  counter-increment: pills-number;
}

ul.pills a {
  margin-right: 6px;
  padding: 3px 12px;
  border: 1px solid var(--line-strong);
  color: var(--darkest);
  text-decoration-line: none;
}

ul.pills a::before {
  content: counter(pills-number) ".";
  margin-right: 4px;
  color: var(--accent);
  font-weight: 600;
}

ul.pills a:hover {
  border-color: var(--primary);
  background-color: var(--primary);
}

/* Notation */
:root {
  --stars: var(--primary);
}

.stars-rater {
  width: min(100%, 340px);
  margin: var(--spacing) auto;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
}

.stars-rater > h2 {
  padding-left: 0;
  font-size: 20px;
}

.stars-rater > h2::before {
  content: none;
}

/* L'étoile est un <button> : rien du style global des boutons ne doit s'y appliquer. */
.star {
  padding: 0;
  border-width: 0;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

/* Bat button:hover et button:focus de GeneratePress (fond encre, texte blanc). */
.star:hover,
.star:focus {
  background-color: transparent;
  color: var(--muted);
}

.star.active {
  color: var(--stars);
}

.stars-rating,
.stars-rater > h2,
.vote-info {
  margin-bottom: 0;
}

.stars-rating:hover .star {
  color: var(--accent) !important;
}

.stars-rating .star:hover ~ .star {
  color: var(--muted) !important;
}

.vote-info {
  font-size: 15px;
  color: var(--medium);
}

.star-container {
  margin: 1em 0;
}

.star-position {
  display: inline-block;
}

.star-rating {
  display: flex;
  flex-direction: row-reverse !important;
  justify-content: space-around;
  width: 6em;
  padding: 0 0.2em;
  font-size: 1.5em;
}

.star-rating input {
  display: none !important;
}

.star-not-rated,
.star-rating label {
  color: var(--muted);
  font-style: normal;
}

.star-rating label:hover {
  cursor: pointer;
}

.star-rating :checked ~ label,
.star-rated {
  color: var(--stars);
  font-style: normal;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  color: var(--accent);
}

/* Séparateur des composants de fin d'article */
.separator {
  height: 1px;
  margin: 2.5em 0 1.5em;
  border: 0;
  background-color: var(--line-strong);
}

.component > h2.simple {
  font-size: 22px;
}

/* Partage */
.share-buttons-toggler + .social-share {
  display: none;
}

.share-buttons-toggler > .button-native {
  display: inline-flex;
  align-items: center;
  column-gap: 10px;
  padding: 12px 20px;
  background-color: var(--primary);
  color: var(--darkest);
  background-image: linear-gradient(135deg, transparent 0 calc(100% - 12px), var(--darkest) calc(100% - 12px));
  background-origin: border-box;
}

.share-buttons-toggler > .button-native:is(:hover, :focus) {
  background-color: var(--darkest);
  color: var(--primary);
  background-image: linear-gradient(135deg, transparent 0 calc(100% - 12px), var(--primary) calc(100% - 12px));
}

.social-share {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  text-align: center;
  contain: content;
}

.overlay .social-share {
  grid-template-columns: 1fr;
  width: 90vw;
  max-width: 320px;
}

.social-share > .button {
  padding: 12px !important;
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  color: var(--darkest);
  font-size: 15px;
}

.social-share > .button .icon {
  fill: currentColor !important;
}

.social-share > .button:hover {
  background-color: var(--darkest) !important;
  border-color: var(--darkest) !important;
  color: var(--lightest) !important;
}

@media (max-width: 568px) {
  .social-share > .button > svg {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Boîte auteur : fiche d'identification sur fond nuit */
.author-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 28px;
  background-color: var(--dark);
  background-image: linear-gradient(225deg, var(--light) 0 var(--cut), transparent var(--cut));
  color: var(--lightest);
  contain: content;
}

.author-box .avatar {
  flex-shrink: 0;
  margin: 0;
}

.author-box .avatar img,
.author-box .avatar svg {
  display: block;
  width: 96px;
  height: 96px;
  max-width: 96px;
  object-fit: cover;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  outline: 2px solid var(--secondary);
  outline-offset: -2px;
}

.author-box .avatar svg {
  fill: var(--lightest);
  background-color: var(--medium);
}

.author-box h2 {
  margin-bottom: 0 !important;
  padding-left: 0;
  font-size: 20px;
  text-align: center;
  color: var(--lightest);
}

.author-box h2::before {
  content: none;
}

.author-box h2 a {
  color: var(--secondary);
  text-decoration: none;
}

.author-box h2 a:hover {
  text-decoration: underline;
}

.author-box p[itemprop="description"] {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
}

p.user-title {
  margin-bottom: 1em;
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
}

@media (min-width: 769px) {
  .author-box {
    flex-direction: row;
    align-items: flex-start;
  }

  .author-box h2 {
    text-align: left;
  }

  .authors-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 1.5em 0;
  }

  .authors-list .author-box {
    margin: 0;
  }
}

.social-links {
  display: flex;
  align-items: center;
  column-gap: 12px;
  margin-top: 12px;
}

.social-links .label {
  font-size: 15px;
  font-weight: 700;
}

.social-links a {
  color: var(--lightest);
}

.social-links a:hover {
  color: var(--secondary);
}

/* Lien vers un article lié inséré dans le texte */
.related-article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: var(--spacer);
  margin-bottom: var(--spacer);
  padding: 16px 20px;
  border: 1px solid var(--line-strong);
  background-color: var(--surface);
  color: var(--darkest);
  text-decoration: none;
}

.related-article .label {
  color: var(--accent);
  font-family: Tektur, Tektur-fallback, sans-serif;
  font-weight: 600;
}

.related-article .title {
  font-size: 0.95em;
  font-weight: 600;
}

.related-article .icon {
  flex-shrink: 0;
}

.related-article:hover {
  background-color: var(--darkest);
  border-color: var(--darkest);
  color: var(--lightest);
}

.related-article:hover .label {
  color: var(--primary);
}

/* Articles liés avant le pied de page (liste des derniers articles du cœur, hors conteneur du gabarit) */
.related-articles-container {
  margin-top: 64px;
  padding: 56px 0 64px;
  border-top: 1px solid var(--line-strong);
}

.related-articles {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.related-articles > h2 {
  margin-bottom: 28px;
  font-size: clamp(26px, 3vw, 34px);
}

ul.wp-block-latest-posts__list {
  margin-left: 0;
}

.related-articles .wp-block-latest-posts__list.is-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
}

.related-articles .wp-block-latest-posts__list.is-grid li {
  position: relative;
  display: grid;
  row-gap: 10px;
  align-content: start;
  width: auto;
  margin: 0 !important;
}

.wp-block-latest-posts__featured-image {
  margin: 0 !important;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--dark);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

.wp-block-latest-posts__featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.wp-block-latest-posts__list li > a {
  display: block;
  font-family: Tektur, Tektur-fallback, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--darkest);
  text-decoration: none;
  text-wrap: balance;
}

.wp-block-latest-posts__list li > a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.wp-block-latest-posts__list li:is(:hover, :focus-within) > a {
  color: var(--accent);
}

.wp-block-latest-posts__post-date {
  font-size: 14px;
  color: var(--medium);
}

@media (max-width: 1024px) {
  .related-articles .wp-block-latest-posts__list.is-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .related-articles .wp-block-latest-posts__list.is-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Listes d'étiquettes (codes courts GeneratePerf) */
ul.tags_list_summary a {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  color: var(--darkest);
}

ul.tags_list_summary a:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}


/* ===== theme.css ===== */
/*--------------------------------------------------------------
# Charte du site hors blocs : jetons, fond, en-tête natif GeneratePress, contenu des articles et des pages,
# formulaires, pagination native. Les blocs GenerateBlocks portent leurs propres styles.
--------------------------------------------------------------*/

:root {
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1320px;
  --line: rgba(12, 12, 26, 0.16);
  --line-strong: rgba(12, 12, 26, 0.72);
  --line-night: rgba(154, 157, 178, 0.28);
  --cut: 14px;
  --header-height: 76px;
}

/*--------------------------------------------------------------
# Fond : papier gris froid à trame de points
--------------------------------------------------------------*/

body {
  background-image: radial-gradient(circle at 1px 1px, rgba(12, 12, 26, 0.1) 1px, transparent 1.5px);
  background-size: 24px 24px;
  text-rendering: optimizeLegibility;
}

::selection {
  background-color: var(--primary);
  color: var(--darkest);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
}

/*--------------------------------------------------------------
# En-tête natif : logo sur le papier, navigation en panneaux à filets, cellule de recherche
--------------------------------------------------------------*/

.site-header {
  position: relative;
  z-index: 20;
  background-color: var(--light);
  border-bottom: 1px solid var(--line-strong);
}

.site-header .inside-header {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  padding: 0 var(--gutter);
  min-height: var(--header-height);
  align-items: stretch;
}

.site-header .site-logo {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 28px 0 0;
  /* Logo en currentColor (mot) et --logo-tagline (signature) : encre et magenta lisible sur le papier ;
     le pied de page réutilise le même tracé par <use>, avec ses propres couleurs (blanc, cyan par défaut). */
  color: var(--darkest);
  --logo-tagline: var(--accent);
}

.site-header .site-logo a {
  display: block;
  line-height: 0;
  /* Le lien (absent sur l'accueil) ne doit pas imposer la couleur des liens au mot en currentColor. */
  color: inherit;
}

.site-header .site-logo svg {
  display: block;
  width: 156px;
  height: auto;
}

.site-header #site-navigation {
  display: flex;
  align-items: stretch;
  margin-inline: auto 0;
  background-color: transparent;
}

.site-header #site-navigation .inside-navigation {
  align-items: stretch;
}

.site-header .menu-bar-item {
  display: flex;
  align-items: stretch;
}

.site-header .main-navigation .main-nav > ul {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.site-header .main-navigation .main-nav > ul > li {
  display: flex;
  border-left: 1px solid var(--line);
}

.site-header .main-navigation .main-nav > ul > li > a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 20px;
  line-height: 1.2;
}

.site-header .main-navigation .main-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 4px;
  background-color: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.site-header .main-navigation .main-nav > ul > li:is(:hover, :focus-within) > a::after,
.site-header .main-navigation .main-nav > ul > li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor) > a::after {
  transform: scaleX(1);
}

.site-header .main-navigation .main-nav > ul > li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor) > a {
  color: var(--darkest);
}

.site-header #site-navigation .main-nav > ul > li.menu-item-has-children > a {
  padding-right: 16px;
}

.site-header #site-navigation .dropdown-menu-toggle {
  display: flex;
  align-items: center;
  height: auto;
  padding: 0 0 0 8px;
  line-height: 1;
}

.site-header #site-navigation .dropdown-menu-toggle .gp-icon {
  top: 0;
}

.site-header .main-navigation ul ul {
  top: 100%;
  width: 240px;
  box-shadow: none;
  border-top: 4px solid var(--primary);
}

.site-header .main-navigation ul ul li a {
  padding: 12px 20px;
  font-size: 15px;
}

.site-header .menu-bar-items {
  display: flex;
  align-items: stretch;
  border-left: 1px solid var(--line);
}

.site-header .menu-bar-item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--header-height);
  padding: 0;
  color: var(--darkest);
  transition: background-color 0.2s ease;
}

.site-header .menu-bar-item > a:is(:hover, :focus) {
  background-color: var(--primary);
  color: var(--darkest);
}

.site-header .menu-bar-item .gp-icon svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 768px) {
  :root {
    --header-height: 60px;
  }

  .site-header .inside-header {
    padding: 0 0 0 var(--gutter);
  }

  .site-header .site-logo {
    padding: 0 16px 0 0;
    margin-right: auto;
  }

  .site-header .site-logo svg {
    width: 118px;
  }

  .site-header .mobile-menu-control-wrapper {
    display: flex;
    align-items: stretch;
    margin: 0;
  }

  .site-header .mobile-menu-control-wrapper .menu-toggle {
    width: var(--header-height);
    padding: 0;
    border-left: 1px solid var(--line);
    background-color: transparent;
    color: var(--darkest);
  }

  .site-header .mobile-menu-control-wrapper .menu-toggle:is(:hover, :focus, [aria-expanded="true"]) {
    background-color: var(--darkest);
    color: var(--primary);
  }

  .site-header .inside-header,
  .site-header .main-navigation .inside-navigation {
    position: static;
  }

  .site-header #site-navigation {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    background-color: var(--dark);
  }

  .site-header #site-navigation .inside-navigation,
  .site-header #site-navigation .main-nav {
    width: 100%;
    padding: 0;
  }

  .site-header.has-inline-mobile-toggle #site-navigation.toggled {
    margin-top: 0;
    background-color: var(--dark);
    border-bottom: 4px solid var(--primary);
  }

  .site-header #site-navigation.toggled .main-nav > ul {
    display: block;
    width: 100%;
    height: auto;
  }

  .site-header #site-navigation .main-nav > ul > li {
    display: block;
    border-left: 0;
    border-bottom: 1px solid var(--line-night);
  }

  .site-header #site-navigation .main-nav > ul > li > a {
    padding: 16px var(--gutter);
    color: var(--lightest);
  }

  .site-header #site-navigation .main-nav > ul > li > a::after {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 4px;
    height: auto;
    transform: scaleY(0);
  }

  .site-header #site-navigation .main-nav > ul > li:is(:hover, :focus-within, .current-menu-item, .current-menu-parent, .current-menu-ancestor) > a {
    color: var(--secondary);
  }

  .site-header #site-navigation .main-nav > ul > li:is(:hover, :focus-within, .current-menu-item, .current-menu-parent, .current-menu-ancestor) > a::after {
    transform: scaleY(1);
  }

  .site-header #site-navigation ul ul {
    width: auto;
    border-top: 0;
    background-color: var(--darkest);
  }

  .site-header #site-navigation ul ul li a {
    padding-left: calc(var(--gutter) + 16px);
    color: var(--muted);
  }
}

/*--------------------------------------------------------------
# Contenu des articles et des pages (hors blocs GenerateBlocks)
--------------------------------------------------------------*/

.entry-content > :is(p, ul, ol, blockquote, h2, h3, h4, figure, table, details, .wp-block-embed) {
  max-width: 72ch;
}

.entry-content :is(h2, h3, h4):not([class*="gb-"]) {
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  scroll-margin-top: 24px;
}

.entry-content h2:not([class*="gb-"]) {
  position: relative;
  padding-left: 22px;
}

.entry-content h2:not([class*="gb-"])::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 10px;
  height: 10px;
  background-color: var(--primary);
  transform: rotate(45deg);
}

.entry-content a:not([class*="gb-"], [class*="gb-"] a, .simple, .button, .awp-am a) {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--primary);
  text-underline-offset: 0.22em;
}

.entry-content a:not([class*="gb-"], [class*="gb-"] a, .simple, .button, .awp-am a):hover {
  color: var(--darkest);
  text-decoration-color: var(--darkest);
}

.entry-content :is(p, li) a[target="_blank"]::after {
  display: inline-block;
  content: "";
  margin-left: 0.25em;
  width: 0.8em;
  height: 0.8em;
  vertical-align: -0.075em;
  background-color: currentColor;
  clip-path: polygon(40% 0, 100% 0, 100% 60%, 82% 42%, 34% 90%, 10% 66%, 58% 18%);
}

.entry-content ul:not([class*="gb-"]) > li::marker,
.entry-content ol:not([class*="gb-"]) > li::marker {
  color: var(--accent);
}

.entry-content blockquote,
.entry-content .wp-block-quote {
  position: relative;
  margin: 2em 0;
  padding: 24px 28px 24px 32px;
  border-left: 4px solid var(--primary);
  background-color: var(--surface);
  font-style: normal;
}

.entry-content blockquote p {
  font-size: 1.1em;
  line-height: 1.55;
}

.entry-content blockquote cite {
  display: block;
  margin-top: 0.75em;
  font-family: Tektur, Tektur-fallback, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  color: var(--medium);
}

.entry-content blockquote .icon-quote {
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
  color: var(--accent);
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}

.entry-content :is(th, td) {
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: left;
}

.entry-content thead th {
  background-color: var(--dark);
  color: var(--lightest);
  font-family: Tektur, Tektur-fallback, sans-serif;
  font-weight: 600;
}

.entry-content :is(code, kbd) {
  padding: 2px 6px;
  background-color: var(--dark);
  color: var(--secondary);
  font-size: 0.88em;
}

.entry-content pre {
  padding: 20px;
  overflow-x: auto;
  background-color: var(--dark);
  color: var(--secondary);
}

.entry-content pre code {
  padding: 0;
  background: none;
}

.entry-content figcaption,
.wp-block-embed figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--medium);
}

.wp-block-image,
.wp-block-embed {
  margin-bottom: 1.5em;
}

.entry-content hr:not(.separator) {
  height: 1px;
  margin: 2.5em 0;
  border: 0;
  background-color: var(--line-strong);
}

p[role="doc-subtitle"] {
  font-weight: 500;
}

/*--------------------------------------------------------------
# Formulaires et boutons natifs
--------------------------------------------------------------*/

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
  border-width: 1px;
  border-style: solid;
  border-radius: 0;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

::placeholder {
  color: var(--medium);
  opacity: 1;
}

button,
.button,
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  font-family: Tektur, Tektur-fallback, sans-serif;
  font-weight: 600;
}

/* Formulaire de contact (code court GeneratePerf) : champs à largeur de lecture */
.entry-content form[name="contact"] :is(input[type="email"], input[type="text"], textarea) {
  width: 100%;
  max-width: 640px;
  padding: 12px 14px;
}

/*--------------------------------------------------------------
# Pagination native (recherche, auteurs)
--------------------------------------------------------------*/

.paging-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.paging-navigation .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  color: var(--darkest);
  font-family: Tektur, Tektur-fallback, sans-serif;
  font-weight: 600;
  text-decoration: none;
}

.paging-navigation .page-numbers.current {
  background-color: var(--darkest);
  color: var(--primary);
}

.paging-navigation a.page-numbers:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

/*--------------------------------------------------------------
# Pied de page : rendu différé
--------------------------------------------------------------*/

.site-footer {
  content-visibility: auto;
  contain-intrinsic-height: auto 720px;
}

@media (min-width: 768px) {
  .site-footer {
    contain-intrinsic-height: auto 420px;
  }
}

/*--------------------------------------------------------------
# Mouvement réduit
--------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*--------------------------------------------------------------
# Articles : colonne de lecture sous l'en-tête en blocs (élément page-hero)
--------------------------------------------------------------*/

body.single-post .inside-article > .entry-header {
  display: none;
}

body.single-post.one-container .site-content,
body.page:not(.home).one-container .site-content {
  padding: 0 var(--gutter) 40px;
}

body.single-post .site-main .inside-article,
body.page:not(.home) .site-main .inside-article {
  max-width: 920px;
  margin-inline: auto;
  padding: 0;
  background-color: transparent;
}

body.page:not(.home) .inside-article > .entry-header {
  padding: 56px 0 8px;
}

/* Sortie des codes courts [nikopik_badges], [nikopik_subtitle], [nikopik_meta] dans le bandeau nuit */
.post-hero-text > .badges-container {
  margin: 0;
}

.post-hero-text .badges-container a {
  color: var(--lightest);
  border-color: var(--line-night);
  background-image: linear-gradient(225deg, var(--secondary) 0 8px, transparent 8px);
}

.post-hero-text .badges-container .post-categories a {
  border-color: var(--primary);
  background-color: var(--primary);
  background-image: linear-gradient(225deg, var(--lightest) 0 8px, transparent 8px);
  color: var(--darkest);
}

.post-hero-text .badges-container a:is(:hover, :focus) {
  border-color: var(--secondary);
  background-color: var(--secondary);
  color: var(--darkest);
}

.post-hero-text > p[role="doc-subtitle"] {
  max-width: 62ch;
  margin: 0;
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

.post-hero-text > .entry-meta {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.post-hero-text > .entry-meta a {
  color: var(--lightest);
  text-decoration-line: underline;
  text-decoration-color: var(--secondary);
  text-underline-offset: 0.2em;
}

.post-hero-text > .entry-meta a:hover {
  color: var(--secondary);
}

/*--------------------------------------------------------------
# Archives : zones ajoutées par GeneratePerf sous la boucle (description, étiquettes liées), remises dans la colonne
--------------------------------------------------------------*/

.full-width-content .site-main > :is(h2, .taxonomy-description, .related-tags) {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.full-width-content .site-main > h2 {
  margin-top: 40px;
  font-size: clamp(24px, 2.6vw, 30px);
}

.full-width-content .site-main > .taxonomy-description > * {
  max-width: 72ch;
}

.related-tags {
  margin-top: 32px;
  margin-bottom: 72px;
}

.related-tags a {
  color: var(--darkest);
}

.related-tags a:hover {
  color: var(--accent);
}

/*--------------------------------------------------------------
# Modale de recherche (élément search-modal) : conteneur GP neutralisé, champ et bouton du formulaire
--------------------------------------------------------------*/

.gp-search-modal .gp-modal__container {
  width: auto;
  max-width: none;
  padding: 0;
  background: none;
}

.gp-search-modal .search-modal-form {
  width: 100%;
  background: none;
}

.search-modal-form .search-modal-fields {
  display: flex;
  border: 0;
}

.gp-search-modal .search-modal-form .search-modal-fields input {
  flex: 1;
  height: 60px;
  padding: 0 18px;
  border: 1px solid var(--line-night);
  border-right: 0;
  background-color: var(--darkest);
  color: var(--lightest);
  font-size: 19px;
}

.gp-search-modal .search-modal-form .search-modal-fields input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.gp-search-modal .search-modal-form .search-modal-fields input:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 0;
}

.search-modal-form .search-modal-fields button,
.search-modal-form .search-modal-fields button:is(:hover, :focus, :focus-visible, :active) {
  display: grid;
  place-items: center;
  width: 60px;
  padding: 0;
  background-color: var(--primary);
  color: var(--darkest);
}

.search-modal-form .search-modal-fields button:is(:hover, :focus) {
  background-color: var(--secondary);
  outline-color: var(--lightest);
}

/*--------------------------------------------------------------
# 404 et recherche sans résultat : message et formulaire natifs
--------------------------------------------------------------*/

body:is(.error404, .search-no-results) .site-main .inside-article {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 56px var(--gutter) 24px;
  background-color: transparent;
}

body:is(.error404, .search-no-results) .entry-title {
  font-size: clamp(36px, 6vw, 72px);
}

body:is(.error404, .search-no-results) .search-form {
  display: flex;
  max-width: 560px;
}

body:is(.error404, .search-no-results) .search-form label {
  flex: 1;
}

body:is(.error404, .search-no-results) .search-form .search-field {
  width: 100%;
  height: 56px;
}

body:is(.error404, .search-no-results) .search-form .search-submit {
  width: 56px;
  background-color: var(--primary);
  color: var(--darkest);
}

/*--------------------------------------------------------------
# Pied de page : thématiques populaires ([popular_tags]) sur fond encre
--------------------------------------------------------------*/

.site-footer ul.pills {
  display: block;
  margin: 0;
  line-height: 2.5;
}

.site-footer ul.pills a {
  color: var(--lightest);
  border-color: var(--line-night);
}

.site-footer ul.pills a::before {
  color: var(--secondary);
}

.site-footer ul.pills a:is(:hover, :focus) {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--darkest);
}

.site-footer ul.pills a:is(:hover, :focus)::before {
  color: var(--darkest);
}