/*
Theme Name: PEEP Réunion
Theme URI: https://example.com/
Author: PEEP Réunion
Description: Thème blocs du site PEEP Réunion.
Version: 1.0.0
Text Domain: peep-reunion
*/

/* ==========================================================================
   En-tête — mobile first, pleine largeur
   Tokens : theme.json > settings.custom.header
   ========================================================================== */

/* Conteneur du template part : pleine largeur, non fixé au défilement. */
.peep-header-wrap {
  width: 100%;
  margin: 0;
}

.peep-header {
  width: 100%;
  background: var(--wp--preset--color--blanc);
  border-bottom: 1px solid rgb(0 114 190 / 0.1);
  box-shadow: 0 1px 2px rgb(0 58 100 / 0.04);
}

.peep-header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: var(--wp--custom--header--hauteur);
  margin: 0;
  padding: 0 clamp(16px, 4vw, 48px);
}

.peep-header__logo {
  flex-shrink: 0;
  display: block;
  line-height: 0;
  border-radius: 8px; /* arrondit le contour de focus clavier */
}

.peep-header__logo img {
  display: block;
  width: var(--wp--custom--header--logo);
  height: auto;
}

.peep-header__nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Recherche : bouton déclencheur et fenêtre modale (<dialog>). */
.peep-search {
  order: -1;
}

.peep-search__toggle {
  display: grid;
  width: var(--wp--custom--header--bouton);
  height: var(--wp--custom--header--bouton);
  margin: 0;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--gris-clair);
  color: var(--wp--preset--color--bleu);
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.peep-search__toggle:hover {
  background: var(--wp--preset--color--bleu-clair);
  border-color: rgb(0 114 190 / 0.25);
  transform: scale(1.05);
}

.peep-search__toggle svg {
  width: 22px;
  height: 22px;
}

.peep-search__submit svg {
  width: 22px;
  height: 22px;
}

/* Le fond grisé est fourni par ::backdrop ; la modale est centrée par le navigateur. */
.peep-search__dialog {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.peep-search__dialog::backdrop {
  background: rgb(15 30 50 / 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.peep-search__form {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 60px;
  padding: 0 10px 0 20px;
  border-radius: var(--wp--custom--radius--carte);
  background: var(--wp--preset--color--blanc);
  box-shadow: 0 30px 60px -20px rgb(0 20 50 / 0.5);
}

.peep-search__form:focus-within {
  outline: 2px solid var(--wp--preset--color--bleu);
  outline-offset: 2px;
}

.peep-search__submit {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--bleu);
  cursor: pointer;
}

.peep-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--encre);
  font: inherit;
  font-size: var(--wp--preset--font-size--medium);
}

/* Masque la croix d'effacement native des navigateurs (doublon avec le bouton de fermeture). */
.peep-search__input::-webkit-search-cancel-button,
.peep-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.peep-search__input::-ms-clear {
  display: none;
}

.peep-search__input:focus {
  outline: none;
}

.peep-search__close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--gris-clair);
  color: var(--wp--preset--color--encre);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.peep-search__close:hover {
  background: var(--wp--preset--color--bleu-clair);
}

/* Suggestions (assets/js/recherche.js) : carte sous le champ, dans la fenêtre. */
.peep-search__suggestions {
  max-height: min(420px, 60vh);
  margin: 8px 0 0;
  padding: 6px;
  overflow-y: auto;
  border-radius: var(--wp--custom--radius--carte);
  background: var(--wp--preset--color--blanc);
  box-shadow: 0 30px 60px -20px rgb(0 20 50 / 0.5);
  list-style: none;
}

.peep-search__option {
  display: grid;
  grid-template-columns: 5.5rem 1fr; /* colonne du type : titres alignés */
  align-items: baseline;
  gap: 2px 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--wp--preset--color--encre);
  cursor: pointer;
}

.peep-search__option:hover,
.peep-search__option[aria-selected="true"] {
  background: var(--wp--preset--color--bleu-clair);
}

.peep-search__option-type {
  color: var(--wp--preset--color--bleu);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peep-search__option-titre {
  font-weight: 700;
  line-height: 1.3;
}

.peep-search__option-detail {
  grid-column: 2;
  color: #5b6673;
  font-size: var(--wp--preset--font-size--small);
}

.peep-search__option--tous {
  grid-template-columns: 1fr;
  margin-top: 4px;
  border-top: 1px solid #e3e8ee;
  border-radius: 0 0 12px 12px;
  color: var(--wp--preset--color--bleu);
}

.peep-search__vide {
  padding: 14px 12px;
  color: #5b6673;
}

/* Bouton hamburger : affiché sous 900px (WordPress bascule à 600px par défaut). */
.wp-block-navigation.peep-nav .wp-block-navigation__responsive-container-open {
  display: grid;
  width: var(--wp--custom--header--bouton);
  height: var(--wp--custom--header--bouton);
  padding: 0;
  place-items: center;
  border-radius: var(--wp--custom--radius--pill);
  background: linear-gradient(
    135deg,
    var(--wp--preset--color--bleu-2),
    var(--wp--preset--color--bleu)
  );
  color: var(--wp--preset--color--blanc);
  box-shadow: 0 6px 16px -6px rgb(0 114 190 / 0.6);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.wp-block-navigation.peep-nav
  .wp-block-navigation__responsive-container-open:hover {
  transform: scale(1.05);
}

@media (max-width: 899px) {
  .wp-block-navigation.peep-nav
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
      .is-menu-open
    ) {
    display: none;
  }
}

/* Liens de navigation. */
.peep-nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--encre);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.2s,
    background-color 0.2s,
    transform 0.2s;
}

/* Sous-menus desktop : carte flottante. */
.peep-nav .wp-block-navigation__submenu-container {
  min-width: 240px;
  padding: 8px;
  border: 1px solid rgb(0 114 190 / 0.12);
  border-radius: var(--wp--custom--radius--carte);
  background: var(--wp--preset--color--blanc);
  box-shadow: 0 20px 40px -16px rgb(0 58 100 / 0.25);
}

.peep-nav
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 500;
}

.peep-nav
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover {
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu-fonce);
}

/* Menu mobile (overlay) : plein écran avec accordéon.
   Les !important surchargent l'alignement imposé par le bloc Navigation
   dans l'overlay (piloté par les réglages de mise en page du bloc). */
.wp-block-navigation.peep-nav
  .wp-block-navigation__responsive-container.is-menu-open {
  padding: 0;
  background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--encre);
}

/* Logo affiché en haut de l'overlay, qui recouvre l'en-tête. */
.wp-block-navigation.peep-nav
  .wp-block-navigation__responsive-container.is-menu-open::before {
  content: "";
  position: absolute;
  top: 18px;
  left: clamp(16px, 4vw, 48px);
  width: 130px;
  height: 44px;
  background: url("assets/img/logo.png") left center / contain no-repeat;
}

/* Bouton de fermeture. */
.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation__responsive-container-close {
  top: 16px;
  right: clamp(16px, 4vw, 48px);
  display: grid;
  width: var(--wp--custom--header--bouton);
  height: var(--wp--custom--header--bouton);
  place-items: center;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--gris-clair);
  color: var(--wp--preset--color--encre);
  transition: background-color 0.2s;
}

.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation__responsive-container-close:hover {
  background: var(--wp--preset--color--bleu-clair);
}

.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation__responsive-container-content {
  padding: 96px clamp(16px, 4vw, 48px) 40px;
}

/* Liste verticale alignée à gauche. */
.wp-block-navigation.peep-nav .is-menu-open .wp-block-navigation__container {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0;
  width: 100%;
  text-align: left;
}

/* Entrée de menu : grille 2 colonnes (libellé | chevron) + ligne dédiée au sous-menu. */
.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation__container
  > .wp-block-navigation-item {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  align-content: start;
  justify-items: stretch;
  width: 100%;
  border-bottom: 1px solid rgb(31 42 55 / 0.08);
}

.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  grid-column: 1;
  grid-row: 1;
  display: block;
  padding: 20px 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: normal;
}

/* Bouton de dépliage (chevron). */
.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation-submenu__toggle {
  grid-column: 2;
  grid-row: 1;
  position: static;
  display: grid;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--gris-clair);
  color: var(--wp--preset--color--encre);
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation-submenu__toggle
  svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.wp-block-navigation.peep-nav
  .is-menu-open
  .peep-open
  > .wp-block-navigation-submenu__toggle {
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu);
}

.wp-block-navigation.peep-nav
  .is-menu-open
  .peep-open
  > .wp-block-navigation-submenu__toggle
  svg {
  transform: rotate(180deg);
}

/* Entrée dépliée : libellé mis en évidence. */
.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation-item.peep-open
  > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--bleu);
}

/* Sous-menu : replié par défaut, affiché quand l'entrée porte la classe .peep-open (cf. header.js). */
.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation__submenu-container {
  grid-column: 1 / -1;
  grid-row: 2;
  position: static !important;
  display: none !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 2px;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto;
  margin: 0 0 16px;
  padding: 8px !important;
  border: 0 !important;
  border-radius: var(--wp--custom--radius--carte) !important;
  background: var(--wp--preset--color--gris-clair) !important;
  box-shadow: none !important;
  opacity: 1;
  visibility: visible;
  overflow: visible;
  text-align: left;
}

.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation-item.peep-open
  > .wp-block-navigation__submenu-container {
  display: flex !important;
  animation: peep-reveal 0.25s ease;
}

@keyframes peep-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item {
  display: block;
  width: 100%;
  align-items: stretch;
  justify-content: flex-start;
}

.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  text-align: left;
}

.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover,
.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation__submenu-container
  .current-menu-item
  > .wp-block-navigation-item__content {
  background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--bleu);
}

/* Lien « Rechercher » : bouton d'action en bas du menu mobile. */
.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation__container
  > .peep-nav__search {
  margin-top: 28px;
  border-bottom: 0;
}

.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation__container
  > .peep-nav__search
  > .wp-block-navigation-item__content {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  padding: 16px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  box-shadow: 0 10px 24px -12px rgb(0 114 190 / 0.7);
}

.wp-block-navigation.peep-nav
  .is-menu-open
  .wp-block-navigation__container
  > .peep-nav__search
  > .wp-block-navigation-item__content::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Laptop / desktop (≥ 900px). */
@media (min-width: 900px) {
  .peep-header__inner {
    min-height: var(--wp--custom--header--hauteur-large);
    gap: 32px;
  }

  .peep-header__logo img {
    width: var(--wp--custom--header--logo-large);
  }

  .peep-header__nav {
    gap: 16px;
  }

  .peep-search {
    order: 0;
  }

  .peep-search__toggle {
    width: var(--wp--custom--header--bouton-large);
    height: var(--wp--custom--header--bouton-large);
  }

  .wp-block-navigation.peep-nav
    .wp-block-navigation__responsive-container-open {
    display: none;
  }

  /* Le lien « Rechercher » du menu est réservé au mobile (desktop : bouton loupe). */
  .wp-block-navigation.peep-nav .peep-nav__search {
    display: none;
  }

  .wp-block-navigation.peep-nav
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
      .is-menu-open
    ) {
    display: block;
    position: static;
    width: auto;
    background: transparent;
  }

  .peep-nav .wp-block-navigation__container {
    flex-wrap: nowrap;
    gap: 4px;
  }

  /* Liens de premier niveau en pilules, fond au survol. */
  .peep-nav
    .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    padding: 10px 16px;
    border-radius: var(--wp--custom--radius--pill);
  }

  .peep-nav
    .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content:hover,
  .peep-nav
    .wp-block-navigation__container
    > .wp-block-navigation-item.current-menu-item
    > .wp-block-navigation-item__content {
    background: var(--wp--preset--color--bleu-clair);
    color: var(--wp--preset--color--bleu-fonce);
  }
}

@media (prefers-reduced-motion: reduce) {
  .peep-header *,
  .peep-header *::before,
  .peep-header *::after {
    transition: none !important;
  }
}

/* ==========================================================================
   Pied de page — mobile first
   Mobile (< 768 px) : tout centré, l'essentiel seulement (marque, menu,
   coordonnées). Tablette (768-1099 px) : bande de présentation, puis 3
   colonnes. Ordinateur (≥ 1100 px) : 4 colonnes aux largeurs adaptées.
   ========================================================================== */

.peep-footer {
  background: var(--wp--preset--color--nuit);
  color: var(--wp--preset--color--gris-nuit);
  margin-block-start: 0;
}

.peep-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  box-sizing: border-box;
  max-width: 1296px;
  margin-inline: auto;
  padding: 48px clamp(16px, 4vw, 48px) 28px;
}

/* Supprime les marges automatiques entre blocs ; l'espacement est géré par gap.
   :where() garde une spécificité nulle pour ne pas gêner les surcharges. */
