/* ==========================================================================
   RP237 — pages intérieures, événements et contenu éditorial.
   --------------------------------------------------------------------------
   rp237.css reste la maquette telle quelle. Ce fichier n'ajoute que ce que la
   maquette ne couvrait pas : les pages autres que l'accueil. Mêmes jetons,
   même logique mobile first.
   ========================================================================== */

/* --- Hero : lockup Tapis Rouge × Expérience Parle -------------------------- */
.hero-logos{
  display:inline-flex;align-items:center;gap:14px;
  background:#fff;padding:10px 18px;border-radius:14px;
  margin-bottom:18px;box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.hero-logo{height:34px;width:auto}
.hero-logos-x{color:var(--muted);font-weight:700;font-size:.9375rem}
.hero-tapis{
  display:inline-block;margin-top:2px;
  color:var(--yellow);
  /* Hérite exactement du h1 parent (taille, interligne, graisse, crénage) :
     « TAPIS ROUGE » doit peser aussi lourd à l'écran que « PARLE », pas
     seulement porter la même étiquette sémantique. */
  font-size:inherit;line-height:inherit;font-weight:inherit;letter-spacing:inherit;
}
/* Le × forme sa propre ligne, au-dessus de « TAPIS ROUGE » : un repère
   discret plutôt qu'un troisième mot de la même taille. */
.hero-tapis-x{
  display:block;margin-top:18px;
  color:var(--yellow);opacity:.7;font-weight:600;
  font-size:clamp(1.25rem,3vw,1.75rem);letter-spacing:0;line-height:1;
}

@media (min-width:900px){
  .hero-logos{padding:12px 22px;margin-bottom:24px}
  .hero-logo{height:44px}
}

/* ==========================================================================
   PASTILLE EARLY BIRD — flottante, au-dessus du contenu
   N'existe dans le DOM que pendant la fenêtre Early Bird (voir footer.php) :
   pas besoin de la masquer ensuite, elle n'est simplement jamais rendue.
   ========================================================================== */
.float-badge{
  position:fixed;z-index:68;
  top:calc(var(--header-h) + 14px);
  right:var(--safe-r);
  width:min(230px,calc(100vw - 2 * var(--safe-r)));
  background:var(--red);color:#fff;
  border-radius:16px;
  padding:14px 34px 14px 16px;
  box-shadow:0 16px 36px rgba(0,0,0,.28);
  animation:floatBadgeIn .5s cubic-bezier(.2,.8,.2,1) both;
}
/* Anneau qui s'étend puis s'efface : attire l'œil sans gêner la lecture. */
.float-badge:before{
  content:"";position:absolute;inset:0;border-radius:16px;
  border:1.5px solid var(--red);
  animation:floatBadgePing 2.6s ease-out 1s infinite;
  pointer-events:none;
}
.float-badge-close{
  position:absolute;right:6px;top:6px;
  width:26px;height:26px;display:grid;place-items:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;
  font-size:1rem;line-height:1;
}
.float-badge-body{cursor:pointer}
.float-badge-tag{
  display:inline-block;margin-bottom:8px;padding:3px 10px;
  border-radius:999px;background:var(--yellow);color:#101010;
  font-family:var(--font-display);font-size:.625rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
}
.float-badge-text{margin:0;font-size:.8125rem;font-weight:700;line-height:1.45}
.float-badge-window{margin:6px 0 0;font-size:.6875rem;color:rgba(255,255,255,.82)}
.float-badge-cta{
  margin:10px 0 0;font-family:var(--font-display);
  font-size:.75rem;font-weight:800;color:var(--yellow);
}

@keyframes floatBadgeIn{
  from{opacity:0;transform:translateY(-18px) scale(.92)}
  to{opacity:1;transform:none}
}
@keyframes floatBadgePing{
  0%{opacity:.55;transform:scale(1)}
  100%{opacity:0;transform:scale(1.09)}
}

@media (hover:hover){
  .float-badge-close:hover{background:rgba(255,255,255,.3)}
}

/* --- Message d'erreur du formulaire --------------------------------------- */
.form-error{
  grid-column:1/-1;
  margin:0;padding:12px 14px;
  border-radius:10px;
  background:rgba(213,0,59,.08);
  color:var(--red-dark);
  font-size:.9375rem;line-height:1.5;
}

/* --- Bandeau de titre des pages intérieures -------------------------------- */
.page-head{
  padding:calc(var(--header-h) + 40px) 0 44px;
  color:#fff;
}
.page-head--teal{background:var(--teal-deep)}
.page-head--red{background:var(--red-dark)}
.page-head .eyebrow{color:var(--yellow);margin:0 0 12px}
.page-head h1{
  margin:0;
  font-size:clamp(1.9rem,1.3rem + 2.6vw,3.25rem);
  line-height:1.08;letter-spacing:-.02em;font-weight:800;
}
.page-head-intro{
  margin:18px 0 0;max-width:var(--measure);
  font-size:var(--fs-lead);color:rgba(255,255,255,.88);
}

@media (min-width:900px){
  .page-head{padding:calc(var(--header-h) + 64px) 0 64px}
}

/* --- Contenu éditorial ----------------------------------------------------- */
.entry{padding:48px 0 64px}
/*
 * max-width borne la prose (texte tapé dans l'éditeur), pas les sections
 * RP237 insérées dans le même contenu : celles-ci restent pleine largeur,
 * avec leur propre .container interne, comme sur la page d'accueil.
 */
.entry-content{max-width:none}
.entry-content > * + *{margin-top:1.1em}
.entry-content > p,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote{max-width:var(--measure)}
.entry-content h2{
  margin-top:2em;font-size:clamp(1.4rem,1.2rem + .9vw,2rem);
  line-height:1.2;letter-spacing:-.01em;
}
.entry-content h3{margin-top:1.6em;font-size:1.25rem;line-height:1.3}
.entry-content a{color:var(--teal);text-decoration:underline;text-underline-offset:.18em}
.entry-content a:hover{color:var(--teal-dark)}
.entry-content ul,.entry-content ol{padding-left:1.25em}
.entry-content li + li{margin-top:.4em}
.entry-content blockquote{
  margin-left:0;padding:4px 0 4px 20px;
  border-left:3px solid var(--yellow);
  font-family:var(--font-serif);font-size:var(--fs-lead);
}
.entry-content img{border-radius:12px}
.entry-media{margin:0 0 32px}
.entry-media img{width:100%;border-radius:16px}
.entry-terms{margin-top:40px;color:var(--muted);font-size:.9375rem}
.entry-back{margin-top:12px}
.entry-back a{color:var(--teal);font-weight:600}

@media (min-width:900px){
  .entry{padding:64px 0 88px}
}

/* --- Listes de cartes (blog, archives, recherche) --------------------------- */
.card-list{display:grid;gap:20px}
.card-item{
  border:1px solid var(--line);border-radius:16px;
  background:var(--white);overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.card-item-link{display:block;height:100%}
.card-item-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card-item-body{padding:20px}
.card-item-body .eyebrow{color:var(--teal);margin:0 0 8px}
.card-item-body h3{margin:0 0 8px;font-size:1.125rem;line-height:1.25}
.card-item-body p{margin:0;color:var(--muted);font-size:.9375rem;line-height:1.6}
.card-item:hover{border-color:var(--teal);box-shadow:0 10px 30px rgba(0,0,0,.07)}

@media (min-width:600px){ .card-list{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .card-list{grid-template-columns:repeat(3,1fr);gap:24px} }

/* --- Sections d'événements -------------------------------------------------- */
.events-section{padding:48px 0}
.events-section--past{background:var(--mist)}
.events-empty{
  margin:0;padding:28px;border:1px dashed var(--line);border-radius:14px;
  color:var(--muted-on-mist);text-align:center;
}

@media (min-width:900px){
  .events-section{padding:72px 0}
}

.event-list{display:grid;gap:20px}
@media (min-width:700px){ .event-list{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .event-list{grid-template-columns:repeat(3,1fr);gap:24px} }

.event-card{
  border:1px solid var(--line);border-radius:18px;
  background:var(--white);overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.event-card:hover{border-color:var(--teal);box-shadow:0 14px 34px rgba(0,0,0,.09);transform:translateY(-2px)}
.event-card-link{display:flex;flex-direction:column;height:100%}
.event-card-media{position:relative;background:var(--mist)}
.event-card-media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.event-badge{
  position:absolute;top:12px;left:12px;
  padding:6px 12px;border-radius:999px;
  background:var(--yellow);color:#101010;
  font-family:var(--font-display);font-size:.6875rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.event-card-body{display:flex;flex-direction:column;flex:1;padding:22px}
.event-card-date{color:var(--teal);margin:0 0 10px}
.event-card--next .event-card-date{color:var(--red)}
.event-card-body h3{margin:0 0 8px;font-size:1.1875rem;line-height:1.25}
.event-card-place{margin:0 0 12px;color:var(--muted);font-size:.875rem}
.event-card-text{margin:0 0 18px;color:var(--muted);font-size:.9375rem;line-height:1.65}
.event-card-more{
  margin-top:auto;color:var(--teal);font-weight:700;
  font-family:var(--font-display);font-size:.875rem;
}

/* --- En-tête d'un événement -------------------------------------------------- */
.event-hero{
  padding:calc(var(--header-h) + 40px) 0 48px;
  background:var(--teal-deep);color:#fff;
}
.event-hero--past{background:var(--black)}
.event-hero .eyebrow{color:var(--yellow);margin:0 0 12px}
.event-hero h1{
  margin:0;font-size:clamp(1.9rem,1.3rem + 2.6vw,3.25rem);
  line-height:1.08;letter-spacing:-.02em;font-weight:800;
}
.event-hero-intro{
  margin:18px 0 0;max-width:var(--measure);
  font-size:var(--fs-lead);color:rgba(255,255,255,.88);
}

.event-facts{
  display:grid;gap:16px;margin:32px 0 0;
  padding:22px;border-radius:16px;
  background:rgba(255,255,255,.08);
}
.event-fact dt{
  margin:0 0 4px;font-family:var(--font-display);
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yellow);
}
.event-fact dd{margin:0;font-weight:600}
.event-hero-actions{margin-top:28px}

@media (min-width:600px){ .event-facts{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){
  .event-hero{padding:calc(var(--header-h) + 64px) 0 64px}
  .event-facts{grid-template-columns:repeat(4,1fr)}
}

/* --- Pagination --------------------------------------------------------------
   paginate_links( type => list ) produit un <ul class="page-numbers">.
   the_posts_pagination() est volontairement évité : son conteneur .nav-links
   entre en collision avec la navigation de l'en-tête, masquée sous 1000px.
   ---------------------------------------------------------------------------- */
ul.page-numbers{
  display:flex;flex-wrap:wrap;gap:8px;
  list-style:none;margin:40px 0 0;padding:0;justify-content:center;
}
ul.page-numbers .page-numbers{
  display:grid;place-items:center;
  min-width:44px;min-height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:10px;
  font-family:var(--font-display);font-weight:600;
}
ul.page-numbers .current{background:var(--teal);border-color:var(--teal);color:#fff}
ul.page-numbers a:hover{border-color:var(--teal);color:var(--teal)}
ul.page-numbers .dots{border-color:transparent}

/* --- Formulaire de recherche -------------------------------------------------- */
.search-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.search-form label{flex:1 1 240px}
.search-form .search-field{
  width:100%;min-height:48px;padding:0 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--white);
}
.search-form .search-submit{
  min-height:48px;padding:0 20px;border:0;border-radius:10px;
  background:var(--teal);color:#fff;font-family:var(--font-display);font-weight:700;
}

/* --- Pagination interne d'un article ------------------------------------------- */
.page-links{
  display:flex;gap:8px;margin-top:32px;
  font-family:var(--font-display);font-weight:600;
}

/* ==========================================================================
   PICTOGRAMMES DU BANDEAU D'ÉVÉNEMENT
   --------------------------------------------------------------------------
   Remplacent les caractères 🎤 ▣ ⌖ de la maquette. Un emoji est rendu par la
   police de la plateforme : taille, graisse et couleur échappent à la feuille
   de style, et le dessin change d'un appareil à l'autre. Ces SVG héritent au
   contraire de currentColor et se dimensionnent en em, donc ils suivent le
   texte qu'ils accompagnent.

   La règle .event-icon de rp237.css visait un caractère (font-size) ; elle est
   redéfinie ici pour un élément graphique (width/height). rp237.css reste ainsi
   l'extraction littérale de la maquette.
   ========================================================================== */

/* Le titre peut passer à la ligne : l'icône reste alignée sur la première,
   d'où un alignement vertical plutôt qu'un conteneur flex. */
.event-title-icon{
  display:inline-block;vertical-align:-.26em;
  width:1.3em;height:1.3em;
  margin-right:9px;
  opacity:.92;
}

.event-icon{
  display:block;                 /* .event-detail est en inline-flex */
  width:1.15em;height:1.15em;
  flex-shrink:0;
  opacity:.9;
}

/* Sur les écrans plus larges, le bandeau respire : l'icône du titre gagne
   un peu de présence avec lui. */
@media (min-width:900px){
  .event-title-icon{width:1.35em;height:1.35em;margin-right:10px}
}

/* --- Bouton de mode d'affichage ------------------------------------------
   Le bouton n'est pas rendu tant qu'aucun thème sombre n'existe (voir le
   filtre rp237_afficher_bascule_theme dans header.php). Ces règles l'attendent :
   .theme de rp237.css dimensionnait un caractère (font-size:1.125rem), or le
   pictogramme est un SVG, dont la taille doit être donnée explicitement.
   ------------------------------------------------------------------------- */
.theme-icon{
  width:20px;height:20px;
  color:var(--ink);
}
.theme:hover .theme-icon{color:var(--teal)}