/* ============================================
   GDEAM-62 — Adaptations WordPress
   Classes générées par WP qui n'existent pas
   dans les maquettes statiques.
   ============================================ */

/* ============================================
   Échelle des points de rupture (règle 12)
   Quatre valeurs, et quatre seulement :
     480 px  — mobile étroit  (grilles à une colonne, boutons repliables)
     800 px  — mobile / tablette portrait  (grilles à deux colonnes, sections resserrées)
    1000 px  — tablette / bureau  (bascule du menu, colonnes latérales sous le contenu)
    1200 px  — confort bureau  (resserrement de la navigation principale)
   Seule exception : 782 px dans wordpress.css, valeur imposée par la barre
   d'administration de WordPress — elle ne nous appartient pas.
   Les largeurs de recette (375 / 768 / 1280 px) tombent chacune dans un palier distinct.
   ============================================ */

/* ---------- Barre d'admin ---------- */
/* 782 px : seuil imposé par WordPress lui-même (la barre passe de 32 à 46 px de haut).
   Hors échelle par nécessité — ne pas l'aligner sur nos paliers. */
.admin-bar .site-header.is-sticky { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header.is-sticky { top: 46px; }
}

/* ---------- Alignements du contenu ---------- */
.content-prose .alignleft  { float: left;  margin: 0 var(--space-md) var(--space-sm) 0; }
.content-prose .alignright { float: right; margin: 0 0 var(--space-sm) var(--space-md); }
.content-prose .aligncenter { margin-left: auto; margin-right: auto; }
.content-prose .alignwide,
.content-prose .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.content-prose > *:not(.alignwide):not(.alignfull) { max-width: 100%; }

/* ---------- Images / légendes ---------- */
.wp-caption { max-width: 100%; margin-bottom: var(--space-md); }
.wp-caption-text,
figcaption {
  font-size: 0.85rem;
  color: var(--color-muted);
  text-align: center;
  margin-top: var(--space-xs);
}
.wp-post-image, .content-prose img { border-radius: var(--radius); height: auto; }

/* ---------- Accessibilité ---------- */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px; width: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  position: absolute !important;
  white-space: nowrap;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto; width: auto;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
  z-index: 100000;
  border-radius: var(--radius-sm);
}

/* ---------- Menu mobile (JS du thème) ---------- */
.nav-toggle { display: none; }
@media (max-width: 1000px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    /* Règle 12 : 44 px pleins, sans dépendre de l'interlignage de la police. */
    min-height: 44px;
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-weight: 600;
  }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: var(--space-sm);
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav li { width: 100%; }
  .main-nav a { display: block; padding: var(--space-xs) var(--space-sm); }
  .site-header .header-inner { position: relative; flex-wrap: wrap; }
}

/* ---------- Pagination WordPress ---------- */
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px; height: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
}
.pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.pagination .page-numbers:hover:not(.current) { border-color: var(--color-primary); text-decoration: none; }

/* ---------- États vides ---------- */
.empty-state {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: var(--color-muted);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}

/* ---------- Pied de page : équivalents des styles inline de la maquette ---------- */
.site-footer .logo { margin-bottom: var(--space-sm); }
.site-footer .logo-text { color: #fff; }
.site-footer .logo-text small { color: rgba(244, 239, 215, 0.7); }
.footer-about {
  color: rgba(244, 239, 215, 0.75);
  font-size: 0.9rem;
}
.footer-legal ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: 0;
  margin: 0;
}
.footer-legal li + li::before {
  content: "·";
  margin-right: var(--space-xs);
  color: rgba(244, 239, 215, 0.4);
}
.footer-legal a { color: rgba(244, 239, 215, 0.7); font-size: 0.85rem; }
.footer-legal a:hover { color: #fff; }

/* ---------- Accueil : équivalents des styles inline de la maquette ---------- */
.section-intro {
  text-align: center;
  color: var(--color-text-soft);
  max-width: 60ch;
  margin: 0 auto var(--space-lg);
}
.block-card--join {
  background: linear-gradient(135deg, var(--color-bg-soft), var(--color-bg));
  text-align: center;
}
.block-card--join p { color: var(--color-text-soft); }
.join-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

/* ---------- Agenda / actualités : titres cliquables ---------- */
.agenda-content h4 a,
.fb-feed h4 a { color: inherit; }
.agenda-content h4 a:hover,
.fb-feed h4 a:hover { color: var(--color-primary); text-decoration: none; }
.fb-feed h4 { margin: 0 0 var(--space-xs); font-size: 1.05rem; }

/* ---------- Navigation entre articles ---------- */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin: var(--space-lg) 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-weight: 600;
}
.post-nav .post-nav-next { margin-left: auto; text-align: right; }

