/*
Theme Name: Récréation dansée by Devalia
Theme URI: https://recreationdansee.fr
Author: Devalia
Author URI: https://devalia.fr
Description: Thème sur-mesure pour l'association RéCréation Dansée — implémentation fidèle de la maquette du site (ateliers de danse récréative en Charente-Maritime).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: recreation-dansee-devalia
*/

body {
  margin: 0;
  background: #FFF8ED;
  font-family: Poppins, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #8C5A9E;
}

a:hover {
  color: #E8703F;
}

img {
  max-width: 100%;
}

/* Hover states — mirrors the mockup's "style-hover" pairs.
   !important is required because the base colors are set inline to match the design exactly. */
.rcd-hover-orange-to-purple:hover {
  background: #8C5A9E !important;
}

.rcd-hover-purple-to-orange:hover {
  background: #E8703F !important;
}

.rcd-hover-outline-purple:hover {
  background: #8C5A9E !important;
  color: #FFF8ED !important;
}

.rcd-hover-nav:hover {
  background: #FBE3CE !important;
  color: #8C5A9E !important;
}

.rcd-hover-footer-link:hover {
  color: #8C5A9E !important;
}

.rcd-hover-yellow-to-orange:hover {
  background: #E8703F !important;
  color: #FFF8ED !important;
}

.rcd-focus-purple:focus {
  border-color: #8C5A9E !important;
}

.rcd-hover-card:hover {
  transform: translateY(-4px);
}

/* Typography for WordPress-editor article content (blog posts). */
.rcd-entry-content {
  font-size: 17px;
  line-height: 1.8;
  color: #3A3033;
}

.rcd-entry-content > *:first-child {
  margin-top: 0;
}

.rcd-entry-content h2 {
  margin: 48px 0 18px;
  font-family: Capriola, sans-serif;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.25;
  color: #8C5A9E;
}

.rcd-entry-content h3 {
  margin: 36px 0 14px;
  font-family: Capriola, sans-serif;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.3;
  color: #8C5A9E;
}

.rcd-entry-content p {
  margin: 0 0 20px;
}

.rcd-entry-content ul,
.rcd-entry-content ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.rcd-entry-content li {
  margin-bottom: 8px;
}

.rcd-entry-content strong {
  color: #8C5A9E;
}

.rcd-entry-content a {
  color: #E8703F;
  font-weight: 600;
}

.rcd-entry-content blockquote {
  margin: 36px 0;
  padding: 26px 30px;
  background: #FBE3CE;
  border-left: 4px solid #E8703F;
  border-radius: 22px;
  font-family: Capriola, sans-serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: #8C5A9E;
}

.rcd-entry-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: Poppins, sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: #3A3033;
}

.rcd-entry-content img {
  border-radius: 24px;
  display: block;
}

.rcd-entry-content hr {
  margin: 40px 0;
  border: none;
  border-top: 1px solid #FBE3CE;
}

/* Blog index pagination (paginate_links() default markup). */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: #FBE3CE;
  color: #8C5A9E;
  font-family: Poppins, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

a.page-numbers:hover {
  background: #8C5A9E;
  color: #FFF8ED;
}

.page-numbers.current {
  background: #E8703F;
  color: #FFF8ED;
}

.page-numbers.dots {
  background: none;
}

/* "Je réserve ma place" banner button: right-aligned next to the promo text
   on wide screens, but that same flex-end reads as off-center once the grid
   stacks to a single column on phones — so it's re-centered below that point. */