:where(.peep-footer__inner, .peep-footer__grid, .peep-footer__brand) > * {
  margin: 0;
}

.peep-footer a {
  color: var(--wp--preset--color--gris-clair);
  font-weight: 600;
  text-decoration: none;
}

.peep-footer a:hover {
  color: var(--wp--preset--color--orange);
}

.peep-footer a:focus-visible {
  outline: 2px solid var(--wp--preset--color--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Mobile : une colonne centrée --- */

.peep-footer__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}

.peep-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.peep-footer__title {
  font-family: var(--wp--preset--font-family--myriad);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--blanc);
}

.peep-footer__about {
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.7;
}

.peep-footer__heading {
  margin: 0 0 14px;
  font-family: var(--wp--preset--font-family--myriad);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gris-nuit);
}

/* Le menu court se suffit à lui-même sur mobile : pas de titre de colonne. */
.peep-footer__col--site .peep-footer__heading,
.peep-footer__col--cat,
.peep-footer__list.peep-footer__list--full {
  display: none;
}

/* Réseaux sociaux (bloc core/social-links). Pas d'animation au survol. */
.peep-footer__social {
  gap: 12px;
  margin: 0;
  padding: 0;
}

.peep-footer__social .wp-social-link {
  width: var(--wp--custom--footer--social);
  height: var(--wp--custom--footer--social);
  margin: 0;
  border-radius: 14px;
  background: var(--wp--preset--color--nuit-2);
}

.peep-footer__social .wp-social-link:hover {
  background: var(--wp--preset--color--bleu);
}

.peep-footer__social .wp-social-link a {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 0;
  color: var(--wp--preset--color--blanc);
}

.peep-footer__social .wp-social-link svg {
  width: 22px;
  height: 22px;
}

/* Listes de liens */
.peep-footer__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.peep-footer__list a {
  font-size: 16px;
}

/* Menu court du mobile : une ligne qui passe à la ligne, centrée */
.peep-footer__list.peep-footer__list--main {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
}

/* Coordonnées : icône orange devant chaque ligne */
.peep-footer__list--icons {
  align-items: center;
  gap: 14px;
}

.peep-footer__list--icons li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  color: var(--wp--preset--color--gris-clair);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}

.peep-footer__list--icons address {
  font-style: normal;
}

.peep-footer__list--icons svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--wp--preset--color--orange);
}

.peep-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
  padding: 14px 24px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--nuit-2);
  color: var(--wp--preset--color--blanc);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.peep-footer .peep-footer__cta:hover {
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
}

.peep-footer__cta svg {
  width: 16px;
  height: 16px;
}

/* Ligne légale : copyright et liens, centrés et empilés en mobile ;
   passent en ligne (copyright à gauche, liens à droite) à partir de 900px. */
.peep-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 32px;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  text-align: center;
}

.peep-footer__copy {
  margin: 0;
  font-size: 15px;
}

.peep-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.peep-footer__legal-links a {
  color: var(--wp--preset--color--gris-nuit);
  font-size: 15px;
}

@media (min-width: 900px) {
  .peep-footer__legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 36px;
    text-align: left;
  }

  .peep-footer__legal-links {
    justify-content: flex-end;
  }
}

/* --- Tablette : bande de présentation, puis 3 colonnes --- */

@media (min-width: 768px) {
  .peep-footer__inner {
    gap: 48px;
    padding-top: 56px;
    padding-bottom: 36px;
  }

  .peep-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 40px;
    text-align: left;
  }

  /* Marque sur toute la largeur : titre et texte à gauche, réseaux à droite */
  .peep-footer__brand {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
  }

  .peep-footer__about {
    max-width: 52ch;
  }

  .peep-footer__col--site .peep-footer__heading,
  .peep-footer__col--cat {
    display: block;
  }

  .peep-footer__list.peep-footer__list--full {
    display: flex;
  }

  .peep-footer__list.peep-footer__list--main {
    display: none;
  }

  .peep-footer__list--icons {
    align-items: stretch;
  }
}

/* --- Ordinateur : 4 colonnes, plus de place pour la marque et le contact --- */

@media (min-width: 1100px) {
  .peep-footer__inner {
    gap: 56px;
    padding-top: 64px;
    padding-bottom: 40px;
  }

  .peep-footer__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.3fr);
    gap: 56px;
  }

  .peep-footer__brand {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .peep-footer__title {
    font-size: 32px;
  }

  .peep-footer__about {
    max-width: 32ch;
  }
}

/* ==========================================================================
   Accueil — mobile first
   ========================================================================== */

.peep-home {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-bottom: 72px;
}

/* Les espacements sont portés par gap : les marges automatiques des blocs sont annulées. */
.peep-home
  :is(
    .peep-container,
    .peep-alert,
    .peep-card__body,
    .peep-tile,
    .peep-contact,
    .peep-contact__text
  )
  > *,
.peep-home .wp-block-post-template > li {
  margin: 0;
}

.peep-home :is(h1, h2, h3) {
  font-family: var(--wp--preset--font-family--myriad);
}

.peep-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1296px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

/* Boutons : dimensions communes à la page d'accueil. */
.peep-home .wp-block-button__link {
  padding: 14px 28px;
  font-weight: 700;
  text-align: center;
}

/* Bouton outline : survol (la couleur de survol globale des boutons est orange). */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--bleu-fonce);
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu-fonce);
}

.peep-btn--arrow .wp-block-button__link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.2s;
}

.peep-btn--arrow .wp-block-button__link:hover::after {
  transform: translateX(4px);
}

/* Accueil — bannière */
.peep-hero {
  box-sizing: border-box;
  min-height: var(--wp--custom--home--banniere);
  padding: 48px clamp(16px, 3.5vw, 64px);
  justify-content: flex-start;
}

.peep-hero .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
}

.peep-hero .wp-block-cover__inner-container > * {
  margin: 0;
}

.peep-hero__title {
  font-size: clamp(40px, 5vw, 88px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.peep-hero__lead {
  max-width: 26em;
  font-size: clamp(17px, 1.5vw, 26px);
  font-weight: 600;
  line-height: 1.5;
}

.peep-hero__actions {
  gap: 18px;
  margin-top: 8px;
}

.peep-hero .wp-block-button__link {
  min-height: clamp(52px, 3.9vw, 68px);
  padding: 0 clamp(28px, 2.4vw, 42px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 1.15vw, 20px);
  letter-spacing: 0.01em;
}

.peep-hero .is-style-outline > .wp-block-button__link {
  border-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--blanc);
}

.peep-hero .is-style-outline > .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--blanc);
  background: rgb(255 255 255 / 0.16);
  color: var(--wp--preset--color--blanc);
}

/* Accueil — bandeau d'alerte */
.peep-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 16px;
  background: var(--wp--preset--color--orange-clair);
  color: var(--wp--preset--color--orange-texte);
}

.peep-alert__icon {
  display: grid;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--orange);
  color: var(--wp--preset--color--blanc);
}

.peep-alert__icon svg {
  width: 20px;
  height: 20px;
}

.peep-alert__text {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  line-height: 1.4;
}

/* Titre de section suivi d'un filet. */
.peep-section-title {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--encre);
}

.peep-section-title::after {
  content: "";
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--wp--preset--color--bleu-2);
}

/* Cartes d'actualité (« À la une », dernières actualités, listing /actualites/). */
.peep-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--wp--custom--home--carte);
  background: var(--wp--preset--color--blanc);
  box-shadow: var(--wp--preset--shadow--carte);
}

/* Rend toute la carte cliquable (stretched link) via le seul lien réel qu'elle contient : le titre. */
.peep-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Repasse au-dessus du stretched-link pour rester cliquable individuellement (lien vers la catégorie). */
.peep-card .peep-pill {
  position: relative;
  z-index: 1;
}

.peep-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--wp--preset--color--gris-clair);
}

/* Pas de photo à la une : liseré en pointillés, sans icône ni texte. */
.peep-card__media:not(:has(img)) {
  box-sizing: border-box;
  border: 2px dashed rgb(0 114 190 / 0.25);
}

.peep-card__media > *,
.peep-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.peep-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
}

.peep-card__title {
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 800;
  line-height: 1.2;
}

.peep-card__title a {
  color: var(--wp--preset--color--encre);
  text-decoration: none;
}

.peep-card__title a:hover {
  color: var(--wp--preset--color--bleu);
}

.peep-card__excerpt {
  color: #4b5563;
}

.peep-card__date {
  margin-top: auto;
  color: #5b6673;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
}

/* Pastille de catégorie. */
.peep-pill {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.peep-pill a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s;
}

.peep-pill a:hover {
  background: var(--wp--preset--color--bleu-fonce);
}

.peep-pill--soft a {
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu);
}

.peep-pill--soft a:hover {
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
}

/* Accueil — à la une */
.peep-card--featured .peep-card__media {
  aspect-ratio: 4 / 3;
}

.peep-card--featured .peep-card__title {
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.1;
}

.peep-card--featured .peep-card__body {
  justify-content: center;
  padding: 28px 24px;
}

/* Accueil — dernières actualités */
.peep-news .wp-block-post-template {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.peep-news .wp-block-post-template > li {
  display: flex;
}

.peep-news .peep-card {
  width: 100%;
}

.peep-news__more {
  flex-direction: column;
  align-items: stretch;
}

.peep-news__more .wp-block-button {
  width: 100%;
}

/* Accueil — tuiles Ressources / Adhésion */
.peep-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.peep-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 24px;
  border-radius: var(--wp--custom--home--carte);
  background: var(--wp--preset--color--gris-clair);
}

.peep-tile__icon {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: var(--wp--custom--radius--pill);
}

.peep-tile__icon svg {
  width: 26px;
  height: 26px;
}

.peep-tile__icon--bleu {
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu);
}

.peep-tile__icon--orange {
  background: var(--wp--preset--color--orange-clair);
  color: var(--wp--preset--color--orange-texte);
}

.peep-tile__title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--wp--preset--color--encre);
}

.peep-tile__text {
  color: #4b5563;
  line-height: 1.7;
}

.peep-tile .wp-block-buttons {
  margin-top: auto;
}

/* Accueil — tuile contact */
.peep-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 24px;
  border-radius: var(--wp--custom--home--carte);
  background: var(--wp--preset--color--bleu-clair);
}

.peep-contact__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}

.peep-contact__title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--bleu);
}

.peep-contact .wp-block-button__link:hover {
  background: var(--wp--preset--color--bleu-fonce);
}

@media (min-width: 600px) {
  .peep-news .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .peep-home {
    gap: 72px;
    padding-bottom: 96px;
  }

  .peep-card--featured {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .peep-card--featured .peep-card__media {
    aspect-ratio: auto;
    min-height: 100%;
  }

  .peep-card--featured .peep-card__body {
    padding: 40px;
    /* Le corps pilote la hauteur de toute la carte (l'image s'y étire via
       min-height: 100%) : sans plancher, un article sans extrait ou avec un
       extrait court réduit la carte entière, quel que soit son contenu. */
    min-height: clamp(320px, 28vw, 440px);
  }

  .peep-news__more {
    flex-direction: row;
    justify-content: flex-end;
  }

  .peep-news__more .wp-block-button {
    width: auto;
  }

  .peep-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .peep-tile {
    padding: 36px 32px;
  }

  .peep-contact {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 40px 48px;
  }
}

@media (min-width: 900px) {
  .peep-news .wp-block-post-template {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Accueil — état vide des actualités (squelette) */
.peep-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.peep-skeleton .peep-card__media {
  background: var(--wp--preset--color--gris-clair);
}

.peep-skeleton__bar {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 8px;
  background: #e9edf2;
}

.peep-skeleton__label {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--wp--custom--radius--pill);
  background: #e9edf2;
  color: #6b7686;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peep-skeleton__title {
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  color: #6b7686;
}

.peep-skeleton__text {
  color: #7b8593;
  line-height: 1.6;
}

.peep-skeleton__bar--title {
  height: 22px;
}

.peep-skeleton__bar--short {
  width: 60%;
}

.peep-skeleton__bar--date {
  width: 90px;
  margin-top: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .peep-skeleton .peep-card__media,
  .peep-skeleton__bar {
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      rgb(255 255 255 / 0.65) 50%,
      transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: peep-shimmer 1.6s ease-in-out infinite;
  }
}

@keyframes peep-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -100% 0;
  }
}

/* ==========================================================================
   Page Contact — mobile first
   ========================================================================== */

.peep-contact-page {
  padding: clamp(24px, 5vw, 48px) 0 96px;
}

.peep-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 36px;
  color: #5b6673;
  font-size: var(--wp--preset--font-size--medium);
}

.peep-breadcrumb a {
  color: #5b6673;
  text-decoration: none;
}

.peep-breadcrumb a:hover {
  color: var(--wp--preset--color--bleu);
  text-decoration: underline;
}