/* ---------- Commentaires ---------- */
.comments-area {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.comments-title { margin-bottom: var(--space-md); }
.comment-list, .comment-list .children { list-style: none; padding: 0; margin: 0; }
.comment-list .children { margin-left: var(--space-md); padding-left: var(--space-md); border-left: 2px solid var(--color-border); }
.comment-list li.comment, .comment-list li.pingback { margin-bottom: var(--space-md); }
.comment-body {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.comment-author { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-heading); font-weight: 600; }
.comment-author img { border-radius: 50%; }
.comment-author .says { display: none; }
.comment-metadata {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 4px 0 var(--space-xs);
}
.comment-metadata a { color: inherit; }
.comment-awaiting-moderation { color: var(--color-accent-orange); font-size: 0.9rem; }
.comment-reply-link, .comment-edit-link { font-size: 0.85rem; font-weight: 600; }
.bypostauthor > .comment-body { border-left: 3px solid var(--color-primary); }
.no-comments { color: var(--color-muted); font-style: italic; }

/* Formulaire de commentaire */
.comment-respond { margin-top: var(--space-lg); }
.comment-reply-title { font-size: 1.4rem; margin-bottom: var(--space-xs); }
.comment-notes, .comment-form-cookies-consent label { font-size: 0.9rem; color: var(--color-muted); }
.comment-form p { margin-bottom: var(--space-sm); }
.comment-form label { display: block; font-family: var(--font-heading); font-weight: 600; margin-bottom: 4px; font-size: 0.9rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  font: inherit;
  padding: 10px var(--space-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text);
}
.comment-form input:focus, .comment-form textarea:focus {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: var(--space-xs); }
.comment-form-cookies-consent input { margin-top: 4px; }
.comment-form-cookies-consent label { font-weight: 400; margin: 0; }
.form-submit { margin-bottom: 0; }

/* ---------- Gabarit « Page avec sommaire latéral » ---------- */
.kicker--yellow { color: var(--color-accent-yellow); }
.layout-sidebar .content-prose > h2:first-child { margin-top: 0; }
.sidebar-extra { margin-top: var(--space-md); }
.sidebar-extra .sidebar-card:last-child { margin-bottom: 0; }
.sidebar-extra .sidebar-card ul { list-style: none; margin: 0; padding: 0; }
.sidebar-extra .sidebar-card li { margin-bottom: var(--space-xs); }
/* Ancrages : compenser l'en-tête collant lors d'un saut vers une section. */
.content-prose [id] { scroll-margin-top: calc(var(--header-height) + var(--space-md)); }

/* ---------- Grilles réutilisables dans le contenu (tarifs, publications) ---------- */
.price-grid,
.product-grid {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}
.price-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.product-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.price-card {
  text-align: center;
  padding: var(--space-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.price-card--featured { border-color: var(--color-accent-orange); border-width: 2px; }
.price-card h3 { margin: 0 0 4px; font-size: 1.15rem; }
.price-card .price {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-accent-orange);
  margin: var(--space-xs) 0;
}
.price-card .price-period { font-size: 0.9rem; color: var(--color-muted); margin: 0; }
.product-card {
  padding: var(--space-sm);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.product-cover {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}
.product-cover.var-2 { background: linear-gradient(135deg, var(--color-accent-yellow), var(--color-accent-orange)); }
.product-cover.var-3 { background: linear-gradient(135deg, var(--color-accent-blue), var(--color-primary-dark)); }
.product-card h4 { font-size: 0.95rem; margin-bottom: 4px; }
.product-card p { margin: 0; font-size: 0.85rem; color: var(--color-muted); }
.info-box--primary { border-left-color: var(--color-primary-light); }
.info-box--primary h4 { color: var(--color-primary-dark); }

/* ---------- Programme : compléments WordPress ---------- */
a.filter-pill { text-decoration: none; }
a.filter-pill:hover { text-decoration: none; }
.programme-filters-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
  align-self: center;
  margin-right: var(--space-xs);
}
.event-body h3 a { color: inherit; }
.event-body h3 a:hover { color: var(--color-primary); text-decoration: none; }
.swatch--sortie { background: var(--color-primary-light); }
.swatch--anim   { background: var(--color-accent-yellow); }
.swatch--conf   { background: var(--color-accent-blue); }
.swatch--ag     { background: var(--color-accent-orange); }
.sidebar-card-note { margin: var(--space-sm) 0 var(--space-xs); font-size: 0.85rem; }
.sidebar-card--highlight {
  background: linear-gradient(135deg, var(--color-bg-soft), var(--color-bg));
  border-color: var(--color-accent-yellow);
}
.programme-switch { margin-top: var(--space-lg); }
.btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Bibliothèque des études ---------- */
.etudes-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.etudes-toolbar .filter-group { margin-bottom: 0; }
.filter-group-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  align-self: center;
  margin-right: var(--space-xs);
}
.results-summary select {
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: inherit;
  background: var(--color-bg-alt);
  color: var(--color-text);
}
.table-scroll { overflow-x: auto; }
.archive-table .doc-title a { color: var(--color-primary-dark); }
.archive-table .doc-title a:hover { color: var(--color-primary); }
.archive-table .col-pdf { text-align: right; white-space: nowrap; }
.pdf-size { display: block; font-size: 0.75rem; color: var(--color-muted); margin-top: 2px; }

/* ---------- Fiches événement et étude ---------- */
.event-notice {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-bg-soft);
  color: var(--color-accent-orange);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
}
.event-facts { margin: 0 0 var(--space-sm); }
.event-facts dt {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-top: var(--space-xs);
}
.event-facts dd { margin: 0; font-size: 0.95rem; color: var(--color-text); }
.event-summary { border-left: 4px solid var(--color-primary-light); }
.event-summary.event--anim { border-left-color: var(--color-accent-yellow); }
.event-summary.event--conf { border-left-color: var(--color-accent-blue); }
.event-summary.event--ag   { border-left-color: var(--color-accent-orange); }
.section-lead { color: var(--color-text-soft); max-width: 60ch; }
.results-sort { display: inline-flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }

