/*
Theme Name:   Cokette — Thème enfant
Description:  Thème enfant Kadence pour site de masseuse holistique
Template:     kadence
Version:      2.1.0
Text Domain:  massages-enfant
*/

/* =========================================================
   POLICES
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&family=Jost:wght@300;400;500&display=swap');

/* =========================================================
   VARIABLES
   ========================================================= */

:root {
  /* Palette */
  --ck-fond:         #fdf9f5;
  --ck-fond-alt:     #f5ede3;
  --ck-sable:        #c8a882;
  --ck-sable-fonce:  #a08060;
  --ck-brun:         #3a2e28;
  --ck-brun-moyen:   #7d6a5a;
  --ck-bordure:      #e8d9c8;
  --ck-blanc:        #ffffff;

  /* Typographie */
  --ck-serif:  'Cormorant Garamond', Georgia, serif;
  --ck-sans:   'Jost', system-ui, sans-serif;

  /* Divers */
  --ck-radius:     2px;
  --ck-transition: .25s ease;
  --ck-shadow:     0 4px 24px rgba(58 46 40 / .08);
}

/* =========================================================
   BASE
   ========================================================= */

body {
  background-color: var(--ck-fond);
  color: var(--ck-brun);
  font-family: var(--ck-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* Kadence — neutraliser les fonds par défaut */
.entry.content-bg,
article.single-entry {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

body.page .content-wrap,
body.page .entry-content-wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* =========================================================
   TYPOGRAPHIE
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ck-serif);
  font-weight: 400;
  color: var(--ck-brun);
  line-height: 1.15;
}

p {
  line-height: 1.75;
}

/* =========================================================
   LIENS & BOUTONS
   ========================================================= */

a {
  color: var(--ck-sable-fonce);
  text-decoration: none;
  transition: color var(--ck-transition);
}

a:hover {
  color: var(--ck-brun);
}

/* Bouton principal */
.wp-block-button__link,
.ck-btn {
  display: inline-block;
  font-family: var(--ck-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ck-brun) !important;
  background: transparent !important;
  border: 1px solid var(--ck-brun) !important;
  border-radius: 0 !important;
  padding: 0.75em 2em !important;
  transition: background var(--ck-transition), color var(--ck-transition);
}

.wp-block-button__link:hover,
.ck-btn:hover {
  background: var(--ck-brun) !important;
  color: var(--ck-blanc) !important;
}

/* Variante sable */
.ck-btn--sable {
  color: var(--ck-blanc) !important;
  background: var(--ck-sable) !important;
  border-color: var(--ck-sable) !important;
}

.ck-btn--sable:hover {
  background: var(--ck-sable-fonce) !important;
  border-color: var(--ck-sable-fonce) !important;
}

/* =========================================================
   HEADER — TRANSPARENT → BLANC AU SCROLL
   ========================================================= */

/* Position fixe + fond transparent par défaut */
#masthead {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: transparent !important;
  transition: background-color .4s ease, box-shadow .4s ease;
}

/* Neutraliser le fond des enfants directs Kadence */
#masthead .site-header-wrap,
#masthead .kadence-sticky-header-wrap,
#masthead .header-top-wrap,
#masthead .header-main-wrap,
#masthead .header-bottom-wrap {
  background: transparent !important;
  transition: background-color .4s ease;
}

/* État scrollé — fond beige en fondu */
#masthead.scrolled {
  background: rgba(253, 249, 245, .97) !important;
  box-shadow: 0 1px 28px rgba(58, 46, 40, .07) !important;
}

/* Supprimer le padding-top que Kadence injecte pour compenser le header fixe */
#inner-wrap {
  padding-top: 0 !important;
}

/* Margin-top Kadence sur #primary — supprimé pour coller le hero au header */
#primary.content-area {
  margin-top: 0 !important;
}

/* Paragraphe vide généré par wpautop — supprimé pour éviter tout décalage */
.entry-content p:empty,
.single-content p:empty {
  display: none;
  margin: 0;
  padding: 0;
}

