/*
Theme Name:     Salsa Roxana — Child Theme
Theme URI:      https://salsa-roxana.com
Description:    Child theme Divi 5 pour Salsa Roxana / Mas Malta. Design system "Cuba en Provence" — palette sable + ambre + vert palmier, typo Fraunces + Manrope.
Author:         Olivier David — One Day Communication
Author URI:     https://one-day.fr
Template:       Divi
Version:        1.0.0
Text Domain:    salsa-roxana-child
*/

/* =========================================================
   SOMMAIRE
   ---------------------------------------------------------
   1.  Design tokens (variables CSS)
   2.  Base (typo, fond, liens)
   3.  Boutons (sr-btn-primary / ghost / ghost2)
   4.  Sections — fonds alternés
   5.  Header & navigation
   6.  Footer
   7.  Eyebrow (label éditorial)
   8.  Hero — variantes & overrides
   9.  Cards cours (Blurb stylisé)
   10. Cards events (soirées fond sombre)
   11. Cards numérotées (pédagogie / mariage)
   12. Stats (bloc compteurs)
   13. Témoignage (quote)
   14. Galerie (uniformisation 1:1 + hover)
   15. Planning (tableau)
   16. Tarifs (pricing grid)
   17. Voyages (bloc renseignement)
   18. Mariage (bloc tarifs)
   19. Blog (liste articles)
   20. Contact (CF7 + bloc infos)
   21. FAB mobile (planning persistant)
   22. Utilitaires
   23. Responsive — overrides mobile
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS — variables CSS globales
   ========================================================= */

:root {
  /* Palette validée moodboard */
  --sr-creme:        #faf6ee;
  --sr-sable:        #f4ede0;
  --sr-or:           #b08456;
  --sr-ambre:        #c47434;
  --sr-ambre-fonce:  #9e5824;
  --sr-vert:         #3d5841;
  --sr-bordeaux:     #7a2a2a;
  --sr-encre:        #1a1614;
  --sr-gris:         #6b625a;

  /* Sémantiques */
  --sr-bg:           var(--sr-creme);
  --sr-bg-alt:       var(--sr-sable);
  --sr-text:         var(--sr-encre);
  --sr-text-muted:   var(--sr-gris);
  --sr-accent:       var(--sr-ambre);
  --sr-accent-dark:  var(--sr-ambre-fonce);
  --sr-border:       rgba(26, 22, 20, 0.08);

  /* Typo */
  --sr-serif:        'Fraunces', Georgia, 'Times New Roman', serif;
  --sr-sans:         'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Espacement */
  --sr-section-y:        96px;
  --sr-section-y-mobile: 64px;

  /* Radius — volontairement faible pour le côté éditorial */
  --sr-radius: 4px;
}


/* =========================================================
   2. BASE — overrides Divi pour appliquer le design system
   ========================================================= */