.peep-breadcrumb [aria-current="page"] {
  color: var(--wp--preset--color--encre);
  font-weight: 600;
}

.peep-contact-page__grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.peep-contact-page__info,
.peep-contact-page__card-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.peep-contact-page__info > * {
  margin: 0 0 40px;
}

.peep-contact-page__title {
  margin: 0 0 14px;
}

.peep-contact-page__lead {
  color: #5b6673;
  max-width: 44ch;
}

.peep-contact-page__coords {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.peep-contact-page__coords li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.peep-contact-page__coords a {
  color: var(--wp--preset--color--encre);
  text-decoration: none;
  font-weight: 600;
}

.peep-contact-page__coords a:hover {
  color: var(--wp--preset--color--bleu);
}

.peep-contact-page__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu);
}

.peep-contact-page__icon svg {
  width: 20px;
  height: 20px;
}

.peep-contact-page__box {
  margin-top: 48px;
  padding: 24px 28px;
  border-radius: var(--wp--custom--radius--encadre);
  background: var(--wp--preset--color--gris-clair);
}

.peep-contact-page__box p {
  margin: 0 0 16px;
  color: var(--wp--preset--color--encre);
  line-height: 1.55;
}

.peep-contact-page__arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wp--preset--color--bleu);
  font-weight: 700;
  text-decoration: none;
}

.peep-contact-page__arrow svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}

.peep-contact-page__arrow:hover svg {
  transform: translateX(4px);
}

.peep-contact-page__card {
  padding: 32px;
  border-radius: var(--wp--custom--radius--carte);
  background: var(--wp--preset--color--blanc);
  box-shadow: var(--wp--preset--shadow--carte);
}

.peep-contact-page__card-title {
  margin: 0 0 28px;
  font-size: var(--wp--preset--font-size--large);
}

/* Champs générés par Contact Form 7 */
.peep-contact-page__form .wpcf7-form p {
  margin: 0 0 22px;
  color: var(--wp--preset--color--encre);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--medium);
}

.peep-contact-page__form .wpcf7-form label {
  display: block;
  font-weight: 600;
}

/* CF7 place un <br> juste après chaque label (lui-même en display:block) : ligne
   fantôme à neutraliser, sinon elle s'ajoute à la marge ci-dessous et double
   l'espace visible entre le label et le champ. */
.peep-contact-page__form .wpcf7-form p br {
  display: none;
}

.peep-contact-page__form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 10px;
}

.peep-contact-page__form input.wpcf7-form-control,
.peep-contact-page__form textarea.wpcf7-form-control {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgb(0 58 100 / 0.15);
  border-radius: 10px;
  background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--encre);
  font: inherit;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 400;
}

.peep-contact-page__form textarea.wpcf7-form-control {
  height: 110px;
  min-height: 110px;
  resize: vertical;
}

.peep-contact-page__form input.wpcf7-form-control:focus,
.peep-contact-page__form textarea.wpcf7-form-control:focus {
  outline: 2px solid var(--wp--preset--color--bleu);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--bleu);
}

.peep-contact-page__form .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: #b42318;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--small);
}

.peep-contact-page__form .cf-turnstile {
  margin: 4px 0 20px;
}

.peep-contact-page__form input[type="submit"],
.peep-contact-page__form button[type="submit"] {
  display: block;
  width: 100%;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
  font-family: var(--wp--preset--font-family--myriad);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--medium);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.peep-contact-page__form input[type="submit"]:hover,
.peep-contact-page__form button[type="submit"]:hover {
  background: var(--wp--preset--color--bleu-fonce);
}

.peep-contact-page__form input[type="submit"]:disabled,
.peep-contact-page__form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: default;
}

.peep-contact-page__form .wpcf7-spinner {
  margin: 12px auto 0;
  display: block;
}

/* Rendu par défaut de CF7, gardé comme repli sans JavaScript */
.peep-contact-page__form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--wp--preset--color--gris-clair);
  color: var(--wp--preset--color--encre);
  font-weight: 600;
}

.peep-contact-page__form form.sent .wpcf7-response-output {
  background: #e6f4ea;
  color: #1e7b34;
}

.peep-contact-page__form form.invalid .wpcf7-response-output,
.peep-contact-page__form form.failed .wpcf7-response-output,
.peep-contact-page__form form.spam .wpcf7-response-output {
  background: #fbeae9;
  color: #b42318;
}

/* Panneau de confirmation / erreur (piloté par assets/js/contact.js) */
.peep-contact-page__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 24px;
  border-radius: var(--wp--custom--radius--carte);
}

.peep-contact-page__panel[hidden] {
  display: none;
}

.peep-contact-page__panel--success {
  background: #e6f4ea;
}

.peep-contact-page__panel--error {
  background: #fbeae9;
}

.peep-contact-page__panel-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--blanc);
}

.peep-contact-page__panel-icon svg {
  width: 22px;
  height: 22px;
}

.peep-contact-page__panel-icon--success {
  color: #1e7b34;
}

.peep-contact-page__panel-icon--error {
  color: #b42318;
}

.peep-contact-page__panel-title {
  margin: 0;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--encre);
}

.peep-contact-page__panel-text {
  margin: 0;
  color: var(--wp--preset--color--encre);
}

.peep-contact-page__panel-btn {
  margin-top: 6px;
  padding: 10px 22px;
  border: 2px solid var(--wp--preset--color--bleu);
  border-radius: var(--wp--custom--radius--pill);
  color: var(--wp--preset--color--bleu);
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.peep-contact-page__panel-btn:hover {
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
}

@media (min-width: 900px) {
  .peep-contact-page__grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 64px;
  }

  .peep-contact-page__info {
    flex: 0 0 auto;
    width: 42%;
  }

  .peep-contact-page__card-col {
    flex: 1 1 auto;
    width: 58%;
  }

  .peep-contact-page__form input[type="submit"],
  .peep-contact-page__form button[type="submit"] {
    width: auto;
  }
}

/* ==========================================================================
   Page 404
   ========================================================================== */

.peep-404 {
  padding: clamp(56px, 10vw, 120px) 0 clamp(72px, 10vw, 120px);
}

.peep-404__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.peep-404__icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu);
}

.peep-404__icon svg {
  width: 40px;
  height: 40px;
}

.peep-404__eyebrow {
  padding: 6px 14px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--gris-clair);
  color: var(--wp--preset--color--encre);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peep-404__title {
  margin: 0;
}

.peep-404__text {
  margin: 0;
  max-width: 42ch;
  color: #5b6673;
}

.peep-404__actions {
  justify-content: center;
  margin-top: 4px;
}

.peep-404__links {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid rgb(0 58 100 / 0.1);
  text-align: center;
}

.peep-404__links-label {
  margin: 0 0 14px;
  color: var(--wp--preset--color--encre);
  font-weight: 600;
}

.peep-404__links-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.peep-404__links-list a {
  display: inline-block;
  padding: 8px 18px;
  border: 2px solid var(--wp--preset--color--bleu);
  border-radius: var(--wp--custom--radius--pill);
  color: var(--wp--preset--color--bleu);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.peep-404__links-list a:hover {
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
}

@media (prefers-reduced-motion: no-preference) {
  .peep-404__content {
    animation: peep-404-rise 0.6s ease-out both;
  }

  .peep-404__icon {
    animation: peep-404-float 3.2s ease-in-out infinite;
  }
}

@keyframes peep-404-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes peep-404-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ==========================================================================
   Actualités — listing (/actualites/) et catégorie — mobile first
   La grille de cartes réutilise .peep-news et .peep-card, déjà stylés pour
   la section « Dernières actualités » de l'accueil.
   ========================================================================== */

.peep-news-listing {
  padding: clamp(24px, 5vw, 48px) 0 96px;
}

.peep-news-listing__title {
  margin: 0 0 12px;
}

.peep-news-listing__lead {
  margin: 0 0 32px;
  color: #5b6673;
  max-width: 60ch;
}

.peep-news-listing__filter {
  margin-bottom: 40px;
}

/* Filtre par catégorie (<details>/<summary> natif, JS en amélioration progressive). */
.peep-filter {
  position: relative;
  display: inline-block;
}

.peep-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 2px solid var(--wp--preset--color--bleu);
  border-radius: var(--wp--custom--radius--pill);
  color: var(--wp--preset--color--bleu);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--small);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.peep-filter__toggle::-webkit-details-marker,
.peep-filter__toggle::marker {
  display: none;
}

.peep-filter__toggle strong {
  color: var(--wp--preset--color--encre);
}

.peep-filter__chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.peep-filter[open] .peep-filter__chevron {
  transform: rotate(180deg);
}

.peep-filter__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  padding: 8px;
  border-radius: var(--wp--custom--radius--carte);
  background: var(--wp--preset--color--blanc);
  box-shadow: var(--wp--preset--shadow--carte);
}

.peep-filter__item {
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--wp--preset--color--encre);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.peep-filter__item:hover {
  background: var(--wp--preset--color--gris-clair);
}

.peep-filter__item--active {
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
}

.peep-filter__item--active:hover {
  background: var(--wp--preset--color--bleu-fonce);
}

/* État vide (aucun article publié / aucun article dans cette catégorie). */
.peep-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  border-radius: var(--wp--custom--radius--carte);
  background: var(--wp--preset--color--gris-clair);
  text-align: center;
}

.peep-empty-state__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu);
}

.peep-empty-state__icon svg {
  width: 28px;
  height: 28px;
}

.peep-empty-state__title {
  margin: 0;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--encre);
}

.peep-empty-state__text {
  margin: 0;
  color: #5b6673;
  max-width: 42ch;
}

.peep-empty-state__link {
  margin-top: 4px;
  color: var(--wp--preset--color--bleu);
  font-weight: 700;
  text-decoration: none;
}

.peep-empty-state__link:hover {
  text-decoration: underline;
}

/* Pagination. */
.peep-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 48px;
}

.peep-pagination .page-numbers,
.peep-pagination .wp-block-query-pagination-previous,
.peep-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--wp--custom--radius--pill);
  color: var(--wp--preset--color--encre);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.peep-pagination a.page-numbers:hover,
.peep-pagination .wp-block-query-pagination-previous:hover,
.peep-pagination .wp-block-query-pagination-next:hover {
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu);
}

.peep-pagination .page-numbers.current {
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
}

/* ==========================================================================
   Actualités — article (/actualites/{slug}/) — mobile first
   ========================================================================== */

.peep-news-single {
  padding: clamp(24px, 5vw, 48px) 0 96px;
}

/* Barre de progression de lecture (assets/js/single-post.js la remplit). */
.peep-progression {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
}

.peep-progression__barre {
  width: 0;
  height: 100%;
  background: var(--wp--preset--color--orange);
  transition: width 0.1s linear;
}

.peep-breadcrumb__current,
.peep-breadcrumb__current a {
  color: #5b6673;
  font: inherit;
  text-decoration: none;
}

.peep-breadcrumb__current a:hover {
  color: var(--wp--preset--color--bleu);
  text-decoration: underline;
}

/* Même axe de lecture pour l'en-tête et le corps ; la photo (plus bas) est
   volontairement un peu plus large, pas désalignée. */
.peep-news-single__entete,
.peep-news-single__colonne {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.peep-news-single__entete {
  margin-bottom: 28px;
}

.peep-news-single__entete .peep-pill {
  margin: 0 0 18px;
}

/* Titre en sans-serif, noir (pas bleu) : plus proche d'un titre de presse. */
.peep-news-single__title {
  margin: 0 0 20px;
  color: var(--wp--preset--color--encre);
  font-family: var(--wp--preset--font-family--myriad);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 2.875rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Chapô : paragraphe d'intro facultatif, sous le titre. */
.peep-news-single__chapo {
  margin: 0 0 20px;
  color: #3a4552;
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 600;
  line-height: 1.4;
}

.peep-news-single__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgb(0 58 100 / 0.1);
}

.peep-news-single__avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 800;
}

.peep-news-single__signature {
  margin: 0;
  color: var(--wp--preset--color--encre);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
}

.peep-news-single__meta-ligne {
  margin: 2px 0 0;
  color: #5b6673;
  font-size: var(--wp--preset--font-size--small);
}

/* Photo à la une : plus large que la colonne de lecture (comme un vrai
   habillage éditorial), sans carte ni ombre. */
.peep-news-single__cover {
  aspect-ratio: 21 / 9;
  max-width: 960px;
  max-height: 460px;
  margin: 0 auto 40px;
  border-radius: var(--wp--custom--radius--carte);
  overflow: hidden;
  background: var(--wp--preset--color--gris-clair);
}

.peep-news-single__cover img {
  display: block;
  width: 100%;
  height: 100%;
}

.peep-news-single__cover--cover img {
  object-fit: cover;
}

/* Logos, affiches... : image entière visible plutôt que recadrée. */
.peep-news-single__cover--contain {
  box-sizing: border-box;
  padding: 32px;
}