/* =========================================================
   Boutons sur fond sombre (hero / cover / cta-final) */
.wp-block-cover .wp-block-button__link,
.section-cta-final .wp-block-button__link {
  color: var(--ck-blanc) !important;
  border-color: rgba(255,255,255,.7) !important;
  background: transparent !important;
}

.wp-block-cover .wp-block-button__link:hover,
.section-cta-final .wp-block-button__link:hover {
  background: var(--ck-blanc) !important;
  color: var(--ck-brun) !important;
  border-color: var(--ck-blanc) !important;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

/* Logo — taille contenue */
.site-logo img,
.custom-logo,
.custom-logo-link img {
  max-height: 56px;
  width: auto;
  display: block;
}

/* Masquer le nom et la description du site — logo seul */
.site-title,
.site-description,
#masthead .site-title,
#masthead .site-description {
  display: none !important;
}

/* Bouton CTA nav */
.ck-nav-cta-item {
  margin-left: 0.75rem;
}

.ck-nav-cta {
  display: inline-block !important;
  font-family: var(--ck-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.55em 1.4em !important;
  border-radius: 0 !important;
  transition: background var(--ck-transition), color var(--ck-transition), border-color var(--ck-transition) !important;
}

/* Transparent — contour blanc */
#masthead:not(.scrolled) .ck-nav-cta {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  background: transparent !important;
}

#masthead:not(.scrolled) .ck-nav-cta:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #ffffff !important;
}

/* Scrollé — contour brun */
#masthead.scrolled .ck-nav-cta {
  color: var(--ck-brun) !important;
  border: 1px solid var(--ck-brun) !important;
  background: transparent !important;
}

#masthead.scrolled .ck-nav-cta:hover {
  background: var(--ck-brun) !important;
  color: var(--ck-blanc) !important;
}

/* Liens nav — police + transition */
#masthead .header-navigation a,
#masthead .main-navigation a,
#masthead .primary-menu-container a,
#masthead .nav--toggle-sub a,
#masthead .site-title a,
#masthead .menu-item a {
  font-family: var(--ck-sans) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: color .4s ease;
}

/* Transparent — liens blancs */
#masthead:not(.scrolled) .header-navigation a,
#masthead:not(.scrolled) .main-navigation a,
#masthead:not(.scrolled) .primary-menu-container a,
#masthead:not(.scrolled) .nav--toggle-sub a,
#masthead:not(.scrolled) .site-title a,
#masthead:not(.scrolled) .menu-item a {
  color: #ffffff !important;
}

/* Scrollé — liens brun */
#masthead.scrolled .header-navigation a,
#masthead.scrolled .main-navigation a,
#masthead.scrolled .primary-menu-container a,
#masthead.scrolled .nav--toggle-sub a,
#masthead.scrolled .site-title a,
#masthead.scrolled .menu-item a {
  color: var(--ck-brun) !important;
}

/* =========================================================
   SECTION PHILOSOPHIE
   ========================================================= */

/* Supprimer le padding du groupe (inline style → !important) */
.wp-block-group.alignfull:has(.ck-img-full) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Image carrée */
.ck-img-full {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0;
}

.ck-img-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* =========================================================
   COMPOSANTS — EYEBROW
   ========================================================= */

.ck-eyebrow {
  display: block;
  font-family: var(--ck-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ck-sable);
  margin-bottom: 0.75rem;
}

/* =========================================================
   COMPOSANTS — CARTE SOIN
   ========================================================= */

.soin-card {
  background: var(--ck-blanc);
  border: 1px solid var(--ck-bordure);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: box-shadow var(--ck-transition);
}

.soin-card:hover {
  box-shadow: var(--ck-shadow);
}

.soin-card__nom {
  font-family: var(--ck-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ck-brun);
  margin: 0;
}

.soin-card__meta {
  display: flex;
  gap: 1.25rem;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--ck-brun-moyen);
}

.soin-card__prix {
  font-weight: 500;
  color: var(--ck-sable-fonce);
}