body,
body.et-db #et-boc {
  background-color: var(--sr-bg);
  color: var(--sr-text);
  font-family: var(--sr-sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tous les titres en Fraunces — Divi gère ça via le builder
   mais on cale un fallback solide si un module oublie */
h1, h2, h3, h4, h5, h6,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3,
.et_pb_module h4 {
  font-family: var(--sr-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--sr-text);
}

/* L'italique Fraunces est la signature du design — exposée en classe utilitaire */
.sr-italic,
em.sr-accent {
  font-style: italic;
  color: var(--sr-accent);
  font-weight: 300;
}

/* Liens */
a {
  color: var(--sr-accent-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--sr-ambre);
}


/* =========================================================
   3. BOUTONS — sr-btn-primary / sr-btn-ghost / sr-btn-ghost2
   ========================================================= */

/* Primaire — CTA principaux (Inscriptions, Devis bal) */
.et_pb_button.sr-btn-primary,
.et_pb_button.sr-btn-primary:hover {
  background-color: var(--sr-ambre) !important;
  border: 0 !important;
  border-radius: 2px !important;
  color: #fff !important;
  padding: 14px 28px !important;
  font-family: var(--sr-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
}
.et_pb_button.sr-btn-primary:hover {
  background-color: var(--sr-ambre-fonce) !important;
  transform: translateY(-1px);
}
.et_pb_button.sr-btn-primary::after {
  display: none !important;
}

/* Ghost — fond clair (ambre sur fond crème/sable) */
.et_pb_button.sr-btn-ghost,
.et_pb_button.sr-btn-ghost:hover {
  background: transparent !important;
  border: 1px solid var(--sr-ambre) !important;
  color: var(--sr-ambre-fonce) !important;
  border-radius: 2px !important;
  padding: 13px 27px !important;
  font-family: var(--sr-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
.et_pb_button.sr-btn-ghost:hover {
  background: var(--sr-ambre) !important;
  color: #fff !important;
}
.et_pb_button.sr-btn-ghost::after {
  display: none !important;
}

/* Ghost2 — fond sombre (blanc transparent sur hero) */
.et_pb_button.sr-btn-ghost2,
.et_pb_button.sr-btn-ghost2:hover {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
  border-radius: 2px !important;
  padding: 13px 27px !important;
  font-family: var(--sr-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
.et_pb_button.sr-btn-ghost2:hover {
  background: #fff !important;
  color: var(--sr-encre) !important;
}
.et_pb_button.sr-btn-ghost2::after {
  display: none !important;
}


/* =========================================================
   4. SECTIONS — fonds alternés
   ========================================================= */

.et_pb_section.sr-bg-creme { background-color: var(--sr-creme); }
.et_pb_section.sr-bg-sable { background-color: var(--sr-sable); }

.et_pb_section.sr-bg-encre,
.et_pb_section.sr-bg-encre h1,
.et_pb_section.sr-bg-encre h2,
.et_pb_section.sr-bg-encre h3,
.et_pb_section.sr-bg-encre p {
  color: var(--sr-creme);
}
.et_pb_section.sr-bg-encre {
  background-color: var(--sr-encre);
}


/* =========================================================
   5. HEADER & NAVIGATION
   ========================================================= */

#main-header,
.et-db #et-boc .et-l--header .et_pb_section {
  box-shadow: 0 1px 0 var(--sr-border);
}

/* CTA "Planning" persistant dans le menu */
.sr-cta-planning {
  background: var(--sr-ambre) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: 2px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: background 0.3s ease;
}
.sr-cta-planning:hover {
  background: var(--sr-ambre-fonce) !important;
  color: #fff !important;
}

/* Item de menu "Planning" (variante via classe sur l'item de menu) */
.cta-nav a {
  background: var(--sr-ambre);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 2px;
  font-size: 12px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600 !important;
}
.cta-nav a:hover {
  background: var(--sr-ambre-fonce) !important;
}


/* =========================================================
   6. FOOTER
   ========================================================= */

#main-footer,
.et-l--footer {
  background-color: var(--sr-encre);
  color: rgba(244, 237, 224, 0.7);
}
.et-l--footer h1,
.et-l--footer h2,
.et-l--footer h3,
.et-l--footer h4 {
  color: var(--sr-creme);
}
.et-l--footer a {
  color: rgba(244, 237, 224, 0.85);
}
.et-l--footer a:hover {
  color: #e8a868;
}


/* =========================================================
   7. EYEBROW — petit label éditorial au-dessus des H2
   À appliquer sur un module Texte au-dessus du titre.
   ========================================================= */

.sr-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sr-accent-dark);
  font-weight: 600;
  margin-bottom: 16px;
}


/* =========================================================
   8. HERO — overrides spécifiques
   ========================================================= */

/* Eyebrow encadré du hero (sur fond sombre) */
.sr-hero-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(232, 168, 104, 0.4);
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #e8a868;
  font-weight: 600;
  font-family: var(--sr-sans);
  margin-bottom: 28px;
}

/* Variante de l'italique sur fonds sombres → or clair */
.sr-bg-encre em.sr-italic,
.sr-on-dark em.sr-italic {
  color: #e8a868;
}

/* Variante italique sur page Voyages → vert palmier */
.sr-on-cuba em.sr-italic {
  color: var(--sr-vert);
}


/* =========================================================
   9. CARDS COURS — pattern réutilisable
   Module Divi "Blurb" stylisé. Classes : sr-card-cours + sr-couleur-X + sr-tag-Y
   ========================================================= */

.et_pb_blurb.sr-card-cours {
  background: var(--sr-creme);
  border-radius: var(--sr-radius);
  overflow: hidden;
  border: 1px solid var(--sr-border);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.et_pb_blurb.sr-card-cours:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(26, 22, 20, 0.2);
}
.et_pb_blurb.sr-card-cours .et_pb_main_blurb_image {
  margin-bottom: 0;
}
.et_pb_blurb.sr-card-cours .et_pb_blurb_container {
  padding: 28px;
}
.et_pb_blurb.sr-card-cours h4 {
  font-family: var(--sr-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.et_pb_blurb.sr-card-cours .et_pb_blurb_description {
  color: var(--sr-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Variantes couleur signature par danse (bandeau supérieur) */
.sr-card-cours.sr-couleur-ambre    { border-top: 3px solid var(--sr-ambre); }
.sr-card-cours.sr-couleur-bordeaux { border-top: 3px solid var(--sr-bordeaux); }
.sr-card-cours.sr-couleur-vert     { border-top: 3px solid var(--sr-vert); }
.sr-card-cours.sr-couleur-or       { border-top: 3px solid var(--sr-or); }

/* Badges "niveau" / "type" via ::before sur l'image (texte hardcodé en CSS) */
.et_pb_blurb.sr-card-cours .et_pb_blurb_image,
.et_pb_blurb.sr-card-cours .et_pb_main_blurb_image {
  position: relative;
}
.et_pb_blurb.sr-card-cours[class*="sr-tag-"] .et_pb_blurb_image::before,
.et_pb_blurb.sr-card-cours[class*="sr-tag-"] .et_pb_main_blurb_image::before {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--sr-encre);
  padding: 5px 11px;
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--sr-sans);
  z-index: 2;
}

/* Textes des badges */
.et_pb_blurb.sr-card-cours.sr-tag-tous     .et_pb_blurb_image::before,
.et_pb_blurb.sr-card-cours.sr-tag-tous     .et_pb_main_blurb_image::before { content: "Tous niveaux"; }
.et_pb_blurb.sr-card-cours.sr-tag-debutant .et_pb_blurb_image::before,
.et_pb_blurb.sr-card-cours.sr-tag-debutant .et_pb_main_blurb_image::before { content: "Débutant"; }
.et_pb_blurb.sr-card-cours.sr-tag-couple   .et_pb_blurb_image::before,
.et_pb_blurb.sr-card-cours.sr-tag-couple   .et_pb_main_blurb_image::before { content: "Couple"; }
.et_pb_blurb.sr-card-cours.sr-tag-filles   .et_pb_blurb_image::before,
.et_pb_blurb.sr-card-cours.sr-tag-filles   .et_pb_main_blurb_image::before { content: "Spécial filles"; }
.et_pb_blurb.sr-card-cours.sr-tag-1to1     .et_pb_blurb_image::before,
.et_pb_blurb.sr-card-cours.sr-tag-1to1     .et_pb_main_blurb_image::before { content: "1-to-1"; }
.et_pb_blurb.sr-card-cours.sr-tag-stage    .et_pb_blurb_image::before,
.et_pb_blurb.sr-card-cours.sr-tag-stage    .et_pb_main_blurb_image::before { content: "Sur demande"; }


/* =========================================================
   10. CARDS EVENTS — soirées sur fond sombre
   ========================================================= */

.sr-event {
  background: rgba(244, 237, 224, 0.04);
  border: 1px solid rgba(244, 237, 224, 0.1);
  border-radius: 2px;
  overflow: hidden;
  transition: background 0.3s ease;
}
.sr-event:hover {
  background: rgba(244, 237, 224, 0.07);
}

.sr-event-date {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e8a868;
  font-weight: 600;
  font-family: var(--sr-sans);
  margin-bottom: 14px;
}


/* =========================================================
   11. CARDS NUMÉROTÉES — pédagogie / mariage
   ========================================================= */

.sr-niveau-card {
  padding: 32px 28px;
  background: var(--sr-creme);
  border-radius: 2px;
  border-top: 3px solid var(--sr-ambre);
  height: 100%;
}
.sr-niveau-num {
  display: block;
  font-family: var(--sr-serif);
  font-style: italic;
  font-size: 32px;
  color: var(--sr-ambre);
  margin-bottom: 12px;
  font-weight: 300;
}
.sr-niveau-card h3 {
  font-family: var(--sr-serif);
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--sr-encre);
}
.sr-niveau-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--sr-gris);
}

/* Variante mariage = bordeaux */
.sr-mariage-card {
  border-top-color: var(--sr-bordeaux);
}
.sr-mariage-card .sr-niveau-num {
  color: var(--sr-bordeaux);
}


/* =========================================================
   12. STATS — bloc compteurs (sans animation Divi)
   ========================================================= */

.sr-stat {
  text-align: left;
}
.sr-stat-num {
  font-family: var(--sr-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 42px;
  line-height: 1;
  color: var(--sr-ambre);
  margin-bottom: 4px;
}
.sr-stat-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sr-gris);
}


