/*
Theme Name: Calendrify_UTC
Theme URI: https://calendrify.net
Author: Calendrify
Description: Vitrine SaaS RDV — HTML/CSS/JS pur, thème sombre par défaut, toggle sombre/clair, navbar moderne.
Version: 1
Requires PHP: 8.0
Text Domain: calendrify
*/

/* === Couleurs fixes === */
:root{
  --primary:#0ea5e9;
  --primary-2:#06b6d4;
  --sand:#fcd34d;
  --coral:#fb7185;
  --radius:18px;
  --shadow:0 10px 30px rgba(2,6,23,.06),0 2px 10px rgba(2,6,23,.03);
}

/* === Thèmes === */
body.theme-light{
  --paper:#ffffff;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --text:#0f172a;
  --text-secondary:#475569;
  --muted:#64748b;
  --border:#e5e7eb;
  --hover:#f8fafc;
}
body.theme-dark{
  --paper:#0b1220;
  --surface:#0f172a;
  --surface-2:rgba(255,255,255,.06);
  --text:#e2e8f0;
  --text-secondary:#cbd5e1;
  --muted:#94a3b8;
  --border:rgba(148,163,184,.24);
  --hover:rgba(255,255,255,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); background:var(--paper);
  transition:background-color .25s ease,color .25s ease;
}
a{color:inherit;text-decoration:none}
.container{max-width:1160px;margin:0 auto;padding:0 24px}

.btn{display:inline-flex;align-items:center;gap:10px;border-radius:14px;border:1px solid transparent;padding:12px 16px;font-weight:600;cursor:pointer;transition:.2s;box-shadow:0 1px 0 rgba(2,6,23,.02)}
.btn.primary{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn.ghost:hover{background:var(--hover)}
.btn.outline{background:var(--surface);border:1px solid var(--border)}

.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:6px 10px;font-size:12px;color:var(--muted)}
.icon{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

/* ===== NAVBAR (non fixée) ===== */
.navbar{position:relative;top:auto;z-index:10}             /* <-- plus sticky */
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--border); background:var(--surface-2);
  backdrop-filter:saturate(180%) blur(12px);
  border-radius:16px; padding:10px 12px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text)}
.brand-name{letter-spacing:.2px}
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:42px;height:38px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);color:var(--text);
}
.nav-list{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.nav-list li{position:relative}
.nav-list a{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:12px;border:1px solid transparent;
  color:var(--text-secondary);
}
.nav-list li.current-menu-item > a,
.nav-list a:hover{background:var(--hover);border-color:var(--border);color:var(--text)}

.nav-actions{display:flex;align-items:center;gap:8px}
.btn.smaller{padding:10px 12px;font-size:14px}

/* Le toggle de thème dans la navbar n'est pas fixe */
.navbar .theme-toggle{position:static;background:var(--surface);border:1px solid var(--border);box-shadow:none}

/* Sous-menus */
.nav-list li ul{
  position:absolute;left:0;top:calc(100% + 8px);min-width:200px;
  display:none;flex-direction:column;gap:6px;padding:8px;
  border:1px solid var(--border);background:var(--surface);border-radius:14px;
}
.nav-list li:hover > ul{display:flex}
.nav-list li ul a{padding:8px 10px;border-radius:10px}

/* Responsive navbar */
@media (max-width: 900px){
  .nav-toggle{display:inline-flex}
  .nav-list{
    position:absolute;left:12px;right:12px;top:calc(100% + 8px);
    display:none;flex-direction:column;gap:6px;padding:8px;
    border:1px solid var(--border);background:var(--surface);border-radius:14px;
  }
  .navbar.open .nav-list{display:flex}
  .nav-actions .btn.smaller{display:none}
}

/* Toggle thème global (au cas où il n'est pas dans la navbar) */
.theme-toggle{position:fixed;top:16px;right:16px;z-index:60;display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);box-shadow:var(--shadow)}
.theme-toggle:hover{filter:brightness(1.05)}

