/* ==========================================================================
   CANOPUS — feuille de style du site public
   Pilotée par thèmes : [data-theme="light"] (défaut), "dark", "black"
   Tout le contenu texte vient de data/content.json, géré depuis /admin
   ========================================================================== */

:root{
  --ink:#1e3a5f; --gold:#8c6a3f; --olive:#5a6470; --stone:#f2f4f6;
  --line:#c9d1d9; --text:#1a1a1a; --bg:#ffffff; --surface:#ffffff;
  --muted:#5a6470; --lead:#3a3a3a; --card-text:#444444;
  --header-bg:rgba(255,255,255,.92); --btn-primary-text:#ffffff;
  --star-watermark-opacity:.05; --star-case-opacity:.08;
}

html[data-theme="dark"]{
  --ink:#f3f6fa; --gold:#d8b988; --olive:#93a3b8; --stone:#132238;
  --line:rgba(255,255,255,.14); --text:#dde4ec; --bg:#0f1b2d; --surface:#152944;
  --muted:#93a3b8; --lead:#c3ccd6; --card-text:#c3ccd6;
  --header-bg:rgba(15,27,45,.86); --btn-primary-text:#0f1b2d;
  --star-watermark-opacity:.07; --star-case-opacity:.10;
}

html[data-theme="black"]{
  --ink:#f2f2f2; --gold:#cf9f5f; --olive:#9a9a9a; --stone:#0c0c0c;
  --line:rgba(255,255,255,.14); --text:#e6e6e6; --bg:#000000; --surface:#0d0d0d;
  --muted:#9a9a9a; --lead:#c9c9c9; --card-text:#c9c9c9;
  --header-bg:rgba(0,0,0,.88); --btn-primary-text:#000000;
  --star-watermark-opacity:.06; --star-case-opacity:.09;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; color:var(--text); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased; transition:background .3s ease, color .3s ease;}
h1,h2,h3{font-family:var(--content-font, Georgia,"Times New Roman",serif); color:var(--content-color, var(--ink)); margin:0 0 .5em; font-weight:var(--content-weight, 400); font-style:var(--content-fstyle, normal); letter-spacing:.2px;}
p{margin:0 0 1em; color:var(--content-color, var(--card-text)); font-family:var(--content-font, inherit); font-weight:var(--content-weight, normal); font-style:var(--content-fstyle, normal);}
a{color:var(--ink);}
.container{max-width:1120px; margin:0 auto; padding:0 32px;}

.reveal{opacity:1;}
html.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease;}
html.js .reveal.in{opacity:1; transform:translateY(0);}

header{position:sticky; top:0; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid transparent; z-index:50; transition:border-color .3s ease, background .3s ease;}
header.scrolled{border-bottom-color:var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:22px 0;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand svg{width:30px; height:30px; flex:none;}
.brand-logo-img{width:30px; height:30px; object-fit:contain; flex:none;}
.brand .name{font-family:Georgia,serif; font-weight:700; font-size:21px; color:var(--ink); letter-spacing:2px;}
nav.links ul{list-style:none; display:flex; gap:40px; margin:0; padding:0;}
nav.links a{text-decoration:none; font-size:13.5px; color:var(--muted); font-weight:500; letter-spacing:.3px; position:relative; padding-bottom:3px;}
nav.links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ink);transition:width .25s ease;}
nav.links a:hover{color:var(--ink);}
nav.links a:hover::after{width:100%;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 26px; border-radius:100px; font-weight:600; font-size:13.5px; text-decoration:none; letter-spacing:.3px; transition:all .25s ease;}
.btn-primary{background:var(--ink); color:var(--btn-primary-text);}
.btn-primary:hover{opacity:.88; transform:translateY(-1px);}
.btn-outline{border:1px solid var(--line); color:var(--ink);}
.btn-outline:hover{border-color:var(--ink); background:var(--stone);}
.btn-ghost{color:var(--ink); font-weight:600; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:6px;}
.btn-ghost .arrow{transition:transform .25s ease;}
.btn-ghost:hover .arrow{transform:translateX(4px);}

.hero{position:relative; padding:130px 0 120px; overflow:hidden;}
.hero-star{position:absolute; top:50%; right:-140px; width:640px; height:640px; transform:translateY(-50%); opacity:var(--star-watermark-opacity); color:var(--ink); pointer-events:none; animation:spin 140s linear infinite;}
@keyframes spin{from{transform:translateY(-50%) rotate(0deg);} to{transform:translateY(-50%) rotate(360deg);}}
.hero-inner{position:relative; z-index:1; max-width:680px;}
.kicker{color:var(--gold); font-weight:700; letter-spacing:2.5px; font-size:12px; text-transform:uppercase; margin-bottom:22px;}
.hero h1{font-size:calc(46px * var(--content-scale, 1)); line-height:1.22; max-width:660px;}
.hero p.lead{font-size:calc(17.5px * var(--content-scale, 1)); color:var(--content-color, var(--lead)); max-width:560px; margin-top:22px;}
.hero .cta{margin-top:38px; display:flex; gap:18px; align-items:center; flex-wrap:wrap;}

