/* =========================================================
   NovaMoon : Design system global
   Chargé sur toutes les pages via wp_enqueue_style().
   Conserve à l'identique le système de design des landing
   pages HTML d'origine (couleurs, typo, cards, boutons...).
   ========================================================= */

:root{
  --bg:#FFFFFF; --ink:#0A0A0A; --muted:#6C6C75; --line:rgba(10,10,10,.12); --soft:#F6F6F4;
  --gold:#C9A35B; --gold-soft:#E4C98F; --gold-deep:#9A7636;
  --display:"Hanken Grotesk", system-ui, sans-serif;
  --serif:"Playfair Display", Georgia, serif;
  --body:"Inter", system-ui, sans-serif;
  --mono:"Inter", system-ui, sans-serif;
  --maxw:1200px;
}

/* ===== reset ===== */
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* ===== accessibilité : focus & skip-link ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:3px;
  border-radius:4px;
}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:1000;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:8px;
  font-family:var(--mono); font-size:.82rem; transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

/* accent doré (mots en italique serif) */
.gold{font-family:var(--serif); font-style:italic; font-weight:600;
  background:linear-gradient(180deg,#D8B978 0%,#9A7636 52%,#C2A05A 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}

/* ===== header (pages intérieures) ===== */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px;}
.logo{font-family:var(--display); font-weight:700; font-size:1.18rem; letter-spacing:-.02em; display:flex; align-items:center; gap:9px;}
.logo .o{width:11px; height:11px; border-radius:50%; background:var(--ink); position:relative; flex-shrink:0;}
.logo .o::after{content:""; position:absolute; right:0; top:1px; width:5px; height:5px; border-radius:50%; background:var(--gold);}
.logo .accent{font-weight:400; color:var(--gold); margin-left:.16ch;}
.nav-links{display:flex; gap:26px; font-size:.93rem; color:var(--muted); list-style:none;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links .current-menu-ancestor > a,
.nav-links .current_page_ancestor > a{color:var(--ink); font-weight:600;}
.nav-cta{font-size:.88rem; font-weight:600; color:#fff; background:var(--ink); padding:9px 18px; border-radius:100px;}
.nav-cta:hover{background:#2a2d31;}

/* burger + menu mobile (amélioration accessibilité : la nav n'est plus perdue sur mobile) */
.burger{display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:none; cursor:pointer; position:relative;}
.burger span, .burger span::before, .burger span::after{content:""; position:absolute; left:10px; right:10px; height:2px; background:var(--ink); transition:transform .25s ease, opacity .2s ease;}
.burger span{top:19px;}
.burger span::before{top:-7px;}
.burger span::after{top:7px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{display:none; border-top:1px solid var(--line); background:#fff;}
.mobile-nav.open{display:block;}
.mobile-nav ul{padding:10px 0;}
.mobile-nav a{display:block; padding:14px 32px; font-size:1rem; border-bottom:1px solid var(--line);}
.mobile-nav a.active,
.mobile-nav .current-menu-item > a,
.mobile-nav .current_page_item > a{color:var(--gold-deep); font-weight:600;}
.mobile-nav .nav-cta{display:inline-flex; margin:16px 32px;}

/* ===== buttons ===== */
.btn{display:inline-flex; align-items:center; gap:.55ch; font-weight:600; font-size:.97rem; padding:14px 28px; border-radius:100px; transition:transform .2s ease, background .2s, color .2s, border-color .2s; cursor:pointer; border:1px solid transparent;}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{transform:translateY(-2px); background:#2a2d31;}
.btn-gold{background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#1c1407;}
.btn-gold:hover{transform:translateY(-2px); filter:brightness(1.05);}
.btn-outline{border-color:var(--line); color:var(--ink);}
.btn-outline:hover{border-color:var(--ink);}
.btn-light{background:#fff; color:var(--ink);}
.btn-light:hover{transform:translateY(-2px); background:#ECEEF0;}
.btn-glass{border-color:rgba(255,255,255,.5); color:#fff;}
.btn-glass:hover{background:#fff; color:var(--ink);}

/* Bloc natif "Boutons" (utilisé dans le contenu éditable, ex. tarifs) :
   le bloc pose ses classes sur le wrapper .wp-block-button, pas sur le
   lien lui-même, donc on stylise le lien via un sélecteur descendant. */
.wp-block-button.btn .wp-block-button__link{
  display:inline-flex; align-items:center; gap:.55ch; font-weight:600; font-size:.97rem;
  padding:14px 28px; border-radius:100px; text-decoration:none; border:1px solid transparent;
  transition:transform .2s ease, background .2s, color .2s, border-color .2s;
}
.wp-block-button.btn-gold .wp-block-button__link{background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#1c1407;}
.wp-block-button.btn-gold .wp-block-button__link:hover{transform:translateY(-2px); filter:brightness(1.05);}
.wp-block-button.btn-outline .wp-block-button__link{border-color:var(--line); color:var(--ink); background:transparent;}
.wp-block-button.btn-outline .wp-block-button__link:hover{border-color:var(--ink);}

/* ===== eyebrow / labels ===== */
.lbl{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:11px; margin:0 0 22px;}
.lbl::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 9px var(--gold);}

/* ===== page hero (pages intérieures) ===== */
.phero{padding:90px 0 60px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--soft),#fff);}
.phero h1{font-family:var(--display); font-weight:700; font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.04; letter-spacing:-.03em; max-width:18ch;}
.phero p{margin-top:24px; font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--muted); max-width:60ch;}
.crumbs{font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--muted); margin-bottom:26px;}
.crumbs a:hover{color:var(--ink);}
.crumbs span{color:var(--gold);}
.crumbs a, .crumbs span{ display:inline; }

/* ===== sections ===== */
section.blk{padding:84px 0;}
section.blk.blk-soft{background:var(--soft);}
.h2{font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.025em; line-height:1.08; max-width:24ch; margin:0;}
.lead{font-size:1.1rem; color:var(--muted); max-width:64ch; margin-top:18px;}

/* two-column (constat / approche) */
.two{display:grid; grid-template-columns:1fr 1fr; gap:54px;}
.two h3{font-family:var(--display); font-weight:600; font-size:1.4rem; letter-spacing:-.01em; margin-bottom:14px;}
.two p{color:var(--muted);}

/* liste à puces dorées */
.ulx{list-style:none; margin-top:18px;}
.ulx li{position:relative; padding-left:26px; margin:12px 0; color:var(--muted);}
.ulx li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--gold);}
.ulx li b, .ulx li strong{color:var(--ink); font-weight:600;}

/* tags */
.tags{display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 0; padding:0;}
.tags span, .tags a, .tags li{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); border:1px solid var(--line); padding:8px 13px; border-radius:100px; list-style:none;}
.tags span::before, .tags a::before, .tags li::before{content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--gold); margin-right:8px; vertical-align:middle;}
.tags a:hover{border-color:var(--gold); color:var(--gold-deep);}

/* grille de cartes */
/* !important : WordPress injecte un CSS de layout par bloc Groupe
   (.wp-container-xxx{display:block}) imprimé après ce fichier ; à
   spécificité égale (une classe), cette règle gagnerait sinon la cascade.
   Ces classes servent dans deux contextes : cartes en pur PHP (hub
   /expertises/, pas de wrapper supplémentaire) ET contenu de bloc Gutenberg
   (studio/campus/laboratoire, où WordPress ajoute un
   .wp-block-group__inner-container entre le bloc et ses enfants réels) :
   on cible donc les deux à la fois. */
.grid{display:grid !important; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)) !important; gap:20px; margin-top:14px;}
.grid > .wp-block-group__inner-container{display:grid !important; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)) !important; gap:20px;}
.card{border:1px solid var(--line); border-radius:18px; padding:28px; background:#fff; transition:transform .25s ease, border-color .25s, box-shadow .25s; display:flex !important; flex-direction:column !important; min-height:210px;}
.card > .wp-block-group__inner-container{display:flex !important; flex-direction:column !important; height:100%;}
.card:hover{transform:translateY(-4px); border-color:rgba(201,163,91,.6); box-shadow:0 22px 50px -30px rgba(10,10,10,.4);}
.card .num{font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; color:var(--gold); margin:0;}
.card .badge{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); border:1px solid var(--line); padding:4px 10px; border-radius:100px; margin:0;}
.card .card-top > .wp-block-group__inner-container{display:flex !important; justify-content:space-between; align-items:center;}
.card h3{font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-.02em; margin:14px 0 8px;}
.card p{color:var(--muted); font-size:.97rem; flex:1;}
.card .go{margin-top:16px; font-weight:600; font-size:.92rem; color:var(--gold);}
.card:hover .go{color:var(--gold-deep);}

/* KPIs */
.kpis{margin-top:14px;}
.kpis > .wp-block-group__inner-container{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important; gap:18px;}
.kpi{border:1px solid var(--line); border-radius:16px; padding:24px;}
.kpi b, .kpi h3{display:block; font-family:var(--display); font-weight:700; font-size:2rem; letter-spacing:-.02em; margin:0;}
.kpi span, .kpi p{font-size:.9rem; color:var(--muted); margin:0;}

/* process steps */
.steps{counter-reset:s; margin-top:14px; border-top:1px solid var(--line);}
.step{display:grid !important; grid-template-columns:auto 1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--line); align-items:start;}
.step::before{counter-increment:s; content:"0" counter(s); font-family:var(--mono); font-size:.8rem; color:var(--gold); padding-top:4px;}
.step h4{font-family:var(--display); font-weight:600; font-size:1.25rem; margin-bottom:6px;}
.step p{color:var(--muted);}

/* pricing */
.pricing{margin-top:14px;}
.pricing > .wp-block-group__inner-container{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important; gap:20px;}
.price{border:1px solid var(--line); border-radius:20px; padding:32px;}
.price > .wp-block-group__inner-container{display:flex !important; flex-direction:column !important; height:100%;}
.price.feat{border-color:var(--gold); box-shadow:0 26px 60px -36px rgba(201,163,91,.7);}
.price .tier{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin:0;}
.price .amt{font-family:var(--display); font-weight:700; font-size:2.4rem; letter-spacing:-.02em; margin:14px 0 4px;}
.price .amt small{font-size:.9rem; font-weight:500; color:var(--muted);}
.price .note{font-size:.86rem; color:var(--muted); margin:0 0 18px;}
.price .ulx{margin-top:0; flex:1;}
.price .btn{margin-top:22px; justify-content:center;}

/* bandeau CTA */
.cta{background:var(--ink); color:#fff; border-radius:26px; padding:64px 48px; text-align:center; margin:40px auto;}
.cta h2{font-family:var(--display); font-weight:700; font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.03em; line-height:1.02;}
.cta h2 .gold{background:linear-gradient(180deg,#F3E2B3,#D8B978 55%,#C2A05A); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.cta p{color:rgba(255,255,255,.72); max-width:52ch; margin:18px auto 0;}
.cta .btn{margin-top:30px;}

/* note placeholder (contenu à ajuster par le client) */
.ph{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--gold-deep); background:rgba(201,163,91,.1); border:1px dashed rgba(201,163,91,.5); border-radius:10px; padding:10px 14px; display:inline-block; margin:18px 0 0;}

/* breadcrumbs schema wrapper (visuel identique à .crumbs) */
.breadcrumbs{ }

/* ===== contenu libre (éditeur de blocs : page.php, patterns NovaMoon) ===== */
.entry-content{ max-width:74ch; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:1.4em 0 .5em;
}
.entry-content h1{font-size:clamp(1.9rem,4vw,2.8rem);}
.entry-content h2{font-size:clamp(1.5rem,3vw,2.1rem);}
.entry-content h3{font-size:1.3rem;}
.entry-content p{margin:1em 0; color:var(--ink);}
.entry-content a{color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px;}
.entry-content ul, .entry-content ol{margin:1em 0 1em 1.4em;}
.entry-content li{margin:.4em 0; color:var(--ink);}
.entry-content img{border-radius:14px; margin:1.4em 0;}
.entry-content .wp-block-button__link{
  display:inline-flex; align-items:center; gap:.55ch; font-weight:600; font-size:.97rem;
  padding:14px 28px; border-radius:100px; text-decoration:none;
}
.entry-content .wp-block-button.is-style-novamoon-gold .wp-block-button__link{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#1c1407;
}
.entry-content .wp-block-columns.two{gap:54px;}

/* ===== footer ===== */
.site-footer{border-top:1px solid var(--line); padding:50px 0 40px;}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px;}
.foot .foot-label{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 16px;}
.foot a{display:block; font-size:.94rem; color:var(--ink); margin:8px 0;}
.foot a:hover{color:var(--gold-deep);}
.foot .brand{font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:-.02em;}
.foot .brand p{font-family:var(--body); font-weight:400; font-size:.92rem; color:var(--muted); margin-top:10px; max-width:30ch;}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:42px; padding-top:22px; border-top:1px solid var(--line); font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}

/* ===== reveal on scroll ===== */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}

/* ===== responsive ===== */
@media(max-width:860px){
  .nav-links{display:none;}
  .burger{display:block;}
  .two{grid-template-columns:1fr; gap:34px;}
  .foot{grid-template-columns:1fr 1fr;}
  section.blk{padding:60px 0;}
}
@media(max-width:520px){
  .foot{grid-template-columns:1fr;}
  .cta{padding:48px 26px;}
}
@media(prefers-reduced-motion:reduce){
  .reveal{transition:none; opacity:1; transform:none;}
  .burger span, .burger span::before, .burger span::after{transition:none;}
}