.peep-news-single__cover--contain img {
  object-fit: contain;
}

/* Pas de photo à la une : état vide explicite plutôt qu'un bloc gris muet. */
.peep-news-single__cover--vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
}

.peep-news-single__cover--vide svg {
  width: 40px;
  height: 40px;
}

.peep-news-single__cover--vide p {
  margin: 0;
}

/* Légende + crédit photo, sous la photo à la une (le bloc article-hero
   donne à .peep-news-single__cover sa marge basse ; la légende, quand elle
   existe, ajoute juste un peu d'espace sous elle). */
.peep-news-single__cover-legende {
  max-width: 960px;
  margin: -24px auto 40px;
  color: #5b6673;
  font-size: var(--wp--preset--font-size--small);
  font-style: italic;
  text-align: center;
}

.peep-news-single__content {
  color: var(--wp--preset--color--encre);
  font-family: var(--wp--preset--font-family--utopia);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.75;
}

.peep-news-single__content > * {
  margin-bottom: 24px;
}

/* Lettrine sur le premier paragraphe du corps (le chapô, lui, est un champ séparé). */
.peep-news-single__content > p:first-of-type::first-letter {
  float: left;
  margin: 6px 8px 0 0;
  color: var(--wp--preset--color--bleu);
  font-family: var(--wp--preset--font-family--myriad);
  font-size: 64px;
  font-weight: 800;
  line-height: 0.82;
}

/* Citation : barre latérale orange, comme demandé pour les exergues. */
.peep-news-single__content blockquote {
  margin: 0;
  padding: 4px 0 4px 24px;
  border-left: 4px solid var(--wp--preset--color--orange);
  color: #3a4552;
  font-size: var(--wp--preset--font-size--x-large);
  font-style: italic;
  line-height: 1.4;
}

/* Intertitres : même famille que le titre principal (pas de mélange
   serif/sans-serif entre le H1 et les H2/H3 du contenu). */
.peep-news-single__content h2,
.peep-news-single__content h3 {
  color: var(--wp--preset--color--encre);
  font-family: var(--wp--preset--font-family--myriad);
  font-weight: 700;
  line-height: 1.25;
}

.peep-news-single__content h2 {
  margin: 44px 0 16px;
  font-size: var(--wp--preset--font-size--x-large);
}

.peep-news-single__content h3 {
  margin: 34px 0 12px;
  font-size: var(--wp--preset--font-size--large);
}

.peep-news-single__content ul,
.peep-news-single__content ol {
  padding-left: 1.2em;
}

.peep-news-single__content li {
  margin-bottom: 10px;
}

.peep-news-single__content li::marker {
  color: var(--wp--preset--color--bleu);
  font-weight: 700;
}

.peep-news-single__content img {
  border-radius: var(--wp--custom--radius--carte);
  height: auto;
  max-width: 100%;
}

.peep-news-single__content a {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Encadré Infos pratiques (Quand / Où / Contact), position fixe en bas d'article. */
.peep-infos-pratiques {
  margin: 40px 0 0;
  padding: 24px;
  border-radius: var(--wp--custom--radius--carte);
  background: var(--wp--preset--color--bleu-clair);
}

.peep-infos-pratiques__titre {
  margin: 0 0 16px;
  color: var(--wp--preset--color--bleu);
  font-family: var(--wp--preset--font-family--myriad);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.peep-infos-pratiques__grille {
  display: grid;
  gap: 16px;
}

.peep-infos-pratiques__ligne {
  display: flex;
  gap: 12px;
}

.peep-infos-pratiques__ligne svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--wp--preset--color--bleu);
}

.peep-infos-pratiques__libelle {
  margin: 0;
  color: var(--wp--preset--color--bleu);
  font-family: var(--wp--preset--font-family--myriad);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
}

.peep-infos-pratiques__valeur {
  margin: 2px 0 0;
  color: var(--wp--preset--color--encre);
  font-family: var(--wp--preset--font-family--myriad);
  font-size: var(--wp--preset--font-size--medium);
}

.peep-infos-pratiques__valeur a {
  color: var(--wp--preset--color--bleu);
}

@media (min-width: 600px) {
  .peep-infos-pratiques__grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Pièce jointe : visionneuse PDF en lecture seule (pas de bouton téléchargement). */
.peep-piece-jointe {
  margin: 24px 0 0;
}

.peep-piece-jointe__titre {
  margin: 0 0 10px;
  color: var(--wp--preset--color--encre);
  font-family: var(--wp--preset--font-family--myriad);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
}

/* Pied d'article : mots-clés + retour, détachés du texte. */
.peep-news-single__pied {
  margin-top: 48px;
  padding: 28px 0 0;
  border-top: 1px solid rgb(0 58 100 / 0.1);
}

/* Mots-clés : badges orange doux, dans les tons des boutons du site sans
   en avoir le poids visuel (ce ne sont pas des appels à l'action). Pas de
   lien : il n'existe pas d'archive par mot-clé sur le site. */
.peep-news-single__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.peep-news-single__tags-label {
  color: #5b6673;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.peep-badge {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--orange-clair);
  color: var(--wp--preset--color--orange-texte);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
}

.peep-news-single__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 10px 22px;
  border: 2px solid var(--wp--preset--color--bleu);
  border-radius: var(--wp--custom--radius--pill);
  color: var(--wp--preset--color--bleu);
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.peep-news-single__back svg {
  width: 18px;
  height: 18px;
}

.peep-news-single__back:hover {
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
}

/* ==========================================================================
   Bandeau de cookies — mobile first
   ========================================================================== */

.peep-cookie-banner {
  position: fixed;
  z-index: 1000;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px clamp(16px, 4vw, 40px);
  background: var(--wp--preset--color--blanc);
  border-top: 1px solid rgb(0 58 100 / 0.1);
  box-shadow: 0 -8px 24px rgb(0 58 100 / 0.12);
}

.peep-cookie-banner[hidden] {
  display: none;
}

.peep-cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1296px;
  margin: 0 auto;
}

.peep-cookie-banner__text {
  margin: 0;
  color: var(--wp--preset--color--encre);
  font-size: var(--wp--preset--font-size--small);
}

.peep-cookie-banner__text a {
  color: var(--wp--preset--color--bleu);
}

.peep-cookie-banner__actions {
  display: flex;
  gap: 12px;
}

.peep-cookie-banner__btn {
  flex: 1;
  padding: 10px 20px;
  border-radius: var(--wp--custom--radius--pill);
  font-family: var(--wp--preset--font-family--myriad);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--small);
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.peep-cookie-banner__btn--refuse {
  border: 2px solid var(--wp--preset--color--bleu);
  background: transparent;
  color: var(--wp--preset--color--bleu);
}

.peep-cookie-banner__btn--refuse:hover {
  background: var(--wp--preset--color--bleu-clair);
}

.peep-cookie-banner__btn--accept {
  border: 0;
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
}

.peep-cookie-banner__btn--accept:hover {
  background: var(--wp--preset--color--bleu-fonce);
}

@media (min-width: 600px) {
  .peep-cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .peep-cookie-banner__text {
    flex: 1;
  }

  .peep-cookie-banner__actions {
    flex-shrink: 0;
  }

  .peep-cookie-banner__btn {
    flex: none;
  }
}

/* Sans mesure d'audience (functions.php) : aucun choix de cookies à gérer. */
.peep-sans-mesure [data-peep-cookie-manage],
.peep-sans-mesure li:has(> [data-peep-cookie-manage]) {
  display: none;
}

/* ==========================================================================
   Pages légales (mentions légales) — mobile first
   ========================================================================== */

.peep-legal {
  padding: clamp(24px, 5vw, 48px) 0 96px;
}

.peep-legal__colonne {
  width: 100%;
  max-width: 760px;
}

.peep-legal__title {
  margin: 0 0 32px;
}

.peep-legal__content {
  color: var(--wp--preset--color--encre);
  line-height: 1.7;
}

.peep-legal__content > * {
  margin: 0 0 16px;
}

.peep-legal__content h2 {
  margin: 40px 0 12px;
  color: var(--wp--preset--color--bleu);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: 1.25;
}

.peep-legal__content ul {
  padding-left: 1.2em;
}

.peep-legal__content li {
  margin-bottom: 6px;
}

.peep-legal__content li::marker {
  color: var(--wp--preset--color--bleu);
}

.peep-legal__content a {
  color: var(--wp--preset--color--bleu);
}

.peep-legal__maj {
  margin-top: 40px;
  color: #5b6673;
  font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   Recherche : page de résultats (/?s=…) — mobile first
   ========================================================================== */

.peep-search-page {
  padding: clamp(24px, 5vw, 48px) 0 96px;
}

.peep-search-page__colonne {
  width: 100%;
  max-width: 760px;
}

.peep-search-page__title {
  margin: 0 0 24px;
}

.peep-search-results__form {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.peep-search-results__input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border: 1px solid #c9d3de;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--encre);
  font: inherit;
}

.peep-search-results__input:focus {
  outline: 2px solid var(--wp--preset--color--bleu);
  outline-offset: 2px;
}

.peep-search-results__count {
  margin: 0 0 16px;
  color: #5b6673;
}

.peep-search-results__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.peep-search-results__item {
  padding: 20px 0;
  border-top: 1px solid #e3e8ee;
}

.peep-search-results__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: #5b6673;
  font-size: var(--wp--preset--font-size--small);
}

.peep-search-results__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--myriad);
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.3;
}

/* Type de résultat (Article, Ressource, Page) : même pastille que les catégories, sans lien. */
.peep-search-results__type {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peep-search-results__title a {
  color: var(--wp--preset--color--encre);
  text-decoration: none;
}

.peep-search-results__title a:hover {
  color: var(--wp--preset--color--bleu);
  text-decoration: underline;
}

.peep-search-results__excerpt {
  margin: 8px 0 0;
  color: #3a4552;
}

/* ==========================================================================
   Plan du site — mobile first
   ========================================================================== */

.peep-sitemap {
  padding: clamp(24px, 5vw, 48px) 0 96px;
}

.peep-sitemap__title {
  margin: 0 0 12px;
}

.peep-sitemap__lead {
  margin: 0 0 40px;
  color: #5b6673;
}

.peep-sitemap__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 56px;
}

.peep-sitemap__heading {
  margin: 0 0 16px;
  color: var(--wp--preset--color--bleu);
  font-size: var(--wp--preset--font-size--large);
}

.peep-sitemap__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.peep-sitemap__list a {
  color: var(--wp--preset--color--encre);
  text-decoration: none;
}

.peep-sitemap__list a:hover {
  color: var(--wp--preset--color--bleu);
  text-decoration: underline;
}

.peep-sitemap__map-heading {
  margin: 0 0 8px;
}

.peep-sitemap__map-address {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  color: #5b6673;
}

.peep-sitemap__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu);
}

.peep-sitemap__icon svg {
  width: 20px;
  height: 20px;
}

.peep-sitemap__map {
  height: 360px;
  border-radius: var(--wp--custom--radius--carte);
  overflow: hidden;
  box-shadow: var(--wp--preset--shadow--carte);
}

@media (min-width: 600px) {
  .peep-sitemap__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .peep-sitemap__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .peep-sitemap__map {
    height: 420px;
  }
}

/* ==========================================================================
   Page Adhésion — mobile first
   ========================================================================== */

.peep-adhesion {
  padding: clamp(16px, 3vw, 24px) 0 96px;
}

/* 1. Bandeau : titre, présentation et carte du bulletin. */
.peep-adhesion__hero {
  display: grid;
  gap: 28px;
  margin-top: 16px;
  padding: clamp(24px, 5vw, 44px);
  border-radius: var(--wp--custom--radius--carte);
  background:
    radial-gradient(circle at 100% 0, rgb(255 255 255 / 0.12) 0 120px, transparent 121px),
    var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
}

.peep-adhesion__surtitre {
  display: inline-block;
  margin: 0 0 16px;
  padding: 5px 12px;
  border-radius: var(--wp--custom--radius--pill);
  background: rgb(255 255 255 / 0.18);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.peep-adhesion__title {
  margin: 0 0 16px;
  color: var(--wp--preset--color--blanc);
  font-family: var(--wp--preset--font-family--myriad);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.peep-adhesion__lead {
  max-width: 52ch;
  margin: 0;
  color: rgb(255 255 255 / 0.92);
}

.peep-adhesion__bulletin {
  padding: 24px;
  border-radius: 16px;
  background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--encre);
  box-shadow: 0 12px 30px -12px rgb(0 30 60 / 0.35);
}

.peep-adhesion__bulletin-entete {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.peep-adhesion__bulletin-icone {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--wp--preset--color--orange-clair);
  color: var(--wp--preset--color--orange-texte);
}

.peep-adhesion__bulletin-icone svg {
  width: 22px;
  height: 22px;
}

.peep-adhesion__bulletin-titre {
  margin: 0;
  font-weight: 700;
}

.peep-adhesion__bulletin-meta {
  margin: 2px 0 0;
  color: #5b6673;
  font-size: 13px;
}

.peep-adhesion__bulletin-aide {
  margin: 12px 0 0;
  color: #5b6673;
  font-size: 13px;
}

.peep-adhesion__download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  padding: 14px 24px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--orange);
  color: var(--wp--preset--color--encre);
  font-family: var(--wp--preset--font-family--myriad);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s;
}