.soin-card__desc {
  font-size: 0.9rem;
  color: var(--ck-brun-moyen);
  line-height: 1.7;
  margin: 0;
}

/* =========================================================
   COMPOSANTS — TÉMOIGNAGE
   ========================================================= */

.temoignage-card {
  background: var(--ck-fond-alt);
  border: none;
  padding: 2.5rem 2rem;
  font-family: var(--ck-serif);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 300;
  color: var(--ck-brun);
  line-height: 1.7;
}

.temoignage-card__auteur {
  display: block;
  margin-top: 1rem;
  font-family: var(--ck-sans);
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ck-sable);
}

/* =========================================================
   COMPOSANTS — SÉPARATEUR ORNEMENTAL
   ========================================================= */

.ck-ornement {
  display: block;
  text-align: center;
  color: var(--ck-sable);
  font-size: 1.2rem;
  letter-spacing: 0.4em;
  margin: 0.5rem 0;
  opacity: 0.6;
}

/* =========================================================
   SECTIONS
   ========================================================= */

/* Section fond alterné */
.has-fond-alt-background-color,
.ck-section-alt {
  background-color: var(--ck-fond-alt) !important;
}

/* =========================================================
   MENU MOBILE
   ========================================================= */

/* Fond brun sur le drawer */
#mobile-drawer,
#mobile-drawer .popup-drawer-inner,
#mobile-drawer .popup-drawer-content {
  background-color: var(--ck-brun) !important;
}

/* Bouton fermer */
#mobile-drawer .menu-toggle-close,
#mobile-drawer .menu-toggle-close svg {
  color: rgba(255, 255, 255, .7) !important;
  stroke: rgba(255, 255, 255, .7) !important;
  fill: rgba(255, 255, 255, .7) !important;
}

#mobile-drawer .menu-toggle-close:hover,
#mobile-drawer .menu-toggle-close:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Liens de navigation */
#mobile-site-navigation a,
#mobile-drawer .mobile-navigation a {
  font-family: var(--ck-sans) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, .75) !important;
  transition: color var(--ck-transition);
}

#mobile-site-navigation a:hover,
#mobile-drawer .mobile-navigation a:hover {
  color: #ffffff !important;
}

/* Séparateurs / bordures entre items */
#mobile-drawer .mobile-navigation .menu-item {
  border-color: rgba(255, 255, 255, .1) !important;
}

/* Bouton CTA dans le menu mobile */
#mobile-drawer .ck-nav-cta--mobile {
  display: inline-block !important;
  margin-top: 0.5rem !important;
  padding: 0.6em 1.6em !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  color: #ffffff !important;
  background: transparent !important;
  letter-spacing: 0.12em !important;
}

#mobile-drawer .ck-nav-cta--mobile:hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .9) !important;
  color: #ffffff !important;
}

/* =========================================================
   PAGE ACCUEIL — CORRECTIONS
   ========================================================= */

/* ── Eyebrow hero accueil : espace réduit avec le titre ── */
.ck-hero--accueil .wp-block-html p {
  margin-bottom: 0.3rem !important;
}

/* Supprimer le block-gap Gutenberg à l'intérieur du groupe hero */
.ck-hero--accueil .wp-block-group {
  --wp--style--block-gap: 0 !important;
}

/* Supprimer le margin-top automatique du H1 dans le hero */
.ck-hero--accueil h1.wp-block-heading {
  margin-top: 0.4rem !important;
}

/* ── Bande photo ── */
.ck-photo-strip,
.wp-block-group.ck-photo-strip {
  position: relative;
  z-index: 2;
  margin-bottom: -5rem !important;
  overflow: hidden;
}

/* Neutraliser le margin-bottom injecté par Gutenberg is-layout-flow */
.wp-block-group.ck-photo-strip.is-layout-flow,
.wp-block-group.ck-photo-strip.wp-block-group-is-layout-flow {
  margin-bottom: -5rem !important;
}

