/* Tempus Voyance — Modern V2 (refonte globale, responsive)
   Objectif: conserver l'esthétique (bleus / doré / rouge) tout en modernisant la structure.
*/

:root{
  --bg: #D6EAF8;
  --panel: #AED6F1;
  --panel-2: #85C1E9;
  --ink: #0B2A44;
  --text: #1F618D;
  --nav-dark: #032553;
  --red: #D20F26;
  --gold: #F39C12;
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(1,14,40,.10);
  --shadow-soft: 0 4px 14px rgba(1,14,40,.10);
  --radius: 14px;
  --radius-sm: 10px;
  --max: 1140px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

img{ max-width:100%; height:auto; display:block; }

.container{
  width: min(var(--max), calc(100% - 24px));
  margin: 0 auto;
}

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(214,234,248,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(133,193,233,.6);
}
.site-header__bar{
  width: min(var(--max), calc(100% - 24px));
  margin: 0 auto;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 0;
}
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand__img{
  width: 320px;
  max-width: 52vw;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}

.header-cta{ margin-left:auto; display:flex; gap:10px; align-items:center; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.02rem;
  border: 1px solid rgba(3,37,83,.20);
  box-shadow: 0 2px 6px rgba(1,14,40,.06);
}
.btn--primary{
  background: linear-gradient(180deg, #F7B84D, var(--gold));
  color: #1b1b1b;
  border-color: rgba(243,156,18,.65);
}
.btn--ghost{
  background: rgba(255,255,255,.55);
  color: var(--nav-dark);
}
.btn--block{ width:100%; }

.menu-toggle{
  display:none;
  margin-left: 6px;
  border: 1px solid rgba(3,37,83,.25);
  background: rgba(255,255,255,.65);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 18px;
  line-height: 1;
  cursor:pointer;
}

/* Desktop nav */
.nav-desktop{
  width: min(var(--max), calc(100% - 24px));
  margin: 0 auto;
  padding: 0 0 10px;
}
.nav-desktop__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.nav-group{ position:relative; }
.nav-group__btn{
  cursor:pointer;
  border: 1px solid rgba(3,37,83,.18);
  background: rgba(255,255,255,.55);
  color: var(--nav-dark);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing:.06rem;
  text-transform: uppercase;
  font-size: 12px;
}
.nav-group__panel{
  position:absolute;
  top: 44px;
  left: 0;
  min-width: 260px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(133,193,233,.8);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
  display:none;
}
.nav-group.is-open .nav-group__panel{ display:block; }
.nav-group__panel ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.nav-group__panel a{
  display:block;
  text-decoration:none;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--nav-dark);
  font-weight: 700;
  border: 1px solid rgba(3,37,83,.08);
  background: rgba(214,234,248,.55);
}
.nav-group__panel a:hover{ background: rgba(243,156,18,.22); border-color: rgba(243,156,18,.35); }

/* Mobile nav */
.nav-mobile{
  border-top: 1px solid rgba(133,193,233,.6);
  background: rgba(214,234,248,.96);
}
.nav-mobile__inner{
  width: min(var(--max), calc(100% - 24px));
  margin: 0 auto;
  padding: 12px 0 16px;
  display:grid;
  gap: 10px;
}
.nav-mobile__group{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(133,193,233,.65);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(1,14,40,.06);
  overflow:hidden;
}
.nav-mobile__group summary{
  cursor:pointer;
  padding: 12px 12px;
  font-weight: 900;
  letter-spacing:.06rem;
  text-transform: uppercase;
  color: var(--nav-dark);
  list-style:none;
}
.nav-mobile__group summary::-webkit-details-marker{ display:none; }
.nav-mobile__links{ display:grid; gap:6px; padding: 0 12px 12px; }
.nav-mobile__links a{
  text-decoration:none;
  padding: 10px 10px;
  border-radius: 10px;
  font-weight: 700;
  color: var(--nav-dark);
  border: 1px solid rgba(3,37,83,.08);
  background: rgba(214,234,248,.55);
}
.nav-mobile__cta{ display:grid; gap:8px; }

body.nav-open{ overflow-x:hidden; }

/* Page layout */
.page{
  padding: 16px 0 28px;
}
.page-main{
  width: min(var(--max), calc(100% - 24px));
  margin: 0 auto;
}

/* Content block - conserve fond */
.content{
  background-color: var(--panel);
  border: 1px solid rgba(133,193,233,.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  background-image: url('../img/voyance_fond.jpg');
  background-repeat: repeat-y;
  background-size: contain;
}

/* Typography improvements */
.content h1, .content h2, .content h3{
  color: var(--nav-dark);
  font-weight: 900;
  line-height: 1.2;
}
.content h1{ font-size: clamp(22px, 2.4vw, 34px); }
.content h2{ font-size: clamp(18px, 2vw, 26px); }
.content h3{ font-size: clamp(16px, 1.5vw, 20px); }

.content p, .content li, .content ul, .content ol{
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
}

/* Keep some original alignment intentions but avoid ultra-centered long texts */
.content .introduction h2{ text-align:center; }
.content .introduction p{ text-align:center; }

.content .article p{ text-align: justify; }

/* Make tables and embeds responsive */
table{ max-width:100%; width:100%; border-collapse: collapse; overflow:auto; }
iframe{ max-width:100%; }

/* Footer */
.site-footer{
  margin-top: 16px;
}
.site-footer__inner{
  width: min(var(--max), calc(100% - 24px));
  margin: 0 auto;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(133,193,233,.75);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(1,14,40,.06);
  padding: 16px;
}
.footer-cols{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 14px;
}
.footer-col h3{
  margin:0 0 10px;
  color: var(--nav-dark);
  font-size: 14px;
  letter-spacing:.06rem;
  text-transform: uppercase;
}
.footer-col p{ margin:0; color: var(--text); }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.footer-col a{ text-decoration:none; color: var(--nav-dark); font-weight: 700; }
.footer-col a:hover{ color: var(--red); }
.site-footer__bottom{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(133,193,233,.7);
  color: rgba(3,37,83,.75);
  font-weight: 700;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 980px){
  .footer-cols{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px){
  .header-cta{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .nav-desktop{ display:none; }
  .brand__img{ width: 260px; max-width: 60vw; }
  .content{ padding: 12px; }
}

@media (max-width: 420px){
  .brand__img{ width: 220px; }
  .content p, .content li{ font-size: 15px; }
}


/* V2 FIXES (auto) */
.text-article, .article{ font-size: 16px; line-height: 1.55; }
.text-article h1, .article h1{ font-size: clamp(1.35rem, 3vw, 1.75rem); }
.text-article h2, .article h2{ font-size: clamp(1.15rem, 2.6vw, 1.45rem); }
.text-article h3, .article h3{ font-size: clamp(1.05rem, 2.2vw, 1.25rem); }
.text-article p, .text-article li, .article p, .article li{ font-size: 1rem; }
.text-article iframe, .article iframe{ max-width:100%; border:0; }
.vos-questions-moment a{ text-decoration: underline; }
@media (max-width: 820px){
  .planning-audiotel, .planning-consultations-privees{ height: 520px !important; }
}



/* Accueil button in nav (stabilisation) */
.nav-home__btn{
  text-decoration:none;
  display:inline-block;
}
.nav-mobile__home{
  text-decoration:none;
  display:block;
  margin: 0 12px 10px;
  padding: 10px 10px;
  border-radius: 12px;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);
  color: var(--ink);
}
.nav-mobile__home:focus,
.nav-mobile__home:hover{
  outline: none;
}


/* TEMPUS - Audiotel: prevent "tel:" prompt on desktop while keeping click-to-call on mobile */
@media (min-width: 900px) {
  a[href^="tel:"] { pointer-events: none; cursor: default; }
}


/* TEMPUS - Audiotel argumentaire: show "Appeler" link on mobile only */
@media (max-width: 899px) {
  .audiotel-call a { color: inherit; }
}