/* ===== HERO / décor plage ===== */
.hero{position:relative;padding:80px 0;overflow:hidden}
.gradient-blobs{position:absolute;inset:0;pointer-events:none;z-index:-1}
.blob{position:absolute;filter:blur(80px);border-radius:9999px;opacity:.6}
.blob.sky{background:rgba(14,165,233,.45);width:320px;height:320px;left:-80px;top:-10px}
.blob.cyan{background:rgba(6,182,212,.35);width:360px;height:360px;right:-40px;top:80px}
.blob.sand{background:rgba(252,211,77,.35);width:420px;height:420px;left:40%;bottom:-120px}
.blob.coral{background:rgba(251,113,133,.28);width:320px;height:320px;left:60px;top:380px}

/* Typo & layout généraux */
.title{font-size:44px;line-height:1.1;margin:18px 0 0;font-weight:800;letter-spacing:-.02em}
.title .grad{color:var(--primary);background:none}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .title .grad{background:linear-gradient(90deg,var(--primary),var(--primary-2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.text-lg{font-size:18px;color:var(--text-secondary);max-width:600px}
.row{display:grid;gap:40px}
@media(min-width:900px){.row{grid-template-columns:1fr 1fr}}

.mock{border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:var(--shadow);padding:16px}
.window-bar{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);padding:8px}
.dot{width:10px;height:10px;border-radius:999px}
.card{border:1px solid var(--border);border-radius:16px;padding:14px;background:var(--surface)}

.grid-3{display:grid;gap:16px}
@media(min-width:720px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;gap:16px}
@media(min-width:760px){.grid-2{grid-template-columns:repeat(2,1fr)}}

.pill{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px;color:var(--text-secondary)}
.section{padding:64px 0}
.section h2{font-size:34px;margin:0 0 8px}
.muted{color:var(--muted)}

.features .card h3{margin:0;font-size:16px}
.features .card p{margin:10px 0 0;color:var(--text-secondary);font-size:14px}

.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;opacity:.9}
@media(min-width:640px){.logos{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.logos{grid-template-columns:repeat(6,1fr)}}
.logo{display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:14px;padding:16px;font-weight:600;color:var(--text-secondary);background:var(--surface)}

.pricing .card{position:relative}
.pricing .price{font-size:36px;font-weight:800}
.tag{position:absolute;top:14px;right:14px;background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff;border-radius:999px;padding:6px 10px;font-size:12px}

.list{list-style:none;padding:0;margin:0}
.list li{display:flex;gap:10px;margin:8px 0;color:var(--text-secondary)}
.check{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:999px}

.tabs{border:1px solid var(--border);border-radius:18px;padding:12px}
.tab-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tab-buttons button{border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:10px;font-weight:600;cursor:pointer;color:var(--text-secondary)}
.tab-buttons button.active{border-color:var(--primary);color:#0b2a33}
.tab-panel{display:none;margin-top:14px;border:1px dashed var(--border);border-radius:16px;background:var(--surface-2);height:300px}
.tab-panel.active{display:block}

.cta{border:1px solid var(--border);border-radius:26px;padding:32px;background:linear-gradient(135deg,rgba(14,165,233,.12),var(--surface) 40%, rgba(6,182,212,.12));}

.faq .item{border-bottom:1px solid var(--border)}
.faq button{width:100%;text-align:left;background:none;border:none;padding:18px 0;font-size:16px;font-weight:600;cursor:pointer;color:var(--text)}
.faq .content{display:none;padding:0 0 18px;color:var(--text-secondary)}
.faq .content.open{display:block}

.footer{border-top:1px solid var(--border);padding:48px 0}
.footer-grid{display:grid;gap:24px}
@media(min-width:900px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Lecture confortable pour page.php ===== */
/* Rétrécit la largeur des contenus de page et centre le bloc */
.page .section .container{max-width:760px}
/* Titre centré sur les pages */
.page .section .container .title{text-align:center}
/* Paragraphe lisible */
.page .section .container .text-lg{max-width:unset;line-height:1.7;font-size:17px}
/* Images/iframes responsive dans le contenu WP éventuel */
.page .section .container img,
.page .section .container iframe{max-width:100%;height:auto;border-radius:12px}

/* ===== Ajustements mobile complémentaires ===== */
.hero{overflow:hidden} /* évite un scroll horizontal avec les blobs */
@media (max-width:480px){
  .title{font-size:34px}
  .cta form{grid-template-columns:1fr !important}
  .cta form .btn{width:100%}
}
@media (max-width:760px){ .grid-2{ grid-template-columns:1fr } }
@media (max-width:720px){ .grid-3{ grid-template-columns:1fr } }