.ck-photo-strip .wp-block-columns {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ck-photo-strip .wp-block-column {
  padding: 0 !important;
  flex: 1 1 0 !important;
  min-width: 0;
}

.ck-strip-img,
.ck-photo-strip .wp-block-image {
  margin: 0 !important;
}

.ck-strip-img img,
.ck-photo-strip .wp-block-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

/* Section soins phares — padding-top pour absorber le chevauchement */
.ck-photo-strip + .wp-block-group {
  position: relative;
  z-index: 1;
  padding-top: calc(90px + 5rem) !important;
}

/* ── Soins phares — images carrées 1:1 (ciblées par id média) ── */
img.wp-image-46,
img.wp-image-48,
img.wp-image-49 {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center top !important;
  width: 100% !important;
  display: block;
}

/* ── Section À propos (accueil) — image 3:4 portrait ── */
img.wp-image-21 {
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: center top !important;
  width: 100% !important;
  display: block;
}

/* ── CTA Réservation — image en fond très légère ── */
.ck-cta-reservation {
  position: relative;
  overflow: hidden;
}

.ck-cta-reservation::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/images/webp/COKETTE-WEB-15.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: 0;
}

.ck-cta-reservation > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   PAGE MASSAGES — CATALOGUE AMELIA
   ========================================================= */

/* ── Onglets / catégories horizontaux ── */
.ck-section-catalogue .amelia-v2-booking .am-catalog-categories,
.ck-section-catalogue .amelia-v2-booking .am-catalog__categories,
.ck-section-catalogue .amelia-v2-booking .am-categories-list,
.ck-section-catalogue .amelia-v2-booking .am-catalog-categories-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 0 2.5rem !important;
  padding: 0 !important;
}

/* Chaque item de catégorie */
.ck-section-catalogue .amelia-v2-booking .am-catalog-categories li,
.ck-section-catalogue .amelia-v2-booking .am-catalog__categories li,
.ck-section-catalogue .amelia-v2-booking .am-categories-list li,
.ck-section-catalogue .amelia-v2-booking .am-catalog-categories-list li {
  flex: none !important;
  width: auto !important;
}

/* Bouton/lien de catégorie */
.ck-section-catalogue .amelia-v2-booking .am-catalog-categories a,
.ck-section-catalogue .amelia-v2-booking .am-catalog-categories button,
.ck-section-catalogue .amelia-v2-booking .am-catalog__categories a,
.ck-section-catalogue .amelia-v2-booking .am-catalog__categories button {
  display: inline-block;
  font-family: var(--ck-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ck-brun) !important;
  background: transparent !important;
  border: 1px solid var(--ck-bordure) !important;
  border-radius: 0 !important;
  padding: 0.6em 1.5em !important;
  transition: background var(--ck-transition), border-color var(--ck-transition), color var(--ck-transition);
  white-space: nowrap;
}

.ck-section-catalogue .amelia-v2-booking .am-catalog-categories a:hover,
.ck-section-catalogue .amelia-v2-booking .am-catalog-categories button:hover,
.ck-section-catalogue .amelia-v2-booking .am-catalog__categories a:hover,
.ck-section-catalogue .amelia-v2-booking .am-catalog__categories button:hover {
  background: var(--ck-fond-alt) !important;
  border-color: var(--ck-sable) !important;
}

.ck-section-catalogue .amelia-v2-booking .am-catalog-categories a.active,
.ck-section-catalogue .amelia-v2-booking .am-catalog-categories button.active,
.ck-section-catalogue .amelia-v2-booking .am-catalog__categories a.active,
.ck-section-catalogue .amelia-v2-booking .am-catalog__categories button.active {
  background: var(--ck-sable) !important;
  border-color: var(--ck-sable) !important;
  color: var(--ck-blanc) !important;
}

