/*
Theme Name: Chris Art Academy
Theme URI: https://chrisartacademy.fr
Author: Chris Art Academy
Description: Thème sur-mesure pour la plateforme de formation en tatouage Chris Art Academy.
Version: 1.0
Text Domain: chris-art-academy
*/

:root{
  --ink: #100D0C;
  --ink-soft: #1B1614;
  --paper: #EFE7D8;
  --paper-dim: #C9BEA6;
  --blood: #8A1F1B;
  --blood-bright: #B23A2C;
  --gold: #C7A24A;
  --line: rgba(239,231,216,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Archivo', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--blood); color:var(--paper);}
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.wrap{ max-width:1140px; margin:0 auto; padding:0 28px;}
.eyebrow{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:700; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--gold); display:inline-block;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 30px; font-weight:700; font-size:14px; letter-spacing:.03em;
  border-radius:2px; cursor:pointer; border:1px solid transparent; transition:all .25s ease;
  font-family:'Archivo', sans-serif;
}
.btn-primary{ background:var(--blood); color:var(--paper);}
.btn-primary:hover{ background:var(--blood-bright); transform:translateY(-1px);}
.btn-ghost{ border-color:var(--line); color:var(--paper);}
.btn-ghost:hover{ border-color:var(--paper); }

/* NAV */
header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(16,13,12,0.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav{ display:flex; align-items:center; justify-content:space-between; padding:20px 28px; max-width:1140px; margin:0 auto;}
.logo{ font-family:'Fraunces', serif; font-weight:700; font-size:19px; letter-spacing:.01em;}
.logo span{ color:var(--gold);}
.navlinks{ display:flex; gap:34px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; font-weight:600;}
.navlinks a{ opacity:.75; transition:opacity .2s;}
.navlinks a:hover{ opacity:1;}
.nav-cta{ display:flex; align-items:center; gap:20px;}
@media(max-width:820px){ .navlinks{display:none;} }

/* HERO */
.hero{
  position:relative; padding:190px 0 120px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.1) 70%),
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(90,20,17,0.30), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 100%, rgba(140,113,45,0.08), transparent 60%),
    var(--ink);
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; position:relative; z-index:1;}
@media(max-width:900px){ .hero-grid{ grid-template-columns:1fr;} }
.hero .eyebrow{ color:#E0B95C; text-shadow:0 2px 12px rgba(0,0,0,0.6);}
.hero h1{ font-size:clamp(40px,6vw,68px); line-height:1.03; margin:22px 0 26px; color:#FBF7EE; text-shadow:0 2px 18px rgba(0,0,0,0.5);}
.hero h1 em{ font-style:italic; color:#D9B65C; font-weight:500;}
.hero p.lede{ font-size:18px; line-height:1.6; color:#DCD3BF; max-width:520px; margin-bottom:38px; text-shadow:0 1px 10px rgba(0,0,0,0.4);}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap;}

.needle-art{ position:relative; height:520px;}
.needle-svg{ width:100%; height:100%;}
.needle-path{
  fill:none; stroke:var(--paper); stroke-width:1.4; opacity:.85;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:draw 2.6s ease forwards .3s;
}
.needle-path.red{ stroke:var(--blood-bright); stroke-width:2;}
@keyframes draw{ to{ stroke-dashoffset:0;} }
@media (prefers-reduced-motion: reduce){
  .needle-path{ animation:none; stroke-dashoffset:0;}
}

.stat-row{ display:flex; gap:44px; margin-top:56px; padding-top:36px; border-top:1px solid var(--line); flex-wrap:wrap;}
.stat b{ font-family:'Fraunces', serif; font-size:30px; display:block; color:var(--gold); font-weight:600;}
.stat span{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--paper-dim);}

section{ padding:120px 0;}
.section-head{ max-width:640px; margin-bottom:64px;}
.section-head h2{ font-size:clamp(30px,4vw,44px); margin-top:16px; line-height:1.1;}
.section-head p{ color:var(--paper-dim); margin-top:16px; font-size:16px; line-height:1.6;}

/* FORMATIONS */
.levels{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);}
.level{
  background:var(--ink); padding:48px 44px; display:grid; grid-template-columns:200px 1fr; gap:40px; align-items:start;
  transition:background .3s ease;
}
.level:hover{ background:var(--ink-soft);}
@media(max-width:760px){ .level{ grid-template-columns:1fr; gap:18px;} }
.level-tag{ display:flex; flex-direction:column; gap:6px;}
.level-num{ font-family:'Fraunces', serif; font-size:60px; color:transparent; -webkit-text-stroke:1px var(--line); line-height:.8;}
.level-name{ font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-top:10px;}
.level-title{ font-size:24px; font-family:'Fraunces',serif; font-weight:600;}
.level-items{ display:grid; grid-template-columns:1fr 1fr; gap:10px 30px; margin-top:20px; padding:0;}
@media(max-width:520px){ .level-items{ grid-template-columns:1fr;} }
.level-items li{ font-size:15px; color:var(--paper-dim); padding-left:18px; position:relative;}
.level-items li::before{ content:"—"; position:absolute; left:0; color:var(--blood-bright);}

/* BONUS */
.bonus-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media(max-width:900px){ .bonus-grid{ grid-template-columns:repeat(2,1fr);} }
.bonus-item{ background:var(--ink); padding:34px 24px; text-align:left;}
.bonus-item .ic{ font-size:22px; margin-bottom:18px; color:var(--gold);}
.bonus-item h4{ font-size:14px; font-weight:700; line-height:1.4;}

/* MEMBER SPACE */
.member-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:center;}
@media(max-width:900px){ .member-wrap{ grid-template-columns:1fr;} }
.member-list{ display:flex; flex-direction:column; gap:22px;}
.member-list li{ display:flex; gap:16px; align-items:flex-start; font-size:16px;}
.member-list .n{ font-family:'Fraunces',serif; color:var(--gold); font-size:14px; min-width:22px;}
.mock{
  background:var(--ink-soft); border:1px solid var(--line); border-radius:6px; padding:30px;
}
.mock-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px;}
.mock-top span{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--paper-dim);}
.bar-bg{ height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin-top:8px;}
.bar-fill{ height:100%; background:linear-gradient(90deg,var(--blood),var(--gold));}
.mock-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-top:1px solid var(--line); font-size:14px;}
.mock-row:first-of-type{ border-top:none;}
.pct{ font-family:'Fraunces',serif; color:var(--gold); font-weight:600;}

