/*
Theme Name: Kevin Providence
Theme URI: https://example.com/
Author: raging
Description: Thème WordPress français uniquement pour un site de voyance avec page d'accueil, bijoux et formulaire de réservation.
Version: 1.0.33
Text Domain: kevin-providence
*/

:root,[data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2.2rem, 1.6rem + 3vw, 4.5rem);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --color-bg: #f7f3ef;
  --color-surface: #fcfaf8;
  --color-surface-2: #f2ece7;
  --color-border: #dccfc4;
  --color-divider: #e7ddd5;
  --color-text: #261b1d;
  --color-text-muted: #6f6164;
  --color-text-faint: #aa9b9d;
  --color-text-inverse: #fff7f5;
  --color-primary: #5c2148;
  --color-primary-hover: #471737;
  --color-primary-soft: #ead9e2;
  --color-secondary: #8c6a2f;
  --color-accent: #2f6a64;
  --radius-sm: .375rem; --radius-md: .75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px;
  --shadow-sm: 0 2px 8px rgba(38,27,29,.06);
  --shadow-md: 0 12px 30px rgba(38,27,29,.10);
  --content: 1180px;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', Arial, sans-serif;
}
[data-theme="dark"] {
  --color-bg: #191315;
  --color-surface: #221b1d;
  --color-surface-2: #2a2225;
  --color-border: #49393f;
  --color-divider: #342a2d;
  --color-text: #f2e9ea;
  --color-text-muted: #c0afb3;
  --color-text-faint: #8e7d82;
  --color-text-inverse: #1b1517;
  --color-primary: #c88bb0;
  --color-primary-hover: #d7a2c1;
  --color-primary-soft: #3a2a31;
  --color-secondary: #d0a85a;
  --color-accent: #72b7af;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.25);
  --shadow-md: 0 14px 36px rgba(0,0,0,.35);
}
*,:before,:after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:var(--text-base);line-height:1.65;background:var(--color-bg);color:var(--color-text)}
a{text-decoration:none;color:inherit} img,svg{max-width:100%;display:block} button,input,textarea,select{font:inherit}
body.admin-bar .site-header{top:32px}
.skip-link{position:absolute;left:-9999px;top:auto}.skip-link:focus{left:1rem;top:1rem;background:var(--color-primary);color:var(--color-text-inverse);padding:.75rem 1rem;border-radius:var(--radius-md);z-index:999}
.container{width:min(calc(100% - 2rem),var(--content));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(252,250,248,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--color-divider)}
[data-theme="dark"] .site-header{background:rgba(34,27,29,.88)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:82px}
.brand{display:flex;align-items:center;gap:.9rem;font-weight:700}.brand-mark{width:42px;height:42px;color:var(--color-primary)}
.brand-title{font-family:var(--font-display);font-size:1.35rem;letter-spacing:.02em}
.nav-toggle{
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-sm) !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface)}
[data-theme="dark"] .nav-toggle{
  background: #2a2225 !important;
  color: #f2e9ea !important;
  border-color: #49393f !important;
}
.main-nav{position:absolute;left:0;right:0;top:100%;background:var(--color-surface);border-bottom:1px solid var(--color-divider);padding:0 1rem 1rem;display:none}.main-nav.is-open{display:block}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}.main-nav a{display:block;padding:.85rem 1rem;border-radius:var(--radius-md);font-size:var(--text-sm)}
.main-nav a:hover,.main-nav a:focus-visible{background:var(--color-primary-soft);color:var(--color-primary)}
.header-actions{display:none;align-items:center;gap:.75rem}.theme-toggle,.btn,.button,.wp-block-button__link,.wpcf7-submit{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.85rem 1.2rem;border-radius:var(--radius-full);border:1px solid transparent;transition:.2s ease;cursor:pointer}
.theme-toggle{width:46px;padding:0;border-color:var(--color-border);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm)}
[data-theme="dark"] .theme-toggle{background:var(--color-surface-2);color:var(--color-text);border-color:var(--color-border)}
.theme-toggle:hover,.theme-toggle:focus-visible{background:var(--color-primary-soft);color:var(--color-primary)}
.btn-primary,.button,.wp-block-button__link,.wpcf7-submit{background:var(--color-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-sm)}
.btn-primary:hover,.button:hover,.wp-block-button__link:hover,.wpcf7-submit:hover{background:var(--color-primary-hover)}
.btn-secondary{background:transparent;border-color:var(--color-border);color:var(--color-text)}
.hero{
  /* background-image: url('assets/img/fond-hero.webp');
  background-size:contain; */
  padding:clamp(4rem,8vw,8rem) 0
}.hero-grid{display:grid;gap:var(--space-10);align-items:center}.eyebrow{display:inline-flex;gap:.5rem;align-items:center;padding:.45rem .8rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em}
.hero h1{font-family:var(--font-display);font-size:var(--text-2xl);line-height:.95;margin:.9rem 0 1rem;max-width:12ch}.hero p{max-width:60ch;color:var(--color-text-muted)}
.hero-card{background:linear-gradient(145deg,var(--color-surface),var(--color-surface-2));border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.hero-card:before{content:"";position:absolute;inset:auto -10% -25% auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--color-primary-soft),transparent 70%)}
.hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-6)}
/* .methode-image{overflow: hidden;border-radius: 1.5rem;max-width:960px} */
.methode-image{width:100%;height:auto;display:block;object-fit:cover}
.methode-image img{width: 100%;height:auto;object-fit:cover;display: block;border-radius: inherit}
.stat{padding:1rem;border-radius:var(--radius-lg);background:rgba(255,255,255,.35);border:1px solid var(--color-divider)}
[data-theme="dark"] .stat{background:rgba(255,255,255,.02)}
.stat strong{display:block;font-size:1.5rem;font-family:var(--font-display)}
.section{padding:clamp(3.5rem,7vw,6rem) 0}.section-alt{background:var(--color-surface)}
.section-head{max-width:46rem;margin-bottom:var(--space-8)}.section-head h2{font-family:var(--font-display);font-size:var(--text-xl);margin:0 0 .8rem}.section-head p{color:var(--color-text-muted)}
.cards{
  display:grid;
  gap:var(--space-5);
  grid-template-columns:1fr
}
.card{min-width:0;width:100%;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm)}
.card h3{text-align:center;margin:0 0 1rem}
.card p{margin:0;text-align:justify}
.service-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  align-items:center;
  justify-content:center;
  place-items:center;
  background:var(--color-primary-soft);
  color:var(--color-primary);
  /* margin-bottom:1rem;*/
  margin:0 auto 1rem
}
.service-icon svg{
  width:44px;
  height:44px;
  display:block;
}
.icon-heart{
  transform: translate(2px, -1px)
}
.icon-star{
  transform: translate(0px, 6px)
}
.icon-shield{
  transform: translate(0px, -2px)
}