/* Centrer le bloc Amelia */
.ck-section-catalogue .amelia-v2-booking,
.ck-section-catalogue .amelia-booking-form {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   HERO MASSAGES — demi-hauteur & typographie
   ========================================================= */

.ck-hero--massages {
  min-height: 50vh !important;
}

.ck-hero--massages h1,
.ck-hero--massages .wp-block-heading {
  font-family: var(--ck-serif) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  letter-spacing: 0.02em;
}

.ck-hero--massages p {
  font-family: var(--ck-sans) !important;
  font-weight: 300 !important;
  font-style: normal !important;
}

/* =========================================================
   CTA CONTACT
   ========================================================= */

.ck-cta-contact .wp-block-heading {
  font-family: var(--ck-serif);
}

/* Contenir les colonnes dans la largeur du site */
.ck-cta-contact .wp-block-columns {
  max-width: var(--wp--style--global--content-size, 1200px);
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* =========================================================
   PAGE À PROPOS
   ========================================================= */

/* ── Contraindre les colonnes alignwide dans les sections full-width ── */
.section-intro-apropos .wp-block-columns,
.wp-block-group.alignfull .wp-block-columns.alignwide {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem;
  padding-right: 2rem;
  box-sizing: border-box;
  width: 100%;
}

/* ── Eyebrow (alias section-eyebrow → même style que .ck-eyebrow) ── */
.section-eyebrow {
  display: block;
  font-family: var(--ck-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ck-sable);
  margin-bottom: 0.75rem;
}

/* ── Chapeau intro ── */
.apropos-chapeau {
  font-family: var(--ck-serif);
  font-size: 1.2rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ck-brun-moyen);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75;
}

/* ── Portrait praticienne ── */
.praticienne-portrait img,
.apropos-portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── Carte valeur ── */
.valeur-card {
  background: var(--ck-blanc);
  border: 1px solid var(--ck-bordure);
  padding: 2rem 1.75rem;
  height: 100%;
}

.valeur-card__icone {
  font-size: 1rem;
  color: var(--ck-sable);
  margin: 0 0 0.75rem;
  letter-spacing: 0;
}

.valeur-card__titre {
  font-family: var(--ck-serif) !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  color: var(--ck-brun) !important;
  margin: 0 0 0.75rem !important;
}

/* ── Carte info pratique ── */
.info-card {
  background: var(--ck-blanc);
  border: 1px solid var(--ck-bordure);
  padding: 2rem 1.75rem;
  height: 100%;
}

.info-card__icone {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
}

.info-card__titre {
  font-family: var(--ck-serif) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--ck-brun) !important;
  margin: 0 0 1rem !important;
}

/* Table horaires */
.horaires-table table {
  border: none;
  width: 100%;
  font-size: 0.88rem;
  color: var(--ck-brun-moyen);
}

.horaires-table table td {
  border: none;
  padding: 0.3rem 0.5rem 0.3rem 0;
}

.horaires-table table td:first-child {
  font-weight: 500;
  color: var(--ck-brun);
  width: 6rem;
}

/* ── Section CTA final — palette Cokette (remplace le vert) ── */
.section-cta-final {
  background-color: var(--ck-brun) !important;
}

.section-cta-final h2 {
  font-family: var(--ck-serif) !important;
  font-weight: 400 !important;
  color: var(--ck-blanc) !important;
}

.section-cta-final p {
  color: rgba(253, 249, 245, .8) !important;
}

.section-cta-final .wp-block-button__link {
  border-radius: 0 !important;
}

/* ── Hero Accueil ── */
.ck-hero--accueil {
  min-height: 100vh !important;
}

/* ── Scroll indicator ── */
.ck-scroll-indicator {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: ck-scroll-bounce 2.2s ease-in-out infinite;
  z-index: 10;
}