section{padding:104px 0;}
section.bordered{border-top:1px solid var(--line);}
.section-head{max-width:620px; margin-bottom:56px;}
.section-head h2{font-size:calc(32px * var(--content-scale, 1));}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.card{background:var(--surface); padding:40px 34px;}
.card .num{font-family:Georgia,serif; font-size:15px; color:var(--gold); margin-bottom:22px;}
.card h3{font-size:calc(19px * var(--content-scale, 1)); font-family:var(--content-font, Georgia,serif); font-weight:var(--content-weight, 700); font-style:var(--content-fstyle, normal); color:var(--content-color, var(--ink)); margin-bottom:12px;}
.card p{font-size:calc(14.5px * var(--content-scale, 1)); color:var(--content-color, var(--card-text)); margin:0;}

.studio-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start;}
.studio-grid > div > p{font-size:calc(16px * var(--content-scale, 1)); max-width:460px;}
.why-list{border-top:1px solid var(--line);}
.why{display:grid; grid-template-columns:56px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid var(--line);}
.why .idx{font-family:Georgia,serif; color:var(--gold); font-size:14px; padding-top:2px;}
.why strong{color:var(--content-color, var(--ink)); display:block; font-size:calc(15.5px * var(--content-scale, 1)); margin-bottom:4px; font-weight:var(--content-weight, 600);}
.why p{margin:0; font-size:calc(14px * var(--content-scale, 1)); color:var(--content-color, var(--card-text));}

.case{position:relative; background:var(--ink); border-radius:4px; overflow:hidden; padding:64px; color:var(--bg);}
html[data-theme="dark"] .case, html[data-theme="black"] .case{background:var(--surface); color:var(--text);}
.case-star{position:absolute; right:-60px; bottom:-80px; width:340px; height:340px; opacity:var(--star-case-opacity); color:var(--bg); pointer-events:none;}
html[data-theme="dark"] .case-star, html[data-theme="black"] .case-star{color:var(--gold);}
.case-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.status-pill{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:5px 13px; border-radius:100px; background:rgba(128,128,128,.22); color:inherit; margin-bottom:20px;}
.case .name-fr{font-family:var(--content-font, Georgia,serif); font-weight:var(--content-weight, 700); font-size:calc(30px * var(--content-scale, 1)); color:var(--content-color, inherit);}
.case .name-ar{font-size:16px; color:var(--gold); direction:rtl; margin-top:4px; font-family:Georgia,serif;}
.case .quote{margin-top:18px; font-size:calc(14px * var(--content-scale, 1)); opacity:.75; font-style:var(--content-fstyle, italic);}
.stat{margin-top:32px;}
.stat .n{font-family:Georgia,serif; font-size:28px; font-weight:700; color:inherit;}
.stat .l{font-size:12px; opacity:.65; margin-top:2px;}
.case-text p{color:var(--content-color, inherit); opacity:.85; font-size:calc(15px * var(--content-scale, 1));}
.case-text .btn-ghost{color:inherit;}
.soon{margin-top:28px; padding-top:28px; border-top:1px solid var(--line); color:var(--muted); font-size:13.5px; font-style:italic;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
.contact-grid h2{font-size:calc(32px * var(--content-scale, 1));}
.contact-grid .direct{margin-top:28px;}
.contact-grid .direct a{display:block; font-family:Georgia,serif; font-size:20px; color:var(--ink); text-decoration:none; margin-bottom:6px;}
.contact-grid .direct a:hover{color:var(--gold);}
form.contact{display:grid; gap:26px;}
.field label{display:block; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.field input, .field textarea{width:100%; border:none; border-bottom:1px solid var(--line); padding:8px 0; font:inherit; font-size:15px; background:transparent; color:var(--text); resize:none;}
.field input:focus, .field textarea:focus{outline:none; border-bottom-color:var(--ink);}
form.contact button{justify-self:start; border:none; cursor:pointer;}

.freehtml{max-width:760px;}

footer{padding:48px 0; border-top:1px solid var(--line);}
.foot-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.foot-brand{display:flex; align-items:center; gap:10px;}
.foot-brand svg{width:20px; height:20px;}
.foot-brand .brand-logo-img{width:20px; height:20px;}
.foot-brand span{font-family:Georgia,serif; font-weight:700; font-size:15px; color:var(--ink); letter-spacing:1.5px;}
.foot-links{display:flex; gap:28px; font-size:13px;}
.foot-links a{color:var(--muted); text-decoration:none;}
.foot-links a:hover{color:var(--ink);}
.legal{font-size:11.5px; color:var(--muted); opacity:.8; margin-top:22px; line-height:1.6;}

@media (max-width:860px){
  nav.links{display:none;}
  .hero h1{font-size:calc(32px * var(--content-scale, 1));}
  .hero-star{width:420px; height:420px; right:-160px;}
  .cards{grid-template-columns:1fr;}
  .studio-grid{grid-template-columns:1fr; gap:40px;}
  .case{padding:36px 28px;}
  .case-grid{grid-template-columns:1fr; gap:36px;}
  .contact-grid{grid-template-columns:1fr; gap:44px;}
  section{padding:72px 0;}
  .container{padding:0 22px;}
}