.peep-adhesion__download svg {
  width: 18px;
  height: 18px;
}

.peep-adhesion__download:hover {
  background: var(--wp--preset--color--orange-fonce);
  color: var(--wp--preset--color--encre);
}

/* Titres de section : reprennent .peep-section-title (titre + filet), en plus petit. */
.peep-adhesion__section-titre {
  margin: 48px 0 24px;
  font-family: var(--wp--preset--font-family--myriad);
  font-size: clamp(22px, 3vw, 28px);
}

/* 2. Les deux cas, numérotés. */
.peep-adhesion__cas {
  display: grid;
  gap: 24px;
}

.peep-adhesion__carte {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: var(--wp--custom--radius--carte);
}

.peep-adhesion__carte--secteurs {
  border: 1px solid var(--wp--preset--color--bleu);
  background: var(--wp--preset--color--blanc);
}

.peep-adhesion__carte--hors {
  background: var(--wp--preset--color--orange-clair);
}

.peep-adhesion__carte-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.peep-adhesion__numero {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
  font-weight: 800;
}

/* Chiffre foncé sur orange : le blanc n'y serait pas assez contrasté. */
.peep-adhesion__carte--hors .peep-adhesion__numero {
  background: var(--wp--preset--color--orange);
  color: var(--wp--preset--color--encre);
}

.peep-adhesion__carte-titre {
  margin: 0;
  color: var(--wp--preset--color--encre);
  font-family: var(--wp--preset--font-family--myriad);
  font-size: 20px;
  font-weight: 800;
}

.peep-adhesion__intro {
  margin: 0 0 14px;
  color: #5b6673;
  font-size: var(--wp--preset--font-size--small);
}

.peep-adhesion__villes {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.peep-adhesion__villes li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu-fonce);
  font-size: 14px;
  font-weight: 600;
}

.peep-adhesion__villes svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Pied de carte (contact de l'ADA), calé en bas pour aligner les deux cartes. */
.peep-adhesion__pied {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgb(0 58 100 / 0.12);
}

.peep-adhesion__pied p {
  margin: 0 0 14px;
  color: #5b6673;
  font-size: var(--wp--preset--font-size--small);
}

.peep-adhesion__pied strong {
  color: var(--wp--preset--color--encre);
}

.peep-adhesion__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.peep-adhesion__contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--wp--preset--color--bleu);
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.peep-adhesion__contact:hover {
  border-color: var(--wp--preset--color--bleu-fonce);
  background: var(--wp--preset--color--bleu-fonce);
  color: var(--wp--preset--color--blanc);
}

.peep-adhesion__contact--contour {
  border-color: rgb(0 58 100 / 0.2);
  background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--encre);
}

.peep-adhesion__contact--contour:hover {
  border-color: var(--wp--preset--color--bleu);
  background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--bleu);
}

.peep-adhesion__contact svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* QR code et ses trois étapes. */
.peep-adhesion__qr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 16px;
  background: var(--wp--preset--color--blanc);
  box-shadow: var(--wp--preset--shadow--carte);
}

.peep-adhesion__qr-image {
  flex-shrink: 0;
  width: 150px;
  height: auto;
}

.peep-adhesion__qr-titre {
  margin: 0 0 12px;
  color: var(--wp--preset--color--encre);
  font-size: 18px;
  font-weight: 800;
}

.peep-adhesion__etapes {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.peep-adhesion__etapes li {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--wp--preset--color--encre);
  font-size: 14px;
  counter-increment: etape;
}

.peep-adhesion__etapes li::before {
  content: counter(etape);
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--orange-clair);
  color: var(--wp--preset--color--orange-texte);
  font-size: 12px;
  font-weight: 700;
}

/* 3. PEEP SUP, encadré bleu : texte, puis QR code — ou, sans QR code, un
   encart qui oriente vers l'ADA (côte à côte si la section est assez
   large). La section est un conteneur : l'encart du QR code suit sa largeur
   (règles @container plus bas, communes avec la carte « hors secteurs »). */
.peep-adhesion__sup {
  container-type: inline-size;
  position: relative;
  display: grid;
  gap: 24px;
  overflow: hidden;
  margin-top: 48px;
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--wp--custom--radius--carte);
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
}

/* Cercle décoratif Bleu 2, comme les autres encadrés bleus du site
   (pseudo-élément : ignoré des lecteurs d'écran). */
.peep-adhesion__sup::before {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--wp--preset--color--bleu-2);
  opacity: 0.55;
  pointer-events: none;
}

.peep-adhesion__sup > * {
  position: relative; /* au-dessus du cercle */
}

.peep-adhesion__surtitre--clair {
  background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--bleu-fonce);
}

.peep-adhesion__sup-titre {
  margin: 0 0 12px;
  color: var(--wp--preset--color--blanc);
  font-family: var(--wp--preset--font-family--myriad);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
}

.peep-adhesion__sup-lead {
  max-width: 52ch;
  margin: 0 0 24px;
  color: var(--wp--preset--color--blanc);
}

.peep-adhesion__sup-appel {
  margin: 0 0 12px;
  color: var(--wp--preset--color--blanc);
  font-family: var(--wp--preset--font-family--myriad);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.peep-adhesion__sup-points {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.peep-adhesion__sup-points li {
  display: flex;
  gap: 10px;
  color: var(--wp--preset--color--blanc);
  font-size: var(--wp--preset--font-size--small);
}

.peep-adhesion__sup-points svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--wp--preset--color--orange);
}

/* Sans QR code : encart blanc de même forme que celui du QR code, qui oriente
   vers l'ADA (boutons de contact aux couleurs habituelles). */
.peep-adhesion__sup-contact {
  padding: 24px;
  border-radius: 16px;
  background: var(--wp--preset--color--blanc);
  box-shadow: var(--wp--preset--shadow--carte);
  color: var(--wp--preset--color--encre);
}

.peep-adhesion__sup-contact-texte {
  margin: 0 0 16px;
  color: #5b6673;
  font-size: var(--wp--preset--font-size--small);
}

/* Emplacements « À venir » (QR code, contact, villes pas encore saisis) :
   mêmes gris que les cartes vides des actualités (.peep-skeleton). */
.peep-adhesion__qr-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--wp--preset--color--gris-clair);
  color: #9aa3ae;
}

.peep-adhesion__qr-vide svg {
  width: 44px;
  height: 44px;
}

.peep-adhesion__contact--vide {
  border-color: transparent;
  background: #e9edf2;
  color: #6b7686;
}

.peep-adhesion__villes .peep-adhesion__ville-vide {
  background: var(--wp--preset--color--gris-clair);
  color: #9aa3ae;
}

.peep-adhesion__ville-vide .peep-skeleton__bar {
  width: 70%;
}

/* Media query et non @container : un conteneur ne peut pas s'interroger
   lui-même. En dessous, l'encart du QR code passe sous le texte. */
@media (min-width: 1100px) {
  .peep-adhesion__sup {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
  }
}

/* 4. Les associations : choix à gauche, fiche à droite (empilés sur mobile). */
.peep-adhesion__associations {
  display: grid;
  gap: 24px;
  padding: 24px;
  border-radius: var(--wp--custom--radius--carte);
  background:
    radial-gradient(circle at 0 100%, rgb(0 114 190 / 0.08) 0 140px, transparent 141px),
    var(--wp--preset--color--gris-clair);
}

.peep-adhesion__choix-texte {
  margin: 0 0 20px;
  color: var(--wp--preset--color--encre);
}

.peep-adhesion__label {
  display: block;
  margin: 0 0 10px;
  color: var(--wp--preset--color--encre);
  font-weight: 700;
}

/* display: block ci-dessus l'emporterait sur l'attribut hidden (sans JS). */
.peep-adhesion__label[hidden] {
  display: none;
}

.peep-adhesion__select {
  box-sizing: border-box;
  width: 100%;
  padding: 14px 44px 14px 16px;
  border: 1px solid rgb(0 58 100 / 0.15);
  border-radius: 12px;
  background: var(--wp--preset--color--blanc)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 14px center / 18px 18px;
  color: var(--wp--preset--color--encre);
  font: inherit;
  font-size: var(--wp--preset--font-size--medium);
  box-shadow: var(--wp--preset--shadow--douce);
  appearance: none;
  cursor: pointer;
}

.peep-adhesion__select:focus {
  outline: 2px solid var(--wp--preset--color--bleu);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--bleu);
}

/* Sans JS, toutes les fiches en grille ; avec, une seule (auto-fit : elle
   prend toute la largeur au lieu d'une colonne de 260 px). */
.peep-adhesion__fiches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  min-width: 0;
}

/* Message tant qu'aucune association n'est choisie (affiché par adhesion.js). */
.peep-adhesion__invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 160px;
  margin: 0;
  padding: 24px;
  border: 2px dashed rgb(0 114 190 / 0.25);
  border-radius: 16px;
  color: #5b6673;
  text-align: center;
}

.peep-adhesion__invite[hidden] {
  display: none;
}

.peep-adhesion__invite svg {
  width: 32px;
  height: 32px;
  color: var(--wp--preset--color--bleu);
}

.peep-adhesion__asso {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: 16px;
  background: var(--wp--preset--color--blanc);
  box-shadow: var(--wp--preset--shadow--carte);
}

.peep-adhesion__asso[hidden] {
  display: none;
}

.peep-adhesion__asso-entete {
  display: flex;
  align-items: center;
  gap: 14px;
}

.peep-adhesion__asso-icone {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu);
}

.peep-adhesion__asso-icone svg {
  width: 24px;
  height: 24px;
}