/* =========================================================
   13. TÉMOIGNAGE — quote centrée
   ========================================================= */

.sr-quote-mark {
  font-family: var(--sr-serif);
  font-style: italic;
  font-size: 80px;
  color: var(--sr-ambre);
  line-height: 0.5;
  margin-bottom: 20px;
  text-align: center;
}
.sr-quote-text {
  font-family: var(--sr-serif);
  font-weight: 300;
  font-style: italic;
  font-size: 32px;
  line-height: 1.4;
  color: var(--sr-encre);
  margin-bottom: 32px;
  text-align: center;
}
.sr-quote-author {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sr-gris);
  font-weight: 600;
  text-align: center;
}


/* =========================================================
   14. GALERIE — uniformisation 1:1 + hover overlay (Divi 5)
   Sélecteurs renforcés pour battre les styles natifs Divi 5.
   À appliquer via classe `sr-gallery` sur le module Gallery.
   ========================================================= */

.sr-gallery .et_pb_gallery_item {
  margin-bottom: 24px;
}

/* Conteneur — on neutralise les classes .landscape / .portrait Divi */
.sr-gallery .et_pb_gallery_image,
.sr-gallery .et_pb_gallery_image.landscape,
.sr-gallery .et_pb_gallery_image.portrait {
  position: relative;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  background: var(--sr-sable);
  display: block;
}

