/* =====================================================================
   GHASSANOVA · socle commun à toutes les pages
   Polices : Archivo (titres), Instrument Serif (accents), Sora (texte),
   JetBrains Mono (repères). Animations : transform et opacity seulement.
   ===================================================================== */
:root{
  --bg:#060708;--bg-2:#0B0D10;--bg-3:#12151A;
  --ink:#EAE8E3;--ink-dim:#A6A9AE;--ink-faint:#7C838E;
  --mint:#2BF0C4;--mint-d:#12A583;--violet:#9D6BFF;--violet-d:#6B3FD4;
  --line:rgba(234,232,227,.10);--line-2:rgba(234,232,227,.18);
  --f-display:"Archivo","Archivo Fallback",system-ui,sans-serif;
  --f-serif:"Instrument Serif","Times New Roman",serif;
  --f-body:"Sora",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --gut:clamp(1.1rem,4vw,3.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  --hdr:64px;
}
@font-face{font-family:"Archivo Fallback";src:local("Arial");size-adjust:118%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--mint);color:#04120E}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--mint);color:#04120E;padding:.8rem 1.2rem;font-family:var(--f-mono);font-size:.8rem}
.skip:focus{left:0}
.mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.sf{font-family:var(--f-serif);font-weight:400;font-stretch:100%;letter-spacing:-.01em;color:var(--mint)}

/* ---------- boutons ---------- */
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.85rem 1.3rem;border-radius:10px;border:1px solid transparent;
  background:var(--mint);color:#04120E;text-decoration:none;font-family:var(--f-mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:background-color .18s,color .18s,border-color .18s}
.gbtn:hover{background:var(--ink);color:#060708}
.gbtn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.gbtn.ghost:hover{border-color:var(--mint);color:var(--mint)}
.gbtn svg{width:12px;height:12px;flex:none}

/* ---------- en-tête ---------- */
.gh{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0 var(--gut);
  background:rgba(6,7,8,.82);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(8px)){.gh{background:rgba(6,7,8,.62);backdrop-filter:blur(12px)}}
.gh-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.gh-brand svg{width:30px;height:30px;flex:none}
.gh-brand b{font-family:var(--f-display);font-weight:800;font-stretch:118%;text-transform:uppercase;font-size:.95rem;letter-spacing:-.01em}
.gh-brand i{font-style:normal;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.3em;color:var(--mint);align-self:flex-end;padding-bottom:.2rem}
.gh-nav{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.9rem)}
.gh-nav>a,.gh-dd>button{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;background:none;border:0;padding:.6rem 0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;transition:color .18s}
.gh-nav>a:hover,.gh-dd>button:hover,.gh-nav>a[aria-current="page"],.gh-dd.is-here>button{color:var(--ink)}
.gh-nav>a[aria-current="page"]{color:var(--mint)}
.gh-dd{position:relative}
.gh-dd>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s}
.gh-dd.open>button::after{transform:translateY(1px) rotate(-135deg)}
.gh-panel{position:absolute;top:calc(100% + 6px);left:50%;min-width:260px;padding:1rem;border:1px solid var(--line-2);border-radius:14px;background:#0B0D10;
  opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .18s,transform .18s,visibility .18s;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.gh-dd:hover>.gh-panel,.gh-dd:focus-within>.gh-panel,.gh-dd.open>.gh-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.gh-panel.wide{display:grid;grid-template-columns:repeat(2,minmax(190px,1fr));gap:.2rem 1.4rem;min-width:460px}
.gh-panel.xl{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:.2rem 1.4rem;min-width:620px;left:auto;right:-120px;transform:translateY(-6px)}
.gh-dd:hover>.gh-panel.xl,.gh-dd:focus-within>.gh-panel.xl,.gh-dd.open>.gh-panel.xl{transform:none}
.gh-panel a{display:block;padding:.5rem .6rem;border-radius:8px;font-family:var(--f-body);font-weight:400;font-size:.9rem;color:var(--ink-dim);text-decoration:none;transition:color .15s,background-color .15s}
.gh-panel a:hover{color:var(--ink);background:rgba(234,232,227,.06)}
.gh-panel .gh-cap{grid-column:1/-1;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);padding:.5rem .6rem .2rem}
.gh-cta{flex:none}
.gh-burger{display:none;width:46px;height:46px;border:1px solid var(--line-2);border-radius:999px;background:none;cursor:pointer;position:relative;flex:none}
.gh-burger span{position:absolute;left:13px;width:18px;height:1.5px;background:var(--ink);transition:transform .2s var(--ease)}
.gh-burger span:nth-child(1){top:19px}.gh-burger span:nth-child(2){top:25px}
.gh-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.gh-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* menu mobile : panneau plein écran, sections repliables natives (details) */
.gm{position:fixed;inset:var(--hdr) 0 0 0;z-index:99;background:#060708;overflow-y:auto;padding:1.2rem var(--gut) 2.5rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
.gm.open{opacity:1;visibility:visible;transform:none}
.gm>a,.gm summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-family:var(--f-display);font-weight:800;font-stretch:114%;text-transform:uppercase;font-size:1.35rem;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);cursor:pointer;list-style:none}
.gm summary::-webkit-details-marker{display:none}
.gm summary::after{content:"+";font-family:var(--f-mono);font-weight:400;font-size:1.2rem;color:var(--mint)}
.gm details[open] summary::after{content:"−"}
.gm details>div{padding:.6rem 0 1rem;display:grid;gap:.1rem}
.gm details a{display:block;padding:.7rem 0;font-family:var(--f-body);font-size:1rem;color:var(--ink-dim);text-decoration:none}
.gm details .gh-cap{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);padding:.8rem 0 .2rem}
.gm .gbtn{width:100%;margin-top:1.4rem}
@media(max-width:980px){
  .gh-nav,.gh-cta{display:none}
  .gh-burger{display:block}
}
@media(min-width:981px){.gm{display:none}}