.ck-scroll-indicator svg {
  width: 0.9rem;
  height: 0.9rem;
  stroke: rgba(255, 255, 255, 0.75);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes ck-scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

.ck-hero--accueil .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.ck-hero--accueil h1,
.ck-hero--accueil .wp-block-heading {
  font-family: var(--ck-serif) !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  margin-bottom: 1rem !important;
}

/* ── Hero À propos & Contact ── */
.ck-hero--apropos {
  min-height: 80vh !important;
}

.ck-hero--contact {
  min-height: 55vh !important;
}

/* Regrouper les éléments au centre sans les étirer */
.ck-hero--apropos .wp-block-cover__inner-container,
.ck-hero--contact .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

.ck-hero--apropos h1,
.ck-hero--apropos .wp-block-heading,
.ck-hero--contact h1,
.ck-hero--contact .wp-block-heading {
  font-family: var(--ck-serif) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  color: #ffffff !important;
  margin-top: 0.4rem !important;
  margin-bottom: 0 !important;
}

.ck-hero--apropos .ck-eyebrow--light,
.ck-hero--contact .ck-eyebrow--light {
  margin-bottom: 0 !important;
}

.ck-hero--apropos p:not(.ck-eyebrow--light),
.ck-hero--contact p:not(.ck-eyebrow--light) {
  font-family: var(--ck-sans) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  color: rgba(255, 255, 255, .75) !important;
  font-size: 1rem !important;
  max-width: 620px;
  margin-top: 1.25rem !important;
  margin-bottom: 0 !important;
}

/* Eyebrow sur fond sombre */
.ck-eyebrow--light {
  color: rgba(255, 255, 255, .6) !important;
}

/* ── Headings À propos — neutraliser tout bold parasite ── */
.section-intro-apropos h1,
.section-intro-apropos h2,
.wp-block-group.alignfull h2 {
  font-family: var(--ck-serif) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* =========================================================
   CONTACT
   ========================================================= */

.contact-info-ligne {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--ck-brun-moyen);
}

.contact-info-ligne strong {
  min-width: 6rem;
  font-weight: 500;
  color: var(--ck-brun);
}

.contact-map-wrap {
  overflow: hidden;
}

.contact-map-wrap iframe {
  display: block;
  width: 100%;
  filter: grayscale(30%) sepia(10%);
}

/* =========================================================
   PAGE BONS CADEAUX
   ========================================================= */

.ck-bons-section {
  padding: 5rem 0 6rem;
  background: var(--ck-fond);
}

.ck-bons-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

.ck-bons-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ck-bon-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--ck-bordure);
}

.ck-bon-item:first-child {
  border-top: 1px solid var(--ck-bordure);
}

.ck-bon-item__info {
  flex: 1;
  min-width: 0;
}

.ck-bon-item__nom {
  font-family: var(--ck-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  color: var(--ck-brun) !important;
  margin: 0 0 0.3rem !important;
  line-height: 1.2 !important;
}

.ck-bon-item__duree {
  font-family: var(--ck-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ck-brun-moyen);
}

.ck-bon-item__droite {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-shrink: 0;
}

.ck-bon-item__prix {
  font-family: var(--ck-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ck-sable-fonce);
  white-space: nowrap;
}

/* Neutraliser les styles WooCommerce sur le montant */
.ck-bon-item__prix .woocommerce-Price-amount,
.ck-bon-item__prix .woocommerce-Price-currencySymbol {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* ── Mobile ─────────────────────── */
@media (max-width: 600px) {
  .ck-bon-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .ck-bon-item__droite {
    width: 100%;
    justify-content: space-between;
  }
}

/* =========================================================
   PAGE FORMATION
   ========================================================= */

/* ── Hero ── */
.ck-hero--formation {
  min-height: 70vh !important;
  /* réserve l'espace du header fixe (80px) pour que le contenu centré
     ne passe jamais dessous, quelle que soit la hauteur d'écran */
  padding-top: 90px !important;
  padding-bottom: 30px !important;
  box-sizing: border-box;
}

.ck-hero--formation h1,
.ck-hero--formation .wp-block-heading {
  font-family: var(--ck-serif) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  letter-spacing: 0.02em;
}

.ck-hero--formation .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.ck-hero--formation p {
  font-family: var(--ck-sans) !important;
  font-weight: 300 !important;
  font-style: normal !important;
}

/* ── Chapeau d'introduction ── */
.ck-formation-chapeau {
  font-family: var(--ck-serif);
  font-size: 1.3rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ck-brun-moyen);
  max-width: 720px;
  margin: 0 auto 1.5rem;
  line-height: 1.8;
}

/* ── Section image + texte ── */
.ck-formation-split .wp-block-column img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Grille d'objectifs (cartes numérotées 3×3) ── */
.ck-objectifs {
  list-style: none;
  margin: 0 auto !important;
  padding: 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.ck-objectif {
  background: var(--ck-blanc);
  border: 1px solid var(--ck-bordure);
  padding: 1.85rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
  transition: box-shadow var(--ck-transition), border-color var(--ck-transition);
}

.ck-objectif:hover {
  box-shadow: var(--ck-shadow);
  border-color: var(--ck-sable);
}

.ck-objectif__num {
  font-family: var(--ck-serif);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ck-sable);
}

.ck-objectif__txt {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ck-brun);
}