/* Le lien occupe tout le conteneur */
.sr-gallery .et_pb_gallery_image > a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

/* L'image — on neutralise les attributs width/height HTML */
.sr-gallery .et_pb_gallery_image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
  margin: 0;
  transition: transform 0.6s ease;
}

/* Hover overlay ambre (remplace l'option native Divi 5) */
.sr-gallery .et_pb_gallery_image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(196, 116, 52, 0);
  transition: background 0.4s ease;
  pointer-events: none;
  z-index: 2;
}
.sr-gallery .et_pb_gallery_image:hover::after {
  background: rgba(196, 116, 52, 0.55);
}

/* Zoom léger image au hover */
.sr-gallery .et_pb_gallery_image:hover img {
  transform: scale(1.05);
}

/* Icône loupe au hover */
.sr-gallery .et_pb_gallery_image > a::before {
  content: "⛶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  color: #fff;
  font-size: 32px;
  font-weight: 300;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.sr-gallery .et_pb_gallery_image:hover > a::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Overlay natif Divi — neutralisé pour éviter doublon */
.sr-gallery .et_pb_gallery_image .et_overlay {
  display: none !important;
}

/* Mobile : pas de hover, léger overlay permanent */
@media (hover: none) {
  .sr-gallery .et_pb_gallery_image::after {
    background: rgba(196, 116, 52, 0.12);
  }
  .sr-gallery .et_pb_gallery_image > a::before {
    display: none;
  }
}


/* =========================================================
   15. PLANNING — tableau hebdomadaire
   ========================================================= */

.sr-planning-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--sr-creme);
  font-family: var(--sr-sans);
  font-size: 15px;
}
.sr-planning-table th,
.sr-planning-table td {
  padding: 16px 14px;
  text-align: left;
  border-bottom: 1px solid var(--sr-border);
}
.sr-planning-table th {
  background: var(--sr-sable);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--sr-encre);
}
.sr-planning-table td.sr-jour {
  font-family: var(--sr-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--sr-ambre);
  font-weight: 400;
}
.sr-planning-table .sr-niveau {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sr-gris);
}


/* =========================================================
   16. TARIFS — pricing grid (3 cards côte à côte)
   ========================================================= */

.sr-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Filet de sécurité : on neutralise les <p> parasites injectés par wpautop */
.sr-pricing-grid > p:empty,
.sr-pricing-grid > p:not(.sr-pricing-note) {
  display: none;
}