.rcd-cta-align {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 680px) {
  .rcd-cta-align {
    justify-content: center;
  }
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Contact form spam trap: must stay in the DOM and submittable, but never be
   seen or focused by a human (display:none is skipped by some bots). */
.rcd-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   En-tête responsive.
   Les styles de base de l'en-tête restent inline (fidélité à la maquette) :
   on ne redéfinit ici que ce qui change sous 1200px, d'où les !important sur
   les propriétés portées par un attribut style.
   - jusqu'à 1200px (tablette) : logo + CTA sur une ligne, liens centrés dessous
   - jusqu'à 768px (mobile)    : menu burger déroulant
   --------------------------------------------------------------------------- */

/* Transparent en desktop/tablette : la nav et le CTA restent des enfants
   directs de la barre flex. Redevient un vrai bloc (le panneau) en mobile. */
.rcd-nav-wrap {
  display: contents;
}

.rcd-burger {
  display: none;
}

/* --- Tablette : les liens passent seuls sur une deuxième ligne, centrés. */
@media (max-width: 1200px) {
  .rcd-header-inner {
    justify-content: space-between !important;
  }

  .rcd-nav {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
  }
}

/* --- Mobile : logo + burger dans la barre, le reste dans le panneau. */
@media (max-width: 768px) {
  .rcd-header-inner {
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 10px 20px !important;
  }

  .rcd-logo img {
    height: 52px !important;
  }

  .rcd-burger {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .rcd-burger-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: #3A3033;
    /* Fermeture : la croix se redresse d'abord, puis les traits se réécartent. */
    transition: rotate .22s ease,
                translate .24s cubic-bezier(.34, 1.4, .64, 1) .18s,
                opacity .18s ease .18s,
                scale .22s ease .18s,
                background-color .3s ease;
  }

  /* Ouverture : les traits se rejoignent d'abord, puis pivotent en croix,
     avec un léger dépassement qui donne le côté organique. */
  .rcd-nav-open .rcd-burger-bar {
    background: #8C5A9E;
    transition: translate .24s cubic-bezier(.34, 1.4, .64, 1),
                opacity .18s ease,
                scale .22s ease,
                rotate .28s cubic-bezier(.34, 1.4, .64, 1) .2s,
                background-color .3s ease;
  }

  .rcd-nav-open .rcd-burger-bar:nth-child(1) {
    translate: 0 7px;
    rotate: 45deg;
  }

  .rcd-nav-open .rcd-burger-bar:nth-child(2) {
    opacity: 0;
    scale: .2 1;
  }

  .rcd-nav-open .rcd-burger-bar:nth-child(3) {
    translate: 0 -7px;
    rotate: -45deg;
  }

  /* Le panneau se déroule depuis le haut de la barre, coins arrondis compris.
     visibility (retardée à la fermeture) le sort du flux de clic et du focus
     clavier une fois replié. */
  .rcd-nav-wrap {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    padding: 6px 20px 22px;
    background: #FFF8ED;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 20px 44px rgba(58, 48, 51, .16);
    clip-path: inset(0 0 100% 0 round 0 0 30px 30px);
    opacity: 0;
    visibility: hidden;
    transition: clip-path .45s cubic-bezier(.22, 1, .36, 1),
                opacity .25s ease,
                visibility 0s linear .45s;
  }

  .rcd-nav-open .rcd-nav-wrap {
    clip-path: inset(0 0 0 0 round 0 0 30px 30px);
    opacity: 1;
    visibility: visible;
    transition: clip-path .55s cubic-bezier(.22, 1, .36, 1),
                opacity .25s ease,
                visibility 0s;
  }

  .rcd-nav {
    order: 0;
    flex: 0 1 auto;
    flex-direction: column;
    align-items: stretch !important;
    gap: 2px !important;
  }

  .rcd-nav a {
    padding: 13px 16px !important;
    border-radius: 16px !important;
    font-size: 15.5px !important;
  }

  .rcd-header-cta {
    display: block;
    margin-top: 12px;
    padding: 14px 18px !important;
    font-size: 15px !important;
    text-align: center;
  }

  /* Les entrées arrivent en cascade derrière le déroulé du panneau. */
  .rcd-nav a,
  .rcd-header-cta {
    opacity: 0;
    translate: 0 -8px;
    transition: opacity .3s ease, translate .35s cubic-bezier(.34, 1.4, .64, 1);
  }

  .rcd-nav-open .rcd-nav a,
  .rcd-nav-open .rcd-header-cta {
    opacity: 1;
    translate: 0;
  }

  .rcd-nav-open .rcd-nav a:nth-child(1) { transition-delay: .08s; }
  .rcd-nav-open .rcd-nav a:nth-child(2) { transition-delay: .13s; }
  .rcd-nav-open .rcd-nav a:nth-child(3) { transition-delay: .18s; }
  .rcd-nav-open .rcd-nav a:nth-child(4) { transition-delay: .23s; }
  .rcd-nav-open .rcd-nav a:nth-child(5) { transition-delay: .28s; }
  .rcd-nav-open .rcd-nav a:nth-child(6) { transition-delay: .33s; }
  .rcd-nav-open .rcd-header-cta { transition-delay: .38s; }
}

@media (prefers-reduced-motion: reduce) {
  .rcd-nav-wrap,
  .rcd-burger-bar,
  .rcd-nav a,
  .rcd-header-cta {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}