/* ---------- Vie associative (blog) ---------- */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-lg);
  align-items: start;
}
@media (max-width: 1000px) {
  .blog-layout { grid-template-columns: 1fr; }
}
/* Sur deux colonnes, la grille de cartes doit pouvoir descendre sous 320px. */
.blog-layout .posts-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.block-header-note { margin: 4px 0 0; color: var(--color-text-soft); }
.block-footer-cta { text-align: center; margin-top: var(--space-md); }
.btn-feature { background: var(--color-accent-yellow); color: var(--color-primary-dark); }
.btn-feature:hover { background: var(--color-accent-orange); color: var(--color-primary-dark); }
.subscribe-text { color: var(--color-text-soft); max-width: 50ch; margin: 0 auto; }

.blog-sidebar { position: sticky; top: var(--space-md); }
.blog-sidebar .sidebar-card { margin-bottom: var(--space-md); }
.blog-sidebar .sidebar-card:last-child { margin-bottom: 0; }
.blog-sidebar .search-form { background: transparent; border: none; padding: 0; margin: 0; }
@media (max-width: 1000px) { .blog-sidebar { position: static; } }

.sidebar-list { list-style: none; margin: 0; padding: 0; }
.sidebar-list li { margin: 0; }
.sidebar-list a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
  align-items: baseline;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.95rem;
}
.sidebar-list a:hover { background: var(--color-bg-soft); text-decoration: none; }
.sidebar-list a.active {
  background: var(--color-primary-dark);
  color: white;
  font-weight: 600;
}
.sidebar-count { color: var(--color-muted); font-size: 0.8rem; }
.sidebar-list a.active .sidebar-count { color: rgba(255, 255, 255, 0.75); }