.sr-pricing-card {
  background: #fff;
  border: 1px solid var(--sr-border);
  border-radius: 2px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.sr-pricing-card.featured {
  border-color: var(--sr-ambre);
  border-width: 2px;
  position: relative;
}
.sr-pricing-card.featured::before {
  content: "Le plus choisi";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sr-ambre);
  color: #fff;
  padding: 4px 14px;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--sr-sans);
}
.sr-pricing-title {
  font-family: var(--sr-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.sr-pricing-title em {
  font-style: italic;
  color: var(--sr-ambre);
}
.sr-pricing-subtitle {
  font-size: 13px;
  color: var(--sr-gris);
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--sr-border);
}
.sr-pricing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.sr-pricing-list li {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 15px;
  color: var(--sr-encre);
  border-bottom: 1px dashed var(--sr-border);
}
.sr-pricing-list li:last-child {
  border-bottom: 0;
}
.sr-pricing-list .sr-price {
  font-family: var(--sr-serif);
  font-style: italic;
  color: var(--sr-ambre);
  font-size: 18px;
}
.sr-pricing-note {
  margin-top: 24px;
  font-size: 13px;
  color: var(--sr-gris);
  line-height: 1.6;
}


/* =========================================================
   17. VOYAGES — bloc renseignement
   ========================================================= */

.sr-voyage-renseignement {
  text-align: center;
}
.sr-voyage-renseignement h2 {
  font-family: var(--sr-serif);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  margin: 12px 0 20px;
}
.sr-voyage-renseignement h2 em {
  font-style: italic;
  color: var(--sr-vert);
}
.sr-voyage-renseignement p {
  color: var(--sr-gris);
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto;
}


/* =========================================================
   18. MARIAGE — bloc tarifs ouverture de bal
   ========================================================= */

.sr-tarif-mariage {
  text-align: center;
}
.sr-tarif-mariage h2 {
  font-family: var(--sr-serif);
  font-weight: 400;
  font-size: 36px;
  margin: 16px 0 32px;
}
.sr-tarif-mariage h2 em {
  font-style: italic;
  color: var(--sr-bordeaux);
}
.sr-tarif-mariage ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  display: inline-block;
}
.sr-tarif-mariage li {
  padding: 16px 0;
  font-size: 16px;
  color: var(--sr-encre);
  border-bottom: 1px dashed var(--sr-border);
}
.sr-tarif-mariage li:last-child {
  border-bottom: 0;
}
.sr-tarif-mariage strong {
  font-family: var(--sr-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--sr-bordeaux);
  margin-right: 8px;
}
.sr-tarif-mariage .sr-tarif-note {
  margin-top: 32px;
  font-size: 14px;
  color: var(--sr-gris);
  font-style: italic;
}


/* =========================================================
   19. BLOG — liste articles (module Divi natif)
   ========================================================= */

.et_pb_post {
  background: var(--sr-creme);
  border: 1px solid var(--sr-border);
  border-radius: 2px;
  padding: 28px;
  height: 100%;
}
.et_pb_post .entry-title {
  font-family: var(--sr-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 12px;
}
.et_pb_post .entry-title a {
  color: var(--sr-encre);
}
.et_pb_post .entry-title a:hover {
  color: var(--sr-ambre);
}
.et_pb_post .post-meta {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sr-gris);
  margin-bottom: 16px;
}
.et_pb_post .post-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sr-gris);
}
.et_pb_post .more-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sr-ambre-fonce);
}


/* =========================================================
   20. CONTACT — bloc infos + formulaire CF7
   ========================================================= */

/* Bloc infos colonne droite */
.sr-contact-info h3 {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sr-ambre-fonce);
  font-weight: 600;
  font-family: var(--sr-sans);
  margin-bottom: 12px;
  margin-top: 32px;
}
.sr-contact-info h3:first-child {
  margin-top: 0;
}
.sr-contact-info p {
  color: var(--sr-encre);
  line-height: 1.7;
  margin-bottom: 0;
}
.sr-contact-info strong {
  font-family: var(--sr-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--sr-ambre);
}

/* --- Formulaire CF7 --- */
.wpcf7-form {
  font-family: var(--sr-sans);
}

.wpcf7-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sr-encre);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 20px;
}
.wpcf7-form label:first-child {
  margin-top: 0;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(26, 22, 20, 0.15);
  border-radius: 2px;
  padding: 14px 16px;
  font-family: var(--sr-sans);
  font-size: 15px;
  color: var(--sr-encre);
  margin-top: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: 0;
  border-color: var(--sr-ambre);
  box-shadow: 0 0 0 3px rgba(196, 116, 52, 0.15);
}