@media (max-width: 768px){
  .cards {
    display: flex;
    flex-direction: row;        /* cartes en ligne */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-bottom: 1.2rem;
    /* Cacher la scrollbar mais garder le scroll */
    scrollbar-width: none;
  }
  .cards::-webkit-scrollbar {
    display: none;
  }
  .cards .card {
    flex: 0 0 82vw;             /* chaque carte = 82% de l'écran */
    max-width: 320px;
    scroll-snap-align: center;
  }
  /* Indicateurs de pagination (dots) */
  .cards-wrapper {
    position: relative;
  }
  .cards-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  .cards-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transition: background 0.3s;
  }
  .cards-dots .dot.active {
    background: rgba(255,255,255,0.9);
  }
  .cards .card h3{
    margin:0;
    flex:1 1 calc(100% - 52px - 10px);
    text-align:center;
  }
  .cards .card p{
    width:100%;
    margin:0;
    text-align:left;
  }
  .cards .card .service-icon {
    margin-inline: auto;
  }
}
@media (min-width: 768px){.cards{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (min-width: 1200px){.cards{grid-template-columns:repeat(4, minmax(0, 1fr))}}

.about-grid,.jewelry-grid,.booking-grid,.footer-grid{display:grid;gap:var(--space-8)}
.profile-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-sm)}
.quote{font-family:var(--font-display);font-size:clamp(1.4rem,2vw,2rem);line-height:1.2;margin-bottom:1rem}
.timeline{display:grid;gap:1rem}.timeline-item{padding-left:1rem;border-left:2px solid var(--color-primary-soft)}
.jewel-card{display:grid;gap:1rem}.jewel-visual{aspect-ratio:4/3;border-radius:var(--radius-lg);background:linear-gradient(135deg,#f3e6cf,#dcc2a5 40%,#b68963);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.3)}
.jewel-visual:before,.jewel-visual:after{content:"";position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.55)}
.jewel-visual:before{width:120px;height:120px;top:18%;left:18%}.jewel-visual:after{width:180px;height:180px;bottom:-10%;right:12%}
.form-shell{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-md)}
.form-grid{display:grid;gap:1rem}.field{display:grid;gap:.45rem}.field label{font-size:var(--text-sm);font-weight:700}.field input,.field select,.field textarea{width:100%;padding:.95rem 1rem;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text)}
.field textarea{min-height:140px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--color-primary-soft);border-color:var(--color-primary)}
.calendar-box{border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);background:var(--color-surface)}
.calendar-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.45rem}.calendar-grid button,.calendar-grid span{aspect-ratio:1/1;display:grid;place-items:center;border-radius:.85rem;font-size:var(--text-sm)}
.calendar-grid .day-name{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.calendar-grid button{border:1px solid var(--color-divider);background:var(--color-bg);color:var(--color-text);box-shadow:var(--shadow-sm)}
.calendar-grid button:hover,.calendar-grid button:focus-visible{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary)}
.calendar-grid button.selected{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
[data-theme="dark"] .calendar-box{background:var(--color-surface-2)}
[data-theme="dark"] .calendar-grid button{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}
[data-theme="dark"] .calendar-grid button:hover,[data-theme="dark"] .calendar-grid button:focus-visible{background:var(--color-primary-soft);color:var(--color-primary);border-color:var(--color-primary)}
[data-theme="dark"] .calendar-grid .day-name{color:var(--color-text-muted)}
[data-theme="dark"] .notice{background:var(--color-primary-soft);color:var(--color-text)}
.calendar-grid button.muted{opacity:.45}
.notice{margin-top:1rem;padding:1rem 1.1rem;border-radius:var(--radius-lg);background:var(--color-primary-soft);color:var(--color-primary);font-size:var(--text-sm)}
.site-footer{padding:var(--space-12) 0;background:#1f1719;color:#f5ecea}.site-footer a{color:#f5ecea}.footer-card{padding:var(--space-6);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);background:rgba(255,255,255,.03)}

/* ===== CONTENEUR WIREFRAME ===== */
.wireframe {
  width: 100%;
  max-width: var(--content-wide, 1200px);
  margin-inline: auto;
  padding-inline: var(--space-6, 1.5rem);
  padding-block: var(--space-12, 3rem)
}
.wireframe-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;
  color: inherit;
  width: 100%;
  margin-bottom: 2rem
}
.methode-titre {
  margin: 0;
  line-height: 1.1;
  text-align: center
}
.title-star {
  width: 28px;
  height: 28px;
  display: block;
  flex: 0 0 28px;
  object-fit: contain
}
.title-star-svg {
  width: 30px;
  height: 30px;
  display: block;
  fill: currentColor;
}
@media (max-width: 768px) {
  .title-star {
    align-items:center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    transform: translateY(-.55em);
  }
  .title-star-svg {
    width: 42px;
    height: 42px;
  }
}
/* ===== GRID 2 COLONNES ===== */
.methode-inner {display:grid;grid-template-columns:1fr 1fr;/* image | contenu */ gap:3rem;align-items:center}
/* ===== COLONNE IMAGE ===== */
.methode-image {overflow:hidden;border-radius:1.5rem;max-width:480px;width:100%;justify-self:center}
.methode-image img {width:100%;height:auto;object-fit:cover;display:block;border-radius:inherit}
.methode-image-col {display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
/* ===== LABEL "Mon approche" ===== */
.methode-label {grid-column:1;/* colle à la colonne image */ align-self:start}
/* ===== MOBILE : 1 colonne ===== */
@media (max-width: 768px) {
  .methode-inner{grid-template-columns:1fr}
  .methode-image{max-width: 100%}
}
/* ============================================ */

@media (min-width: 860px){
  .nav-toggle{display:none}.main-nav{position:static;display:block!important;background:transparent;border:0;padding:0}.main-nav ul{flex-direction:row;align-items:center;gap:.25rem}.header-actions{display:flex}.header-center{display:flex;align-items:center;gap:2rem}.hero-grid{grid-template-columns:1.15fr .85fr}.about-grid{grid-template-columns:1.05fr .95fr}.jewelry-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.booking-grid{grid-template-columns:1fr 1.05fr}.footer-grid{grid-template-columns:1.1fr .9fr .9fr}
}

@media (max-width: 860px){
  .site-header{padding-block: 8px !important}
  .header-row{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
    min-height:auto !important}
  .brand{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 !important;
    flex:1 1 auto !important;
    min-width:0 !important}
  .header-actions{
    order:2 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    gap:8px !important;
    margin:0 !important;
    flex:0 0 auto !important}
  .header-center{
    order:3 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    margin:0 !important;
    flex:0 0 auto !important}
  .header-actions .btn{
    order:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 18px !important;
    line-height:1 !important;
    border-radius:999px !important}
  .header-actions .theme-toggle{
    order:2 !important;
    width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    margin:0 !important}
  .header-center .nav-toggle{
    order:3 !important;
    width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    margin:0 !important}
  .brand-title{
    line-height:1.1 !important}
}

@media (max-width: 419px){
  .header-actions a.btn.btn-primary{
    display:none !important}
}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}














/* ══════════════════════════════════════════
   FOND HERO — uniquement sur .hero-grid
══════════════════════════════════════════ */
.hero {
  position: relative;
}

.hero .hero-grid {
  background-image: url('assets/img/fond-hero.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem);
}

/* Overlay sombre sur le hero-grid uniquement */
.hero .hero-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(25, 19, 21, 0.55) 0%,
    rgba(25, 19, 21, 0.75) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Tout le contenu du hero-grid passe au-dessus de l'overlay */
.hero .hero-grid > * {
  position: relative;
  z-index: 1;
}

.hero .wireframe {
  position: relative;
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 1;
}

/* Texte dans hero-grid — toujours clair */
.hero .hero-grid h1,
.hero .hero-grid .eyebrow {
  color: #fff7f5 !important;
}
.hero .hero-grid > div > p,
.hero .hero-grid > div > ul li {
  color: rgba(255, 245, 242, 0.85) !important;
}
.hero .hero-grid .eyebrow {
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
}
.hero .hero-grid .btn-secondary {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff !important;
  background: transparent;
}
.hero .hero-grid .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Texte wireframe (section méthode) — couleur thème normale */
.hero .methode-titre,
.hero .methode-intro,
.hero .methode-label,
.hero .methode-etape h3,
.hero .methode-etape p {
  color: var(--color-text) !important;
}

/* Cartes dans le hero — thème actif */
.hero .card,
.hero .card h3,
.hero .card p,
.hero .card li {
  color: var(--color-text) !important;
}

/* Bijoux — thème actif */
#bijoux .card,
#bijoux .card h3,
#bijoux .card p {
  color: var(--color-text) !important;
}


/* ══════════════════════════════════════════
   FOND À PROPOS
══════════════════════════════════════════ */
#a-propos {
  background-image: url('assets/img/fond-a-propos.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

#a-propos .about-grid {
  position: relative;
  z-index: 1;
}
#a-propos .about-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(25, 19, 21, 0.55);
  pointer-events: none;
  z-index: -1;
}

#a-propos .container {
  position: relative;
  z-index: 1;
}

#a-propos,
#a-propos h2,
#a-propos p,
#a-propos strong {
  color: #fff7f5 !important;
}
#a-propos .eyebrow {
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
}
#a-propos .quote {
  color: #fff7f5 !important;
}
#a-propos .profile-panel {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#a-propos .timeline-item {
  border-left-color: var(--color-primary);
  color: rgba(255, 245, 242, 0.85) !important;
}
#a-propos .timeline-item strong {
  color: #fff !important;
}


/* ══════════════════════════════════════════
   SECTION RÉSERVATION — texte lisible
   dans les 2 thèmes
══════════════════════════════════════════ */
#reservation h2,
#reservation .section-head p {
  color: #fff !important;
}