.peep-adhesion__asso-nom {
  margin: 0;
  color: var(--wp--preset--color--encre);
  font-family: var(--wp--preset--font-family--myriad);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.peep-adhesion__asso-contact {
  margin: 4px 0 0;
  color: #5b6673;
  font-size: var(--wp--preset--font-size--small);
}

.peep-adhesion__contact:focus-visible,
.peep-adhesion__download:focus-visible {
  outline: 3px solid var(--wp--preset--color--orange);
  outline-offset: 2px;
}

@media (min-width: 900px) {
  .peep-adhesion__associations {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    gap: 40px;
    padding: 36px;
  }
}

/* Le contenu des cartes s'adapte à la largeur de la carte, pas à celle de
   l'écran : une carte de tablette (côte à côte) est plus étroite qu'une carte
   de mobile en grand (empilée). */
.peep-adhesion__carte {
  container-type: inline-size;
}

/* Carte étroite : QR code centré au-dessus des étapes. */
.peep-adhesion__qr {
  flex-direction: column;
}

@container (min-width: 340px) {
  .peep-adhesion__villes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Un nombre impair de villes : la dernière prend toute la largeur. */
  .peep-adhesion__villes li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Carte assez large : QR code à gauche, étapes à droite (elles passent à la
   ligne si besoin). */
@container (min-width: 380px) {
  .peep-adhesion__qr {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .peep-adhesion__qr-texte {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Tablette et plus : les deux cas côte à côte. */
@media (min-width: 768px) {
  .peep-adhesion__cas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 600px) {
  .peep-adhesion__carte,
  .peep-adhesion__associations {
    padding: 28px;
  }
}

@media (min-width: 900px) {
  .peep-adhesion__hero {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
  }
}

/* Grand écran : la carte « hors secteurs » est souvent moins haute que celle
   des villes. Pour éviter un vide au-dessus de son pied, l'encart du QR code
   occupe l'espace libre et le QR code grandit avec lui, SANS réduire le texte
   des étapes (qui garde sa largeur naturelle). La carte 2 reçoit donc un peu
   plus de largeur. En dessous de 1200 px, les cartes sont trop étroites pour
   ce réglage : le QR code garde sa taille et les étapes passent à la ligne. */
@media (min-width: 1200px) {
  .peep-adhesion__cas {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  .peep-adhesion__carte--hors .peep-adhesion__qr {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .peep-adhesion__qr-texte {
    flex: 0 0 auto; /* largeur naturelle : les étapes ne passent pas à la ligne */
    align-self: center;
  }

  /* Le QR code prend la place restante : largeur restante × hauteur de
     l'encart, image carrée centrée dedans (object-fit). height: 0 → il ne
     compte pas dans le calcul de la hauteur des cartes ; min-height: 100 %
     → il remplit ensuite l'encart étiré (150 px au minimum). */
  .peep-adhesion__carte--hors .peep-adhesion__qr-image {
    flex: 1 1 0;
    width: 0;
    min-width: 150px;
    height: 0;
    min-height: max(150px, 100%);
    object-fit: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  .peep-adhesion__contact,
  .peep-adhesion__download {
    transition: none;
  }
}

/* ==========================================================================
   Ressources — rubriques et documents (/ressources/…) — mobile first
   ========================================================================== */

.peep-tuiles {
  display: grid;
  gap: 14px;
  max-width: 1032px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.peep-tuile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  height: 100%; /* cartes d'une même rangée à la même hauteur */
  min-height: 62px;
  padding: 16px 24px;
  border-radius: 8px;
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.peep-tuile svg {
  flex-shrink: 0; /* la flèche ne s'écrase pas sous un titre long */
  transition: transform 0.15s ease;
}

.peep-tuile:hover {
  background: var(--wp--preset--color--bleu-fonce);
}

.peep-tuile:hover svg {
  transform: translateX(3px);
}

.peep-tuile:focus-visible {
  outline: 3px solid var(--wp--preset--color--orange);
  outline-offset: 2px;
}

@media (min-width: 700px) {
  .peep-tuiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .peep-tuile,
  .peep-tuile svg {
    transition: none;
  }
}

/* Page d'un document (/ressources/{rubrique}/{document}/) */

.peep-ressource {
  padding-bottom: 64px;
}

.peep-ressource__grille {
  display: grid;
  gap: 24px;
  align-items: start;
}

.peep-fiche {
  padding: 16px;
  border-radius: 16px;
  background: var(--wp--preset--color--gris-clair);
}

.peep-fiche__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.peep-fiche__meta {
  margin: 0;
  color: #5b6673;
  font-size: 14px;
  font-weight: 600;
}

.peep-visionneuse {
  display: grid;
  place-items: center;
  min-height: 480px;
  border-radius: 8px;
  background: var(--wp--preset--color--blanc);
}

.peep-visionneuse__etat {
  margin: 0;
  color: #5b6673;
}

.peep-autres {
  display: grid;
  gap: 16px;
}

.peep-autres__encart {
  padding: 24px;
  border-radius: 16px;
  background: var(--wp--preset--color--gris-clair);
}

.peep-autres__titre {
  margin: 0 0 16px;
  font-size: 18px;
}

.peep-autres__encart ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.peep-autres__encart a {
  color: var(--wp--preset--color--bleu);
  font-weight: 600;
  text-decoration: none;
}

.peep-autres__encart a:hover {
  text-decoration: underline;
}

.peep-bouton-retour {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--encre);
  font-weight: 600;
  text-decoration: none;
}

.peep-bouton-retour:hover {
  border-color: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--bleu);
}

.peep-autres a:focus-visible {
  outline: 3px solid var(--wp--preset--color--orange);
  outline-offset: 2px;
}

@media (min-width: 700px) {
  .peep-fiche {
    padding: 24px;
  }
}

@media (min-width: 1000px) {
  .peep-ressource__grille {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 32px;
  }

  .peep-autres {
    position: sticky; /* l'encart reste visible pendant la lecture d'un long PDF */
    top: 24px;
  }
}

/* Visionneuse : après chargement, les pages s'empilent (plus de centrage).
   width: 100% est indispensable : avec une largeur automatique, le navigateur
   reporte max-height sur la largeur à travers aspect-ratio, et une page en
   portrait rétrécirait la visionneuse au lieu de la faire défiler. */
.peep-visionneuse.est-charge {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  max-height: 85vh;
  overflow-y: auto;
  background: transparent;
}

.peep-visionneuse:focus-visible {
  outline: 3px solid var(--wp--preset--color--orange);
  outline-offset: 2px;
}

.peep-visionneuse__page {
  display: block;
  width: 100%;
  height: auto;
  background: var(--wp--preset--color--blanc);
  box-shadow: 0 1px 3px rgba(31, 42, 55, 0.12);
}

/* Une page : l'image et, invisible à l'écran, son texte pour les lecteurs d'écran. */
.peep-visionneuse__feuille {
  display: block;
  margin: 0;
}

/* Fin de l'extrait (affichée après la dernière page) : invitation à adhérer,
   discrète, dans les couleurs du site. */
.peep-visionneuse__fin {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 24px 28px;
  border-radius: var(--wp--custom--radius--carte);
  background: var(--wp--preset--color--bleu-clair);
}

.peep-visionneuse__fin[hidden] {
  display: none;
}

.peep-visionneuse__fin > * {
  margin: 0;
}

.peep-visionneuse__fin-titre {
  color: var(--wp--preset--color--bleu-fonce);
  font-family: var(--wp--preset--font-family--myriad);
  font-size: 20px;
  font-weight: 800;
}

.peep-visionneuse__fin-texte {
  max-width: 52ch;
  color: var(--wp--preset--color--encre);
  line-height: 1.6;
}

.peep-visionneuse__fin-lien {
  display: inline-flex;
  align-items: center;
  min-height: var(--wp--custom--tactile);
  margin-top: 6px;
  padding: 10px 22px;
  box-sizing: border-box;
  border: 2px solid var(--wp--preset--color--bleu);
  border-radius: var(--wp--custom--radius--pill);
  color: var(--wp--preset--color--bleu);
  font-weight: 700;
  text-decoration: none;
}

.peep-visionneuse__fin-lien:hover,
.peep-visionneuse__fin-lien:focus-visible {
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
}

/* ==========================================================================
   Page « Qui sommes-nous » — gabarit templates/page-qui-sommes-nous.html,
   contenu créé à partir du pattern patterns/qui-sommes-nous.php (blocs
   natifs, modifiables dans l'éditeur). Couleurs posées par les réglages des
   blocs (palette) ; ici, seulement ce que les blocs ne savent pas faire.
   ========================================================================== */

.peep-qsn {
  padding: 44px 0 72px;
}

/* Titres en Myriad, comme l'accueil et la page Adhésion. */
.peep-qsn :is(h1, h2, h3) {
  font-family: var(--wp--preset--font-family--myriad);
}

.peep-qsn .peep-qsn__title {
  font-weight: 800;
  letter-spacing: -0.03em;
}

.peep-qsn__title {
  margin: 0 0 16px; /* + 24 px d'écart du conteneur = 40 px avant la 1re section */
}

.peep-qsn__content p {
  font-size: 18px;
  line-height: 1.7;
}

/* 56 px entre les sections (le contenu de page est en mise en page « flow »). */
.peep-qsn__content > .peep-qsn__section {
  margin-block: 0;
}

.peep-qsn__content > .peep-qsn__section + .peep-qsn__section {
  margin-top: 56px;
}

.peep-qsn__section.wp-block-columns {
  gap: 40px;
}

/* Colonnes empilées sous 900 px (782 px par défaut dans WordPress). */
@media (max-width: 899px) {
  .peep-qsn__section.wp-block-columns {
    flex-wrap: wrap !important;
  }

  .peep-qsn__section.wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }
}

.peep-qsn .peep-qsn__h2 {
  margin: 0 0 20px;
}

/* --- Encadré « 100 ans » --- */
.peep-qsn .peep-centenaire {
  position: relative;
  overflow: hidden;
  padding: 40px;
  border-radius: var(--wp--custom--radius--large);
}

/* Cercle décoratif (pseudo-élément : ignoré des lecteurs d'écran). */
.peep-centenaire::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--wp--preset--color--bleu-2);
  opacity: 0.55;
  pointer-events: none;
}

.peep-centenaire > * {
  position: relative; /* au-dessus du cercle */
}

.peep-qsn .peep-centenaire > * {
  margin-block: 0;
}

.peep-qsn .peep-qsn__badge {
  width: fit-content;
  margin-bottom: 20px;
  padding: 6px 14px;
  border-radius: var(--wp--custom--radius--pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.peep-qsn .peep-centenaire__chiffre {
  margin-bottom: 12px;
  font-size: 92px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.peep-qsn .peep-centenaire__accroche {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.peep-qsn .peep-centenaire__dates {
  gap: 12px;
  margin-top: 28px;
}

.peep-centenaire__date {
  padding: 16px;
  border-radius: var(--wp--custom--radius--encadre);
  background: rgb(255 255 255 / 0.14);
}

.peep-qsn .peep-centenaire__date > p {
  margin: 0;
  line-height: 1.3;
}

.peep-qsn .peep-centenaire__annee {
  font-size: 24px;
  font-weight: 800;
}

.peep-qsn .peep-centenaire__legende {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 899px) {
  .peep-qsn .peep-centenaire__chiffre {
    font-size: 64px;
  }
}

/* Petits écrans : encadré et cases moins rembourrés pour garder les trois
   dates sur une ligne (une année ne se coupe jamais). */
@media (max-width: 599px) {
  .peep-qsn .peep-centenaire {
    padding: 28px 24px;
  }

  .peep-qsn .peep-centenaire__dates {
    gap: 8px;
  }

  .peep-centenaire__date {
    padding: 12px;
  }
}

.peep-qsn .peep-centenaire__annee {
  white-space: nowrap;
}

/* Sous 360 px : les trois dates passent en colonne. */
@media (max-width: 359px) {
  .peep-qsn .peep-centenaire__dates {
    flex-direction: column;
  }
}

/* --- La PEEP à La Réunion --- */

/* Cadre de la photo : fond gris tant qu'aucune image n'est choisie. */
.peep-qsn .peep-qsn__photo {
  overflow: hidden;
  min-height: 380px;
  padding: 0;
  border-radius: var(--wp--custom--radius--large);
}

/* Pas de photo : liseré en pointillés, comme l'image principale vide d'un article. */
.peep-qsn .peep-qsn__photo:not(:has(img)) {
  box-sizing: border-box;
  border: 2px dashed rgb(0 114 190 / 0.25);
}

.peep-qsn__photo .wp-block-image {
  margin: 0;
}

.peep-qsn__photo .wp-block-image img {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: cover;
}

/* --- Carrousel de photos (blocks/carrousel-photos) --- */

/* Espace franc avec la section « La PEEP à La Réunion » au-dessus */
.peep-carrousel {
  margin-top: clamp(48px, 7vw, 88px);
}

/* En-tête : titre de section (avec son filet) et commandes à sa droite */
.peep-carrousel__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px 24px;
  margin-bottom: 24px;
}

.peep-carrousel__titre {
  flex: 1 1 300px;
  margin: 0;
}

/* Défilement natif, aimanté sur chaque photo : marche sans JavaScript.
   Marge basse : l'ombre des photos n'est pas coupée par la bande. */
.peep-carrousel__piste {
  display: flex;
  gap: 20px;
  padding-bottom: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.peep-carrousel__piste::-webkit-scrollbar {
  display: none;
}

.peep-carrousel__piste:focus-visible {
  outline: 3px solid var(--wp--preset--color--bleu);
  outline-offset: 4px;
  border-radius: var(--wp--custom--radius--large);
}

/* 1 photo et le début de la suivante sur mobile, 2 côte à côte au-delà */
.peep-carrousel__diapo {
  --hauteur-photo: 300px;
  position: relative;
  flex: 0 0 88%;
  margin: 0;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .peep-carrousel__diapo {
    --hauteur-photo: 360px;
    flex-basis: calc((100% - 20px) / 2);
  }
}

@media (min-width: 1200px) {
  .peep-carrousel__diapo {
    --hauteur-photo: 440px;
  }
}

/* Lien d'agrandissement : toute la photo est cliquable. */
.peep-carrousel__agrandir {
  position: relative;
  display: block;
  border-radius: var(--wp--custom--radius--large);
  box-shadow: var(--wp--preset--shadow--carte);
  cursor: zoom-in;
}

/* Contour à l'intérieur : la bande de défilement rognerait un contour extérieur. */
.peep-carrousel__agrandir:focus-visible {
  outline: 4px solid var(--wp--preset--color--orange);
  outline-offset: -4px;
}

.peep-carrousel__diapo img {
  display: block;
  width: 100%;
  height: var(--hauteur-photo);
  object-fit: cover;
  border-radius: var(--wp--custom--radius--large);
  background: var(--wp--preset--color--gris-clair);
}

/* Photo en hauteur : recadrée depuis le haut (visages), pas depuis le centre. */
.peep-carrousel__diapo--portrait img {
  object-position: center top;
}

/* Pastille « agrandir » : signale que la photo s'ouvre en grand */
.peep-carrousel__loupe {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--bleu);
  box-shadow: var(--wp--preset--shadow--douce);
}

/* Légende posée sur le bas de la photo, sur un dégradé qui garantit le contraste */
.peep-carrousel__legende {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 48px 20px 16px;
  border-radius: 0 0 var(--wp--custom--radius--large) var(--wp--custom--radius--large);
  background: linear-gradient(to top, rgb(0 30 55 / 0.82), rgb(0 30 55 / 0));
  color: var(--wp--preset--color--blanc);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  pointer-events: none; /* le clic passe à la photo */
}

.peep-carrousel__commandes {
  display: flex;
  align-items: center;
  gap: 12px;
}

.peep-carrousel__commandes[hidden],
.peep-carrousel__progression[hidden] {
  display: none;
}

.peep-carrousel__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
  box-shadow: var(--wp--preset--shadow--douce);
  cursor: pointer;
}

.peep-carrousel__bouton:hover {
  background: var(--wp--preset--color--bleu-fonce);
}

.peep-carrousel__bouton:focus-visible {
  outline: 3px solid var(--wp--preset--color--orange);
  outline-offset: 2px;
}

.peep-carrousel__bouton:disabled {
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu);
  box-shadow: none;
  cursor: default;
}

/* Compteur : « 2 / 7 », numéro courant en bleu */
.peep-carrousel__compteur {
  min-width: 5ch;
  margin: 0;
  color: var(--wp--preset--color--encre);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.peep-carrousel__compteur span {
  color: var(--wp--preset--color--bleu);
  font-size: 20px;
  font-weight: 800;
}

/* Barre de progression : part visible de la bande et position */
.peep-carrousel__progression {
  height: 4px;
  overflow: hidden;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--bleu-clair);
}

.peep-carrousel__progression span {
  display: block;
  width: calc(var(--taille, 0.3) * 100%);
  height: 100%;
  margin-left: calc(var(--position, 0) * 100%);
  border-radius: inherit;
  background: var(--wp--preset--color--bleu-2);
}

/* Photo agrandie : plein écran sur fond sombre, photo entière (pas recadrée) */
.peep-carrousel__fenetre {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 56px 16px 16px;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--blanc);
}

.peep-carrousel__fenetre[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.peep-carrousel__fenetre::backdrop {
  background: rgb(10 20 35 / 0.92);
}

.peep-carrousel__grande {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  margin: 0;
}

.peep-carrousel__grande img {
  max-width: min(100%, 1400px);
  max-height: calc(100dvh - 200px);
  object-fit: contain;
  border-radius: var(--wp--custom--radius--encadre);
}

.peep-carrousel__grande-legende {
  margin-top: 12px;
  font-size: 0.95rem;
  text-align: center;
}

.peep-carrousel__fenetre-commandes {
  display: flex;
  align-items: center;
  gap: 16px;
}

.peep-carrousel__fenetre-compteur {
  min-width: 4ch;
  margin: 0;
  font-weight: 700;
  text-align: center;
}

/* Boutons sur fond sombre */
.peep-carrousel__bouton--clair,
.peep-carrousel__bouton--clair:hover {
  border: 2px solid var(--wp--preset--color--blanc);
  background: transparent;
  color: var(--wp--preset--color--blanc);
  box-shadow: none;
}

.peep-carrousel__bouton--clair:disabled {
  background: transparent;
  color: var(--wp--preset--color--blanc);
  opacity: 0.35;
}

.peep-carrousel__bouton--clair:focus-visible,
.peep-carrousel__fermer:focus-visible {
  outline: 3px solid var(--wp--preset--color--orange);
  outline-offset: 2px;
}

.peep-carrousel__fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--wp--custom--radius--pill);
  background: rgb(255 255 255 / 0.12);
  color: var(--wp--preset--color--blanc);
  cursor: pointer;
}

.peep-qsn .peep-qsn__pastilles {
  gap: 10px;
  margin-top: 20px;
}

.peep-qsn .peep-qsn__pastille {
  margin: 0;
  padding: 11px 16px;
  border-radius: var(--wp--custom--radius--pill);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

/* --- Nos missions (page « Nos missions », gabarit à classe peep-qsn) --- */
/* Grille éditoriale : les sept cartes déclinent la carte « Nos valeurs »
   (fond, cercle décoratif, filet). Deux cartes bleues encadrent la grille —
   la 1re en haut à gauche, la 7e en bas à droite, chacune sur deux colonnes —
   et les cinq autres en reprennent le motif en clair : fond bleu clair, cercle
   blanc placé dans un coin différent à chaque carte.
   3 colonnes : [1 1][2] / [3][4][5] / [6][7 7] ; 2 colonnes : [1 1] puis deux
   par ligne ; 1 colonne sur mobile. Mêmes hauteurs sur une ligne (étirement
   par défaut de la grille). Aucun effet au survol (cartes non cliquables). */
.peep-qsn__cartes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 700px) {
  .peep-qsn__cartes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .peep-qsn__carte--une {
    grid-column: span 2;
  }
}

@media (min-width: 1100px) {
  .peep-qsn__cartes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .peep-qsn__carte--large {
    grid-column: span 2;
  }
}

.peep-qsn .peep-qsn__cartes > * {
  margin: 0;
}

.peep-qsn .peep-qsn__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding: 36px 34px;
  border-radius: var(--wp--custom--radius--large);
}

.peep-qsn .peep-qsn__carte > * {
  position: relative; /* au-dessus du cercle */
  margin: 0;
}

/* Cercle décoratif, signature de la carte « Nos valeurs » (pseudo-élément :
   ignoré des lecteurs d'écran). Cartes claires : blanc, de taille et de place
   variables. */
.peep-qsn__carte::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--wp--preset--color--blanc);
  opacity: 0.75;
  pointer-events: none;
}