.wpcf7-form textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--sr-sans);
}

/* Select — flèche custom SVG (couleur ambre foncé) */
.wpcf7-form select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%239e5824%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 40px;
  cursor: pointer;
}

/* Ligne prénom + nom côte à côte */
.sr-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sr-form-col label {
  margin-top: 0;
}

/* RGPD checkbox — réécriture markup CF7 par défaut */
.sr-form-rgpd {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: var(--sr-gris) !important;
  line-height: 1.5;
  margin-top: 24px !important;
  cursor: pointer;
}
.sr-form-rgpd .wpcf7-list-item {
  margin: 0;
}
.sr-form-rgpd input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--sr-ambre);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Bouton submit */
.wpcf7-form .wpcf7-submit,
.wpcf7-form input[type="submit"] {
  background: var(--sr-ambre);
  color: #fff;
  border: 0;
  padding: 16px 32px;
  border-radius: 2px;
  font-family: var(--sr-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  margin-top: 28px;
  width: auto;
}
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form input[type="submit"]:hover {
  background: var(--sr-ambre-fonce);
  transform: translateY(-1px);
}

/* Messages de réponse (succès, erreur) */
.wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 14px 18px !important;
  border-radius: 2px;
  font-size: 14px;
  border-width: 1px !important;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--sr-vert) !important;
  color: var(--sr-vert) !important;
  background: rgba(61, 88, 65, 0.06);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: var(--sr-bordeaux) !important;
  color: var(--sr-bordeaux) !important;
  background: rgba(122, 42, 42, 0.06);
}

/* Messages d'erreur par champ */
.wpcf7-not-valid-tip {
  color: var(--sr-bordeaux) !important;
  font-size: 12px !important;
  margin-top: 6px !important;
  font-weight: 500 !important;
  text-transform: none;
  letter-spacing: 0;
}
.wpcf7-not-valid {
  border-color: var(--sr-bordeaux) !important;
}

/* Spinner de chargement */
.wpcf7-spinner {
  background-color: var(--sr-ambre) !important;
}


/* =========================================================
   21. FAB MOBILE — bouton Planning persistant
   ========================================================= */

.sr-fab-planning {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 40;
  background: var(--sr-ambre) !important;
  color: #fff !important;
  padding: 14px 22px;
  border-radius: 50px;
  font-size: 12px;
  letter-spacing: 0.15em;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--sr-sans);
  box-shadow: 0 8px 24px -4px rgba(196, 116, 52, 0.5);
  display: none;
  text-decoration: none !important;
  align-items: center;
  gap: 8px;
}
.sr-fab-planning:hover {
  background: var(--sr-ambre-fonce) !important;
  color: #fff !important;
}


/* =========================================================
   22. UTILITAIRES
   ========================================================= */

.sr-text-muted { color: var(--sr-text-muted); }
.sr-text-accent { color: var(--sr-accent); }
.sr-mt-0 { margin-top: 0 !important; }
.sr-divider {
  height: 1px;
  background: var(--sr-border);
  border: 0;
  margin: 32px 0;
}


/* =========================================================
   23. RESPONSIVE — tous les overrides mobile regroupés
   ========================================================= */

@media (max-width: 900px) {
  /* FAB mobile s'affiche < 900px */
  .sr-fab-planning {
    display: inline-flex;
  }

  /* Pricing grid → 1 colonne */
  .sr-pricing-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* Sections : padding réduit */
  .et_pb_section {
    padding-top: var(--sr-section-y-mobile);
    padding-bottom: var(--sr-section-y-mobile);
  }

  /* Cards cours : padding interne réduit */
  .et_pb_blurb.sr-card-cours .et_pb_blurb_container {
    padding: 24px;
  }

  /* Stats : font légèrement réduite + line-height label */
  .sr-stat-num {
    font-size: 36px;
  }
  .sr-stat-label {
    line-height: 1;
  }

  /* Quote témoignage : font réduite */
  .sr-quote-text {
    font-size: 22px;
  }
}

@media (max-width: 640px) {
  /* Planning : tableau plus compact */
  .sr-planning-table {
    font-size: 13px;
  }
  .sr-planning-table th,
  .sr-planning-table td {
    padding: 10px 8px;
  }
}

@media (max-width: 480px) {
  /* Form contact : prénom + nom empilés */
  .sr-form-row {
    grid-template-columns: 1fr;
  }
}