/* PRICING */
.price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
@media(max-width:760px){ .price-grid{ grid-template-columns:1fr;} }
.price-card{ background:var(--ink); padding:52px 44px; display:flex; flex-direction:column;}
.price-card.feat{ background:var(--ink-soft); position:relative;}
.price-card.feat::before{
  content:"Le plus choisi"; position:absolute; top:0; right:44px; transform:translateY(-50%);
  background:var(--blood); color:var(--paper); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 14px; font-weight:700;
}
.price-name{ font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--paper-dim); font-weight:700;}
.price-value{ font-family:'Fraunces',serif; font-size:56px; margin:18px 0 6px; font-weight:600;}
.price-value sup{ font-size:20px; top:-22px; position:relative; margin-right:4px;}
.price-sub{ color:var(--paper-dim); font-size:14px; margin-bottom:30px;}
.price-feats{ display:flex; flex-direction:column; gap:12px; margin-bottom:36px; flex:1;}
.price-feats li{ font-size:14px; padding-left:20px; position:relative; color:var(--paper);}
.price-feats li::before{ content:"✓"; position:absolute; left:0; color:var(--gold);}

/* TESTIMONIALS */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:900px){ .testi-grid{ grid-template-columns:1fr;} }
.testi-card{ border:1px solid var(--line); padding:32px; display:flex; flex-direction:column; gap:18px;}
.stars{ color:var(--gold); letter-spacing:3px; font-size:15px;}
.testi-card p{ font-size:16px; line-height:1.6; font-family:'Fraunces',serif; font-style:italic; font-weight:500;}
.testi-name{ font-size:13px; color:var(--paper-dim); text-transform:uppercase; letter-spacing:.05em; margin-top:auto;}

/* FAQ */
.faq-item{ border-bottom:1px solid var(--line);}
.faq-q{
  display:flex; justify-content:space-between; align-items:center; padding:26px 0; cursor:pointer;
  font-size:17px; font-weight:600; font-family:'Fraunces',serif; background:none; border:none; width:100%; text-align:left; color:var(--paper);
}
.faq-q .plus{ font-size:20px; color:var(--gold); transition:transform .3s ease; font-weight:400;}
.faq-item.open .plus{ transform:rotate(45deg);}
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{ padding-bottom:26px; color:var(--paper-dim); font-size:15px; line-height:1.6; max-width:600px;}

/* CTA band */
.cta-band{ background:var(--blood); padding:90px 0; text-align:center;}
.cta-band h2{ font-size:clamp(30px,4.5vw,46px); margin-bottom:24px;}
.cta-band p{ color:rgba(239,231,216,0.85); margin-bottom:36px; font-size:16px;}
.cta-band .btn-ghost{ border-color:rgba(239,231,216,0.4); }
.cta-band .btn-ghost:hover{ border-color:var(--paper);}
.cta-band .btn-primary{ background:var(--ink); }
.cta-band .btn-primary:hover{ background:#000; }

.site-footer{ padding:60px 0 40px; border-top:1px solid var(--line);}
.foot-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; align-items:center;}
.foot-links{ display:flex; gap:26px; font-size:13px; color:var(--paper-dim);}
.foot-copy{ font-size:13px; color:var(--paper-dim); margin-top:30px;}