.peep-qsn__carte:nth-child(2)::before {
  top: -70px;
  right: -60px;
}

.peep-qsn__carte:nth-child(3)::before {
  bottom: -80px;
  left: -60px;
  width: 200px;
  height: 200px;
}

.peep-qsn__carte:nth-child(4)::before {
  top: -90px;
  left: 40%;
}

.peep-qsn__carte:nth-child(5)::before {
  right: -70px;
  bottom: -70px;
  width: 190px;
  height: 190px;
}

.peep-qsn__carte:nth-child(6)::before {
  top: -60px;
  left: -70px;
  width: 150px;
  height: 150px;
}

/* Étiquette de thème, précédée d'un court filet. */
.peep-qsn .peep-qsn__theme {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--wp--preset--color--bleu-fonce);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.peep-qsn__theme::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--wp--preset--color--bleu);
}

.peep-qsn .peep-qsn__carte-titre {
  color: var(--wp--preset--color--bleu-fonce);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.peep-qsn .peep-qsn__carte-texte {
  color: var(--wp--preset--color--encre);
  font-size: 16px;
  line-height: 1.75;
}

/* Cartes bleues (1 et 7) : cercle Bleu 2, textes blancs, filet orange. */
.peep-qsn .peep-qsn__carte--une,
.peep-qsn .peep-qsn__carte--large {
  justify-content: center;
  padding: 44px 48px;
}

.peep-qsn__carte--une::before,
.peep-qsn__carte--large::before {
  width: 240px;
  height: 240px;
  background: var(--wp--preset--color--bleu-2);
  opacity: 0.55;
}

.peep-qsn__carte--une::before {
  top: -80px;
  right: -60px;
}

/* La 7e répond à la 1re : cercle en bas à gauche. */
.peep-qsn__carte--large::before {
  bottom: -90px;
  left: -70px;
}

.peep-qsn .peep-qsn__carte--une .peep-qsn__theme,
.peep-qsn .peep-qsn__carte--large .peep-qsn__theme,
.peep-qsn .peep-qsn__carte--une .peep-qsn__carte-titre,
.peep-qsn .peep-qsn__carte--large .peep-qsn__carte-titre,
.peep-qsn .peep-qsn__carte--une .peep-qsn__carte-texte,
.peep-qsn .peep-qsn__carte--large .peep-qsn__carte-texte {
  color: var(--wp--preset--color--blanc);
}

.peep-qsn .peep-qsn__carte--une .peep-qsn__theme::before,
.peep-qsn .peep-qsn__carte--large .peep-qsn__theme::before {
  background: var(--wp--preset--color--orange);
}

.peep-qsn .peep-qsn__carte--une .peep-qsn__carte-titre,
.peep-qsn .peep-qsn__carte--large .peep-qsn__carte-titre {
  font-size: clamp(24px, 3vw, 30px);
}

.peep-qsn .peep-qsn__carte--une .peep-qsn__carte-texte,
.peep-qsn .peep-qsn__carte--large .peep-qsn__carte-texte {
  max-width: 46em;
  font-size: 18px;
}

@media (max-width: 599px) {
  .peep-qsn .peep-qsn__carte,
  .peep-qsn .peep-qsn__carte--une,
  .peep-qsn .peep-qsn__carte--large {
    padding: 28px 24px;
  }
}

/* ==========================================================================
   Page « Nos partenaires » — gabarit templates/page-partenaires.html,
   contenu créé à partir du pattern patterns/partenaires.php ; partenaires
   affichés par les blocs dynamiques peep/partenaires (sections et cartes) et
   peep/partenaires-resume (compteurs), gérés dans l'espace membres.
   ========================================================================== */

.peep-partenaires {
  padding: 44px 0 72px;
}

/* Titres en Myriad, comme l'accueil et les autres pages de contenu. */
.peep-partenaires :is(h1, h2, h3) {
  font-family: var(--wp--preset--font-family--myriad);
}

/* 52 px entre les grandes parties de la page. */
.peep-partenaires__content > * {
  margin-block: 0;
}

.peep-partenaires__content > * + * {
  margin-top: 52px;
}

/* --- En-tête bleu --- */
.peep-partenaires .peep-partenaires__entete {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  align-items: center;
  gap: 36px;
  overflow: hidden;
  padding: 48px;
  border-radius: var(--wp--custom--radius--large);
}

/* Cercle décoratif (pseudo-élément : ignoré des lecteurs d'écran). */
.peep-partenaires__entete::before {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--wp--preset--color--bleu-2);
  opacity: 0.55;
  pointer-events: none;
}

.peep-partenaires__entete > * {
  position: relative; /* au-dessus du cercle */
  margin: 0;
}

.peep-partenaires .peep-partenaires__intro > * {
  margin-block: 0;
}

.peep-partenaires .peep-partenaires__badge {
  width: fit-content;
  padding: 6px 14px;
  border-radius: var(--wp--custom--radius--pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.peep-partenaires .peep-partenaires__h1 {
  margin: 18px 0 16px;
  color: var(--wp--preset--color--blanc);
  font-size: 50px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.03;
}

.peep-partenaires .peep-partenaires__lead {
  max-width: 34em;
  font-size: 19px;
  line-height: 1.55;
}

.peep-partenaires-resume__libelle {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.peep-partenaires-resume__liste {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.peep-partenaires-resume__liste li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--wp--custom--radius--encadre);
  background: rgb(255 255 255 / 0.14);
}

.peep-partenaires-resume__liste strong {
  min-width: 1.5ch;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.peep-partenaires-resume__liste span {
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 899px) {
  .peep-partenaires .peep-partenaires__entete {
    padding: 28px;
  }

  .peep-partenaires .peep-partenaires__h1 {
    font-size: 34px;
  }
}

/* --- Une section par catégorie --- */
.peep-partenaires__categorie + .peep-partenaires__categorie {
  margin-top: 52px;
}

.peep-partenaires .peep-partenaires__titre {
  margin: 0 0 24px;
  font-size: clamp(24px, 3vw, 30px);
}

/* Grille sans nombre de colonnes fixe ; cartes de même hauteur sur une ligne.
   auto-fill (et non auto-fit) : une catégorie d'une ou deux cartes garde des
   cartes de même largeur que les autres, au lieu de les étirer. */
.peep-partenaires__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 24px;
}

/* --- Carte partenaire --- */
.peep-partenaire {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(0 58 100 / 0.12);
  border-radius: var(--wp--custom--radius--large);
  background: var(--wp--preset--color--blanc);
}

.peep-partenaire__entete {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid rgb(0 58 100 / 0.08);
}

.peep-partenaire__logo {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  box-sizing: border-box;
  width: 112px;
  height: 64px;
  overflow: hidden;
  padding: 8px;
  border-radius: 10px;
  background: var(--wp--preset--color--gris-clair);
}

.peep-partenaire__logo img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* Sans logo : le nom du partenaire, en gris. */
.peep-partenaire__logo span {
  color: #5b6673;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.peep-partenaire__nom {
  margin: 0;
  color: var(--wp--preset--color--encre);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}

.peep-partenaire__accroche {
  margin: 4px 0 0;
  color: #5b6673;
  font-size: 14px;
  font-weight: 500;
}

.peep-partenaire__corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px 24px;
}

.peep-partenaire__corps > * {
  margin: 0;
}

/* Encadré de l'avantage : texte orange en gras (contraste suffisant sur l'orange clair). */
.peep-partenaire__offre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 14px 18px;
  border-radius: var(--wp--custom--radius--encadre);
  background: var(--wp--preset--color--orange-clair);
}