/* ── Cartes tarifs ── */
.ck-tarifs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
  align-items: stretch;
}

.ck-tarif-card {
  background: var(--ck-blanc);
  border: 1px solid var(--ck-bordure);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.ck-tarif-card--phare {
  border-color: var(--ck-sable);
  box-shadow: var(--ck-shadow);
  position: relative;
}

.ck-tarif-card__badge {
  display: inline-block;
  align-self: center;
  font-family: var(--ck-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ck-blanc);
  background: var(--ck-sable);
  padding: 0.35em 1em;
  margin-bottom: 1.25rem;
}

.ck-tarif-card__module {
  font-family: var(--ck-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ck-sable);
  margin: 0 0 0.5rem;
}

.ck-tarif-card__nom {
  font-family: var(--ck-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ck-brun);
  margin: 0 0 1.75rem;
  line-height: 1.25;
}

.ck-tarif-card__lignes {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  text-align: left;
}

.ck-tarif-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--ck-bordure);
}

.ck-tarif-ligne:last-child {
  border-bottom: none;
}

.ck-tarif-ligne__label {
  font-family: var(--ck-sans);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ck-brun-moyen);
}

.ck-tarif-ligne__prix {
  font-family: var(--ck-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ck-sable-fonce);
  white-space: nowrap;
}

.ck-tarif-card__note {
  margin-top: auto;
  font-family: var(--ck-sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ck-brun-moyen);
  opacity: 0.8;
}

/* ── Formulaire de contact (Contact Form 7) ── */
.ck-formation-form {
  max-width: 640px;
  margin: 0 auto;
}

.ck-formation-form .wpcf7-form p {
  margin-bottom: 1.1rem;
}

.ck-formation-form input.wpcf7-form-control:not(.wpcf7-submit),
.ck-formation-form textarea.wpcf7-form-control,
.ck-formation-form select.wpcf7-form-control {
  width: 100%;
  font-family: var(--ck-sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--ck-brun);
  background: var(--ck-blanc);
  border: 1px solid var(--ck-bordure);
  border-radius: 0;
  padding: 0.85em 1em;
  box-sizing: border-box;
  transition: border-color var(--ck-transition);
}

.ck-formation-form input.wpcf7-form-control:not(.wpcf7-submit):focus,
.ck-formation-form textarea.wpcf7-form-control:focus,
.ck-formation-form select.wpcf7-form-control:focus {
  outline: none;
  border-color: var(--ck-sable);
}

.ck-formation-form textarea.wpcf7-form-control {
  min-height: 140px;
  resize: vertical;
}

.ck-formation-form .wpcf7-submit {
  display: inline-block;
  font-family: var(--ck-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ck-blanc);
  background: var(--ck-sable);
  border: 1px solid var(--ck-sable);
  border-radius: 0;
  padding: 0.85em 2.5em;
  cursor: pointer;
  transition: background var(--ck-transition), border-color var(--ck-transition);
}

.ck-formation-form .wpcf7-submit:hover {
  background: var(--ck-sable-fonce);
  border-color: var(--ck-sable-fonce);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ck-objectifs {
    grid-template-columns: repeat(2, 1fr);
  }

  .ck-tarifs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .ck-objectifs {
    grid-template-columns: 1fr;
  }
}