/* ---------- pied de page ---------- */
.gf{border-top:1px solid var(--line);background:#07090B;padding:clamp(3rem,7vw,5rem) var(--gut) 2rem}
.gf-top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:2.5rem 2rem;max-width:1400px;margin:0 auto}
.gf-brand p{font-size:.92rem;color:var(--ink-dim);max-width:34ch;margin-top:1rem}
.gf-brand .gbtn{margin-top:1.4rem}
.gf h2{font-family:var(--f-mono);font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);margin-bottom:.9rem}
.gf li a{display:inline-block;padding:.32rem 0;font-size:.9rem;color:var(--ink-dim);text-decoration:none;transition:color .15s}
.gf li a:hover{color:var(--ink)}
.gf-col h2:not(:first-child){margin-top:1.6rem}
.gf-base{max-width:1400px;margin:2.5rem auto 0;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.gf-base a{color:inherit;text-decoration:none}.gf-base a:hover{color:var(--mint)}
@media(max-width:1000px){.gf-top{grid-template-columns:1fr 1fr}.gf-brand{grid-column:1/-1}}
@media(max-width:520px){.gf-top{grid-template-columns:1fr}}

/* ---------- pages de contenu (mots-clés) ---------- */
.kp{padding-top:var(--hdr)}
.kp-crumb{padding:1.2rem var(--gut) 0;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;color:var(--ink-faint);max-width:1400px;margin:0 auto}
.kp-crumb a{color:var(--ink-dim);text-decoration:none}.kp-crumb a:hover{color:var(--mint)}
.kp-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;max-width:1400px;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) var(--gut) clamp(2.5rem,6vw,4.5rem)}
.kp-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);margin-bottom:1.1rem}
.kp-eyebrow img{width:22px;height:22px}
.kp h1{font-family:var(--f-display);font-weight:800;font-stretch:112%;text-transform:uppercase;font-size:clamp(1.9rem,4.3vw,3.5rem);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.kp-lede{font-size:clamp(1.02rem,1.3vw,1.18rem);color:#D4D2CD;margin-top:1.4rem;max-width:56ch}
.kp-points{display:grid;gap:.5rem;margin-top:1.4rem}
.kp-points li{display:flex;align-items:flex-start;gap:.6rem;font-size:.95rem;color:var(--ink-dim)}
.kp-points li::before{content:"";flex:none;width:16px;height:16px;margin-top:.25rem;border-radius:50%;background:var(--mint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.kp-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.kp-fig{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/11;background:var(--bg-3);border:1px solid var(--line)}
.kp-fig img{width:100%;height:100%;object-fit:cover}
.kp-fig figcaption{position:absolute;left:.8rem;bottom:.8rem;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(6,7,8,.72);padding:.35rem .55rem;border-radius:6px}
.kp-body{max-width:1400px;margin:0 auto;padding:0 var(--gut) clamp(3rem,7vw,5rem);display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2rem,5vw,5rem);align-items:start}
.kp-main>section+section,.kp-main>*+section,.kp-main>section+*{margin-top:clamp(2.2rem,5vw,3.4rem)}
.kp h2{font-family:var(--f-display);font-weight:800;font-stretch:110%;font-size:clamp(1.35rem,2.4vw,1.95rem);line-height:1.1;letter-spacing:-.02em;text-wrap:balance;margin-bottom:1rem}
.kp-main p{color:#CFCDC8;max-width:68ch}
.kp-main p+p{margin-top:1rem}
.kp-main a{color:var(--mint);text-underline-offset:.2em}
.kp-main strong{font-weight:500;color:var(--ink)}
.kp-list{display:grid;gap:.6rem;margin-top:1.1rem;max-width:68ch}
.kp-list li{position:relative;padding-left:1.4rem;color:#CFCDC8}
.kp-list li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1.5px;background:var(--mint)}
.kp-img{border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--bg-3)}
.kp-img img{width:100%;height:100%;object-fit:cover}
/* visuels statiques */
.kp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.kp-steps li{background:var(--bg-2);padding:1.2rem 1.1rem}
.kp-steps img{width:38px;height:38px;margin-bottom:.7rem}
.kp-steps b{display:block;font-family:var(--f-display);font-weight:800;font-stretch:110%;text-transform:uppercase;font-size:.95rem;letter-spacing:-.01em}
.kp-steps span{display:block;font-size:.84rem;color:var(--ink-dim);margin-top:.3rem;line-height:1.45}
.kp-proof{border:1px solid var(--line-2);border-radius:14px;padding:1.4rem;background:linear-gradient(160deg,rgba(43,240,196,.07),rgba(157,107,255,.05))}
.kp-proof .mono{color:var(--mint)}
.kp-proof dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1rem 0 .8rem}
.kp-proof dt{font-size:.78rem;color:var(--ink-dim);order:2}
.kp-proof dd{margin:0;font-family:var(--f-display);font-weight:800;font-stretch:110%;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.02em;line-height:1}
.kp-proof dl>div{display:flex;flex-direction:column;gap:.3rem}
.kp-proof p{font-size:.8rem;color:var(--ink-faint);max-width:none}
.kp-keep{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.kp-keep li{border:1px solid var(--line);border-radius:14px;padding:1.1rem;background:var(--bg-2)}
.kp-keep img{width:34px;height:34px;margin-bottom:.6rem}
.kp-keep b{display:block;font-weight:500;color:var(--ink);font-size:.95rem}
.kp-keep span{display:block;font-size:.84rem;color:var(--ink-dim);margin-top:.25rem;line-height:1.45}
/* FAQ native */
.kp-faq details{border-bottom:1px solid var(--line)}
.kp-faq summary{display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:56px;padding:.6rem 0;cursor:pointer;list-style:none;font-family:var(--f-body);font-weight:500;font-size:1rem;color:var(--ink)}
.kp-faq summary::-webkit-details-marker{display:none}
.kp-faq summary::after{content:"+";font-family:var(--f-mono);color:var(--mint);font-size:1.1rem;flex:none}
.kp-faq details[open] summary::after{content:"−"}
.kp-faq details p{padding:0 0 1.1rem}
/* colonne latérale */
.kp-side{position:sticky;top:calc(var(--hdr) + 1.2rem);display:grid;gap:1rem}
.kp-card{border:1px solid var(--line-2);border-radius:16px;padding:1.3rem;background:var(--bg-2)}
.kp-card h2{font-size:1.15rem;margin-bottom:.5rem}
.kp-card p{font-size:.9rem;color:var(--ink-dim)}
.kp-card .gbtn{width:100%;margin-top:1rem}
.kp-card .who{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem}
.kp-card .who img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.kp-card .who b{display:block;font-weight:500;font-size:.95rem}
.kp-card .who span{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.kp-certs{display:grid;gap:.45rem;margin-top:.4rem}
.kp-certs li{font-size:.84rem;color:var(--ink-dim);display:flex;gap:.5rem}
.kp-certs li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-top:.55em}
/* appel final + pages liées */
.kp-cta{margin:0 var(--gut);max-width:1400px;border:1px solid rgba(43,240,196,.4);border-radius:22px;padding:clamp(1.8rem,5vw,3.5rem);background:#0B0D10;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 3rem;align-items:center}
@media(min-width:1500px){.kp-cta{margin:0 auto}}
.kp-cta h2{font-size:clamp(1.5rem,3.2vw,2.6rem);text-transform:uppercase;font-stretch:114%;margin:0}
.kp-cta p{color:var(--ink-dim);margin-top:.7rem;max-width:56ch}
.kp-cta-act{display:flex;flex-direction:column;gap:.7rem}
.kp-rel{max-width:1400px;margin:0 auto;padding:clamp(2.5rem,6vw,4rem) var(--gut)}
.kp-rel ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem;margin-top:1rem}
.kp-rel a{display:flex;justify-content:space-between;align-items:center;gap:.8rem;min-height:60px;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:12px;text-decoration:none;font-size:.95rem;color:var(--ink);background:var(--bg-2);transition:border-color .18s,color .18s}
.kp-rel a:hover{border-color:var(--mint);color:var(--mint)}
.kp-rel a::after{content:"↗";font-family:var(--f-mono);color:var(--mint)}
@media(max-width:1000px){
  .kp-hero{grid-template-columns:1fr}
  .kp-body{grid-template-columns:1fr}
  .kp-side{position:static;grid-template-columns:1fr}
  .kp-cta{grid-template-columns:1fr}
  .kp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kp-proof dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kp-keep{grid-template-columns:1fr}
}
@media(max-width:520px){.kp-actions .gbtn{width:100%}}

/* apparition discrète (IntersectionObserver, 250 ms, transform + opacity) */
html.js-on .rv{opacity:0;transform:translateY(16px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
html.js-on .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html.js-on .rv{opacity:1;transform:none}
}

/* ---------- mobile : listes de villes sur deux colonnes, zones de toucher confortables ---------- */
@media(max-width:980px){
  .gm details>div{grid-template-columns:1fr 1fr;column-gap:1rem}
  .gm details .gh-cap{grid-column:1/-1}
}
@media(max-width:520px){
  .gf-col ul{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem}
  .gf li a{display:block;padding:.62rem 0;font-size:.95rem}
}

/* ---------- pages de services et FAQ : mêmes accents que la page à propos ---------- */
.gp h1 .mint,.gp h2 .mint,.gp h1 em,.gp h2 em{font-family:var(--f-serif);font-weight:400;font-stretch:100%;font-style:normal;letter-spacing:-.01em}
/* pages de services et FAQ : contenu lisible sans JavaScript, premier écran sans entrée animée, apparitions courtes */
html.gp:not(.js-on) [data-r]{opacity:1;transform:none}
html.gp.js-on [data-r]{transform:translateY(16px);transition-duration:.28s}
html.gp.js-on [data-r].in{transform:none}
html.gp .hero-left h1 .line>span{transform:none;animation:none}
html.gp .hero-left .hl-lede,html.gp .hero-cta,html.gp .hero-right,html.gp .hero-stats{opacity:1;animation:none}
html.gp .rv,html.gp .rv2,html.gp .rv3{opacity:1;transform:none;transition:none}
html.gp:not(.js-on) .presta,html.gp:not(.js-on) .sc,html.gp:not(.js-on) .lp-res.r1,html.gp:not(.js-on) .cr-card,html.gp:not(.js-on) .owp-t,html.gp:not(.js-on) .owp-d,html.gp:not(.js-on) .owp-lbl,html.gp:not(.js-on) .owp-f,html.gp:not(.js-on) .card{opacity:1;transform:none}