.peep-partenaire__offre strong {
  color: var(--wp--preset--color--encre);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.peep-partenaire__offre span {
  color: var(--wp--preset--color--orange-texte);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.peep-partenaire__points {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.peep-partenaire__points li {
  display: flex;
  gap: 10px;
  color: var(--wp--preset--color--encre);
  font-size: 15px;
  line-height: 1.5;
}

.peep-partenaire__coche {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--bleu);
}

.peep-partenaire__coche svg {
  width: 12px;
  height: 12px;
}

.peep-partenaire__code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 16px;
  border: 2px dashed var(--wp--preset--color--bleu);
  border-radius: 12px;
}

.peep-partenaire__code span {
  color: #5b6673;
  font-size: 14px;
  font-weight: 600;
}

.peep-partenaire__code strong {
  color: var(--wp--preset--color--bleu);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* Code + bouton « copier » (affiché par partenaires.js si la copie est possible). */
.peep-partenaire__code-valeur {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.peep-partenaire__copier {
  display: grid;
  place-items: center;
  width: var(--wp--custom--tactile);
  height: var(--wp--custom--tactile);
  margin: -8px -10px -8px 0; /* cible de 44 px sans agrandir l'encadré */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--bleu);
  cursor: pointer;
}

.peep-partenaire__copier[hidden] {
  display: none;
}

.peep-partenaire__copier:hover {
  background: var(--wp--preset--color--bleu-clair);
}

.peep-partenaire__copier:focus-visible {
  outline: 3px solid var(--wp--preset--color--orange);
  outline-offset: 0;
}

.peep-partenaire__copier svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Après la copie : la coche remplace l'icône pendant 2 s. */
.peep-partenaire__copie-icone,
.peep-partenaire__copier.is-copie .peep-partenaire__copier-icone {
  display: none;
}

.peep-partenaire__copier.is-copie .peep-partenaire__copie-icone {
  display: block;
}

.peep-partenaire__note {
  color: #5b6673;
  font-size: 13px;
}

/* Bouton collé en bas de la carte, quelle que soit la longueur du contenu. */
.peep-partenaire__corps > .peep-partenaire__bouton {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  box-sizing: border-box;
  min-height: var(--wp--custom--tactile);
  margin-top: auto;
  padding: 10px 20px;
  border: 2px solid var(--wp--preset--color--bleu);
  border-radius: var(--wp--custom--radius--pill);
  color: var(--wp--preset--color--bleu);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.peep-partenaire__corps > .peep-partenaire__bouton:hover,
.peep-partenaire__corps > .peep-partenaire__bouton:focus-visible {
  background: var(--wp--preset--color--bleu);
  color: var(--wp--preset--color--blanc);
}

.peep-partenaire__bouton svg {
  width: 16px;
  height: 16px;
}

/* --- Bas de page : deux encarts --- */
.peep-partenaires .peep-partenaires__bas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 24px;
}

.peep-partenaires .peep-partenaires__bas > * {
  margin: 0;
}

.peep-partenaires .peep-partenaires__encart {
  display: flex;
  flex-direction: column;
  padding: 34px;
  border-radius: var(--wp--custom--home--carte);
}

.peep-partenaires .peep-partenaires__encart > * {
  margin-block: 0 20px;
}

/* Boutons en bas de l'encart, alignés d'un encart à l'autre. */
.peep-partenaires .peep-partenaires__encart > .wp-block-buttons {
  margin-top: auto;
  margin-bottom: 0;
}

.peep-partenaires .peep-partenaires__encart-titre {
  margin-bottom: 16px;
  color: var(--wp--preset--color--encre);
  font-size: 24px;
  font-weight: 800;
}

.peep-partenaires .peep-partenaires__etapes {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.peep-partenaires__etapes li {
  display: flex;
  align-items: center;
  gap: 12px;
  counter-increment: etape;
}

.peep-partenaires__etapes li::before {
  content: counter(etape);
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wp--preset--color--orange);
  color: var(--wp--preset--color--encre);
  font-size: 14px;
  font-weight: 800;
}

/* Les couleurs de palette des blocs sont en !important : le survol aussi. */
.peep-partenaires .peep-partenaires__bouton-bleu .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--bleu-fonce) !important;
  color: var(--wp--preset--color--blanc) !important;
}

@media (max-width: 599px) {
  .peep-partenaires .peep-partenaires__encart {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .peep-partenaire__bouton {
    transition: none;
  }
}

/* ==========================================================================
   Accueil — « La PEEP, c'est aussi La Réunion » : encadré bleu sous la
   bannière, texte à gauche, carte de l'île aux couleurs du Lo Mahavéli (bloc
   peep/carte-reunion) à droite.
   ========================================================================== */

.peep-home .peep-ile {
  position: relative;
  display: grid;
  align-items: center;
  gap: 32px;
  overflow: hidden;
  padding: clamp(28px, 5vw, 48px);
  border-radius: var(--wp--custom--radius--large);
}

/* Cercle décoratif, comme l'encadré « 100 ans » (pseudo-élément : ignoré des lecteurs d'écran). */
.peep-ile::before {
  content: "";
  position: absolute;
  bottom: -120px;
  left: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--wp--preset--color--bleu-2);
  opacity: 0.55;
  pointer-events: none;
}

.peep-ile > * {
  position: relative; /* au-dessus du cercle */
}

@media (min-width: 900px) {
  .peep-home .peep-ile {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }
}

.peep-home .peep-ile__texte {
  display: grid;
  justify-items: start;
  gap: 16px;
}

.peep-home .peep-ile__texte > * {
  margin: 0;
}

.peep-home .peep-ile__badge {
  padding: 6px 14px;
  border-radius: var(--wp--custom--radius--pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.peep-home .peep-ile__titre {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.peep-home .peep-ile__lead {
  max-width: 34em;
  font-size: 18px;
  line-height: 1.6;
}

.peep-home .peep-ile__texte .wp-block-buttons {
  margin-top: 8px;
}

/* --- La carte --- */
.peep-carte-reunion {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.peep-carte-reunion__ile {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.peep-carte-reunion__contour {
  fill: none;
  stroke: var(--wp--preset--color--blanc);
  stroke-width: 4;
  stroke-linejoin: round;
}

.peep-carte-reunion__halo {
  fill: var(--wp--preset--color--orange);
  opacity: 0.35;
}

.peep-carte-reunion__point {
  fill: var(--wp--preset--color--orange);
  stroke: var(--wp--preset--color--blanc);
  stroke-width: 3;
}

.peep-carte-reunion__etiquette,
.peep-carte-reunion__ville {
  fill: var(--wp--preset--color--blanc);
  font-family: var(--wp--preset--font-family--myriad);
}

.peep-carte-reunion__etiquette {
  font-size: 22px;
  font-weight: 800;
}

.peep-carte-reunion__ville {
  font-size: 15px;
  font-weight: 600;
}

/* ==========================================================================
   Page « L'association » — gabarit templates/page-association.html, contenu
   créé à partir du pattern patterns/association.php. Même construction que
   « Nos partenaires » : en-tête bleu, section à filet, encarts du bas.
   ========================================================================== */

.peep-assoc {
  padding: 44px 0 72px;
}

/* Titres en Myriad, comme l'accueil et les autres pages de la rubrique. */
.peep-assoc :is(h1, h2, h3) {
  font-family: var(--wp--preset--font-family--myriad);
}

/* 52 px entre les grandes parties de la page. */
.peep-assoc__content > * {
  margin-block: 0;
}

.peep-assoc__content > * + * {
  margin-top: 52px;
}

/* --- En-tête bleu --- */
.peep-assoc .peep-assoc__entete {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  align-items: center;
  gap: 36px;
  overflow: hidden;
  padding: 48px;
  border-radius: var(--wp--custom--radius--large);
}

/* Cercle décoratif (pseudo-élément : ignoré des lecteurs d'écran). */
.peep-assoc__entete::before {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--wp--preset--color--bleu-2);
  opacity: 0.55;
  pointer-events: none;
}

.peep-assoc__entete > * {
  position: relative; /* au-dessus du cercle */
  margin: 0;
}

.peep-assoc .peep-assoc__intro > *,
.peep-assoc .peep-assoc__bref > * {
  margin-block: 0;
}

.peep-assoc .peep-assoc__badge {
  width: fit-content;
  padding: 6px 14px;
  border-radius: var(--wp--custom--radius--pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.peep-assoc .peep-assoc__h1 {
  margin: 18px 0 16px;
  color: var(--wp--preset--color--blanc);
  font-size: 50px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.03;
}

.peep-assoc .peep-assoc__lead {
  max-width: 34em;
  font-size: 19px;
  line-height: 1.55;
}

/* « En bref » : même présentation que « En un clin d'œil » des partenaires. */
.peep-assoc .peep-assoc__bref {
  display: grid;
  gap: 10px;
}

.peep-assoc .peep-assoc__bref-libelle {
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.peep-assoc .peep-assoc__chiffre {
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--wp--custom--radius--encadre);
  background: rgb(255 255 255 / 0.14);
}

.peep-assoc .peep-assoc__chiffre > * {
  margin: 0;
}

.peep-assoc .peep-assoc__chiffre-valeur {
  flex-shrink: 0;
  min-width: 4.2em;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.peep-assoc .peep-assoc__chiffre-texte {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 899px) {
  .peep-assoc .peep-assoc__entete {
    padding: 28px;
  }

  .peep-assoc .peep-assoc__h1 {
    font-size: 34px;
  }
}

/* --- Découvrir l'association : trois cartes cliquables --- */
.peep-assoc .peep-assoc__titre {
  margin: 0 0 24px;
  font-size: clamp(24px, 3vw, 30px);
}

.peep-assoc .peep-assoc__cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}

.peep-assoc .peep-assoc__cartes > * {
  margin: 0;
}

/* Carte : toute la surface mène à la page (lien du titre étiré). */
.peep-assoc .peep-assoc__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px;
  border: 1px solid rgb(0 58 100 / 0.12);
  border-radius: var(--wp--custom--radius--large);
  background: var(--wp--preset--color--blanc);
  transition: border-color 0.2s;
}

.peep-assoc .peep-assoc__carte > * {
  margin: 0;
}

.peep-assoc .peep-assoc__carte:hover,
.peep-assoc .peep-assoc__carte:focus-within {
  border-color: var(--wp--preset--color--bleu);
}

/* « Découvrir » en bas de chaque carte (décoratif : le lien est le titre). */
.peep-assoc .peep-assoc__carte::after {
  content: "Découvrir \2192";
  margin-top: auto;
  padding-top: 8px;
  color: var(--wp--preset--color--bleu);
  font-size: 15px;
  font-weight: 700;
}

.peep-assoc .peep-assoc__etiquette {
  padding: 5px 12px;
  border-radius: var(--wp--custom--radius--pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.peep-assoc .peep-assoc__carte-titre {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.peep-assoc .peep-assoc__carte-titre a {
  color: var(--wp--preset--color--encre);
  text-decoration: none;
}

.peep-assoc .peep-assoc__carte-titre a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.peep-assoc .peep-assoc__carte-titre a:hover {
  color: var(--wp--preset--color--bleu);
}

.peep-assoc .peep-assoc__carte-titre a:focus-visible {
  outline: none;
}

.peep-assoc .peep-assoc__carte-titre a:focus-visible::after {
  outline: 3px solid var(--wp--preset--color--orange);
  outline-offset: 2px;
}

.peep-assoc .peep-assoc__carte-texte {
  color: #5b6673;
  font-size: 16px;
  line-height: 1.6;
}

/* --- Bas de page : deux encarts (comme « Nos partenaires ») --- */
.peep-assoc .peep-assoc__bas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 24px;
}

.peep-assoc .peep-assoc__bas > * {
  margin: 0;
}

.peep-assoc .peep-assoc__encart {
  display: flex;
  flex-direction: column;
  padding: 34px;
  border-radius: var(--wp--custom--home--carte);
}

.peep-assoc .peep-assoc__encart > * {
  margin-block: 0 20px;
}

/* Boutons en bas de l'encart, alignés d'un encart à l'autre. */
.peep-assoc .peep-assoc__encart > .wp-block-buttons {
  margin-top: auto;
  margin-bottom: 0;
}

.peep-assoc .peep-assoc__encart-titre {
  margin-bottom: 16px;
  color: var(--wp--preset--color--encre);
  font-size: 24px;
  font-weight: 800;
}

/* Les couleurs de palette des blocs sont en !important : le survol aussi. */
.peep-assoc .peep-assoc__bouton-bleu .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--bleu-fonce) !important;
  color: var(--wp--preset--color--blanc) !important;
}

@media (max-width: 599px) {
  .peep-assoc .peep-assoc__encart {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .peep-assoc .peep-assoc__carte {
    transition: none;
  }
}