/* ---------- Formulaire de recherche WordPress ---------- */
.search-form {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.search-form .search-field {
  flex: 1;
  min-width: 0;
  padding: var(--space-xs) 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
}
.search-form .search-field:focus { outline: 2px solid var(--color-primary-light); border-radius: var(--radius-sm); }

/* ---------- Programmes en cours (page Études) ---------- */
.volets-grid--programmes { margin-top: var(--space-md); }
/* Carte sans lien : informative, elle ne doit pas réagir comme un bouton. */
.volet-card--static { cursor: default; }
.volet-card--static:hover { transform: none; box-shadow: none; }
.search-scope {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  align-items: baseline;
  margin: calc(-1 * var(--space-xs)) 0 var(--space-md);
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

/* ---------- Cibles tactiles (règle 12) ----------
   La maquette dessine des commandes compactes : 36 px pour une pastille de filtre,
   42 px pour un bouton « sm ». C'est confortable à la souris, trop juste au doigt.
   On élargit donc là où le doigt est le pointeur — écran tactile quelle que soit sa
   largeur, ou fenêtre étroite — et on laisse le rendu bureau strictement conforme
   à la maquette (règle 4). Seuil : 44 × 44 px (WCAG 2.5.5).
   Les liens en pleine ligne de texte relèvent de l'exception « lien dans un
   paragraphe » de WCAG 2.5.8 : ils ne sont pas agrandis. */
@media (pointer: coarse), (max-width: 1000px) {
  .filter-pill {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .btn-sm,
  .btn-pdf {
    min-height: 44px;
    justify-content: center;
  }

  .pagination a,
  .pagination span,
  .pagination .page-numbers {
    min-width: 44px;
    min-height: 44px;
    height: auto;
  }

  /* Menu déplié : chaque entrée occupe toute la largeur et 44 px de haut. */
  .main-nav a,
  .footer-nav a,
  .site-footer nav li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Les étiquettes de taxonomie vivent dans une cellule de tableau : les porter à
   44 px doublerait la hauteur des lignes. On vise le seuil AA (24 px, WCAG 2.5.8),
   atteint par le seul rembourrage vertical. */
.tag {
  min-height: 24px;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ---------- Conteneur de tableau défilant ----------
   Un conteneur qui défile doit être atteignable au clavier, sinon son contenu
   débordant est inaccessible à qui n'a pas de souris. Le motif est : tabindex="0"
   + role="region" + aria-label (posés dans les gabarits), et un focus visible ici.
   Pas de JavaScript : la règle 5 tient. */
.table-scroll:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- Mouvement réduit ----------
   Les transitions du thème sont décoratives : personne ne perd d'information si
   elles disparaissent. On les coupe pour qui a demandé moins de mouvement, sans
   les supprimer tout à fait (0.01 ms) pour ne pas casser les fins de transition
   auxquelles un navigateur pourrait s'attendre. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Les cartes se soulèvent au survol : sans transition, le saut est brutal. */
  .volet-card:hover,
  .card:hover,
  .theme-feature:hover {
    transform: none;
  }
}

/* ---------- Très petits écrans (320 px) — règle 12 ----------
   Mesuré le 2026-08-27 : trois débordements apparaissaient sous 375 px. Ils ne
   venaient pas d'un oubli mais de trois habitudes de la maquette, écrite pour des
   écrans plus larges. Correctifs ici, pour ne pas retoucher `theme.css` (règle 4). */

/* 1. Une piste `minmax(320px, 1fr)` ne sait pas descendre sous 320 px : à 320 px de
      fenêtre, moins les marges du conteneur, la grille dépasse forcément. `min()`
      autorise la piste à se réduire à la largeur disponible. */
.posts-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.volets-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.blog-layout .posts-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.price-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.product-grid { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }

@media (max-width: 480px) {
  /* 2. `white-space: nowrap` sur un bouton : « Consulter tous les numéros antérieurs »
        mesure 324 px et pousse la page entière. Sous 480 px, un bouton a le droit
        de passer à la ligne. */
  .btn {
    white-space: normal;
    text-align: center;
  }

  /* 3. 40 px de rembourrage de chaque côté sur une carte de 272 px : il ne reste
        presque rien pour le texte, et le contenu le plus court déborde. */
  .block-card,
  .sidebar-card {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* Un titre long sans espace (nom composé, adresse) ne doit pas percer la carte. */
  .post-card h3,
  .post-excerpt,
  .content-prose {
    overflow-wrap: break-word;
  }
}