:root{
    --ink:#1F262B;
    --ink-soft:#2A3339;
    --signal:#E23D28;
    --signal-dark:#B72E1D;
    --mist:#EDEEEC;
    --mist-dim:#E1E3E0;
    --stone:#7C8388;
    --stone-dark:#575D61;
    --trail:#4C5A3F;
    --trail-light:#7C8F63;
    --line: rgba(237,238,236,0.14);
    --radius: 4px;
    --max: 1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    background:var(--mist);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
.mono{font-family:'IBM Plex Mono',monospace;}

.brand-word{
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-variation-settings:'wdth' 125;
    letter-spacing:0.5px;
    text-transform:uppercase;
}
h1,h2,h3{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-variation-settings:'wdth' 110;
    letter-spacing:-0.01em;
    line-height:1.05;
    margin:0;
}

:focus-visible{outline:3px solid var(--signal);outline-offset:2px;}

/* ---------- NAV ---------- */
header.site{
    position:sticky;top:0;z-index:50;
    background:rgba(31,38,43,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
}
nav.wrap{
    display:flex;align-items:center;justify-content:space-between;
    height:74px;
}
.logo-link{display:flex;align-items:center;gap:10px;}
.logo-link img{height:34px;width:34px;}
.logo-link span{
    font-size:39px;
}
.cairn{
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-variation-settings:'wdth' 125;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:var(--mist);
}
.nav{
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-variation-settings:'wdth' 125;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:var(--signal);
    margin-left: -30px;
}
.mobile-panel{display:contents;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
    color:var(--mist-dim);
    font-size:14.5px;
    font-weight:500;
    transition:color .15s ease;
}
.nav-links a:hover{color:var(--mist);}
.nav-actions{display:flex;align-items:center;gap:14px;}
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 22px;
    border-radius:var(--radius);
    font-weight:600;
    font-size:14.5px;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn-sm{
    margin-top: 10px;
    padding:3px 11px;
}
.btn:active{transform:translateY(1px);}
.btn-signal{background:var(--signal);color:#fff;}
.btn-signal:hover{background:var(--signal-dark);}
.btn-ghost{border-color:rgba(237,238,236,0.3);color:var(--mist);}
.btn-ghost:hover{border-color:var(--mist);}
.btn-dark{background:var(--ink);color:var(--mist);}
.btn-dark:hover{background:var(--ink-soft);}
.nav-toggle{display:none;background:none;border:0;color:var(--mist);font-size:26px;cursor:pointer;}

/* ---------- HERO ---------- */
.hero{
    position:relative;
    background:var(--ink);
    color:var(--mist);
    overflow:hidden;
    padding:96px 0 0;
}
.topo{
    position:absolute;inset:0;
    opacity:0.5;
    pointer-events:none;
}
.hero-grid{
    position:relative;z-index:2;
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:40px;
    align-items:center;
}
.eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--trail-light);
    border:1px solid rgba(124,143,99,0.4);
    padding:6px 12px;
    border-radius:100px;
    margin-bottom:24px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--trail-light);}
.dotRed{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--signal);
}
.hero h1{
    font-size:clamp(40px,5.4vw,68px);
    color:var(--mist);
}
.hero h1 em{
    font-style:normal;
    color:var(--signal);
}
.hero p.lead{
    margin:26px 0 34px;
    font-size:18px;
    line-height:1.6;
    color:var(--mist-dim);
    max-width:46ch;
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px;}
.hero-stats{
    display:flex;gap:34px;
    border-top:1px solid var(--line);
    padding-top:26px;
}
.hero-stats div{display:flex;flex-direction:column;gap:4px;}
.hero-stats strong{
    font-family:'Archivo',sans-serif;font-weight:800;
    font-variation-settings:'wdth' 110;
    font-size:26px;color:var(--mist);
}
.hero-stats span{font-size:12.5px;color:var(--stone);text-transform:uppercase;letter-spacing:0.06em;}

/* signature: gpx trace panel */
.trace-panel{
    position:relative;
    background:linear-gradient(180deg, #242C31, #1B2125);
    border:1px solid var(--line);
    border-radius:10px;
    padding:22px;
    z-index:2;
}
.trace-panel .panel-head{
    display:flex;justify-content:space-between;align-items:center;
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    color:var(--stone);
    text-transform:uppercase;letter-spacing:0.08em;
    margin-bottom:14px;
}
.trace-panel .panel-head .live{color:var(--trail-light);}
.trace-svg{width:100%;height:auto;display:block;}
.trace-path{
    fill:none;
    stroke:var(--signal);
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:900;
    stroke-dashoffset:900;
    animation:draw 3.2s ease forwards 0.4s;
}
@keyframes draw{to{stroke-dashoffset:0;}}
.wp{
    opacity:0;
    animation:pop .4s ease forwards;
}
.wp circle{fill:var(--signal);}
.wp text{
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    fill:var(--mist-dim);
}
@keyframes pop{to{opacity:1;}}
.panel-foot{
    display:flex;gap:20px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line);
}
.panel-foot div{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--stone);}
.panel-foot strong{display:block;color:var(--mist);font-size:15px;margin-top:2px;}

@media(prefers-reduced-motion: reduce){
    .trace-path{animation:none;stroke-dashoffset:0;}
    .wp{animation:none;opacity:1;}
}

/* ---------- STRIP ---------- */
.strip{
    background:var(--ink-soft);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.strip .wrap{
    display:flex;
    flex-wrap:wrap;
    gap:0;
    padding:0;
}
.strip-item{
    flex:1 1 200px;
    display:flex;align-items:center;gap:10px;
    padding:20px 24px;
    color:var(--mist-dim);
    font-size:13.5px;
    font-weight:500;
    border-right:1px solid var(--line);
}
.strip-item:last-child{border-right:none;}
.strip-item svg{flex:none;width:18px;height:18px;stroke:var(--signal);}

/* ---------- SECTIONS ---------- */
section{padding:96px 0;}
.section-head{
    max-width:640px;
    margin-bottom:56px;
}
.section-head .eyebrow{
    color:var(--trail);
    border-color:rgba(76,90,63,0.35);
}
.section-head .eyebrow .dot{background:var(--trail);}
.section-head h2{font-size:clamp(28px,3.4vw,42px);color:var(--ink);}
.section-head p{
    margin-top:16px;font-size:16.5px;line-height:1.6;color:var(--stone-dark);
}
.light-on-dark .section-head h2{color:var(--mist);}
.light-on-dark .section-head p{color:var(--mist-dim);}

/* features grid */
.feat-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line-color, #D9DBD6);
    border:1px solid #D9DBD6;
}
.feat-card{
    background:var(--mist);
    padding:32px 28px;
    display:flex;flex-direction:column;gap:14px;
}
.feat-card .num{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;color:var(--stone);
}
.feat-card svg{width:26px;height:26px;stroke:var(--signal);}
.feat-card h3{font-size:18px;color:var(--ink);}
.feat-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--stone-dark);}

.warning-box {
    background: #FBF3E5;
    border: 1px solid #EAD3A0;
    border-radius: var(--radius);
    padding: 14px 16px;
    color: #8A5A00;
    font-size: 14px;
    margin: 24px 0;
    line-height: 1.6;
  }
  .warning-box strong { color: #8A5A00; }

/* showcase */
.showcase-section{background:var(--ink);color:var(--mist);}
.phone-row{
    display:flex;gap:15px;
    overflow-x:auto;
    padding-bottom:12px;
    scroll-snap-type:x mandatory;
}
.phone{
    flex:0 0 auto;
    width:200px;
    scroll-snap-align:start;
}
.phone .frame{
    border:6px solid var(--ink-soft);
    border-radius:22px;
    overflow:hidden;
    background:var(--ink-soft);
}
.phone img{width:100%;display:block;}
.phone p{
    margin-top:14px;
    font-size:13.5px;
    color:var(--mist-dim);
    font-weight:500;
}

/* how it works */
.steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:36px;
    counter-reset:step;
}
.step{position:relative;padding-top:6px;}
.step .step-num{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-variation-settings:'wdth' 110;
    font-size:15px;
    color:var(--signal);
    display:flex;align-items:center;gap:10px;
    margin-bottom:16px;
}
.step .step-num::before{
    content:counter(step,decimal-leading-zero);
    counter-increment:step;
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;
    color:var(--stone);
    border:1px solid #D9DBD6;
    padding:3px 8px;
    border-radius:100px;
}
.step h3{font-size:19px;margin-bottom:10px;color:var(--ink);}
.step p{margin:0;font-size:14.5px;line-height:1.6;color:var(--stone-dark);}
.step-line{
    position:absolute;top:14px;left:calc(100% + 18px);
    width:calc(36px - 18px);
    border-top:1px dashed #C7CAC3;
    display:none;
}

/* pricing teaser */
.pricing-section{background:var(--mist-dim);}
.plans{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.plan{
    background:var(--mist);
    border:1px solid #D9DBD6;
    border-radius:8px;
    padding:32px 28px;
    display:flex;flex-direction:column;
}
.plan.is-highlight{
    background:var(--ink);
    color:var(--mist);
    border-color:var(--ink);
    position:relative;
}
.plan-tag{
    position:absolute;top:-13px;right:24px;
    background:var(--signal);color:#fff;
    font-size:11.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:0.05em;
    padding:5px 12px;border-radius:100px;
}
.plan .name{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;text-transform:uppercase;letter-spacing:0.08em;
    color:var(--stone);margin-bottom:14px;
}
.plan.is-highlight .name{color:var(--mist-dim);}
.plan .price{
    font-family:'Archivo',sans-serif;font-weight:800;
    font-variation-settings:'wdth' 110;
    font-size:38px;margin-bottom:6px;
}
.plan .price span{font-size:14px;font-weight:500;font-family:'Inter',sans-serif;color:var(--stone);}
.plan.is-highlight .price span{color:var(--mist-dim);}
.plan ul{
    list-style:none;padding:0;margin:22px 0 28px;
    display:flex;flex-direction:column;gap:11px;
    flex:1;
}
.plan li{
    font-size:14px;line-height:1.5;
    display:flex;gap:10px;
    color:var(--stone-dark);
}
.plan.is-highlight li{color:var(--mist-dim);}
.plan li svg{flex:none;width:16px;height:16px;stroke:var(--trail);margin-top:2px;}
.plan.is-highlight li svg{stroke:var(--signal);}
.plan .btn{width:100%;}
.pricing-note{
    text-align:center;margin-top:36px;
    font-size:14px;color:var(--stone-dark);
}
.pricing-note a{color:var(--signal);font-weight:600;}

/* CTA download */
.cta-band{
    background:var(--signal);
    color:#fff;
    text-align:center;
}
.cta-band h2{color:#fff;font-size:clamp(26px,3.6vw,40px);}
.cta-band p{margin:16px auto 30px;max-width:52ch;font-size:16px;color:rgba(255,255,255,0.9);}
.store-badges{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.store-badge{
    display:flex;align-items:center;gap:10px;
    background:var(--ink);
    color:#fff;
    padding:12px 20px;
    border-radius:6px;
    font-size:14px;
    border:1px solid rgba(255,255,255,0.15);
}
.store-badge svg{width:22px;height:22px;}
.store-badge small{display:block;color:rgba(255,255,255,0.6);font-size:10.5px;}

/* footer */
footer.site{
    background:var(--ink);
    color:var(--mist-dim);
    padding:64px 0 28px;
}
.foot-grid{
    display:grid;
    grid-template-columns:1.4fr repeat(3,1fr);
    gap:40px;
    padding-bottom:40px;
    border-bottom:1px solid var(--line);
}
.foot-brand .logo-link span{color:var(--mist);}
.foot-brand p{
    margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--stone);max-width:34ch;
}
.foot-col h4{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;text-transform:uppercase;letter-spacing:0.08em;
    color:var(--stone);margin-bottom:16px;font-weight:500;
}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;}
.foot-col a{font-size:14px;color:var(--mist-dim);}
.foot-col a:hover{color:var(--signal);}
.foot-bottom{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:24px;font-size:12.5px;color:var(--stone);
    flex-wrap:wrap;gap:12px;
}

@media (max-width: 980px){
    .hero-grid{grid-template-columns:1fr;}
    .feat-grid{grid-template-columns:repeat(2,1fr);}
    .steps{grid-template-columns:1fr;gap:28px;}
    .plans{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}

    /* Menu mobile : le logo + 4 liens + boutons ne tiennent plus au-delà de 720px,
       donc le seuil du hamburger est aligné sur ce même point de rupture 980px */
    .nav-links, .nav-actions{display:none;}
    .nav-toggle{display:block;}
    .mobile-panel{display:none;}
    nav.wrap.is-open .mobile-panel{
        display:flex;
        flex-direction:column;
        gap:22px;
        position:absolute;
        top:74px;
        left:0;
        right:0;
        background:var(--ink);
        padding:24px 28px 28px;
        border-bottom:1px solid var(--line);
        box-shadow:0 12px 24px rgba(0,0,0,0.25);
    }
    nav.wrap.is-open .nav-links{
        display:flex;
        flex-direction:column;
        gap:16px;
    }
    nav.wrap.is-open .nav-actions{
        display:flex;
        flex-direction:column;
        gap:12px;
    }
}

@media (max-width: 720px){
    .nav-links, .nav-actions{display:none;}
    .nav-toggle{display:block;}
    .mobile-panel{display:none;}
    nav.wrap.is-open .mobile-panel{
        display:flex;
        flex-direction:column;
        gap:22px;
        position:absolute;
        top:74px;
        left:0;
        right:0;
        background:var(--ink);
        padding:24px 28px 28px;
        border-bottom:1px solid var(--line);
        box-shadow:0 12px 24px rgba(0,0,0,0.25);
    }
    nav.wrap.is-open .nav-links{
        display:flex;
        flex-direction:column;
        gap:16px;
    }
    nav.wrap.is-open .nav-actions{
        display:flex;
        flex-direction:column;
        gap:12px;
    }
    .feat-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr;}
    section{padding:64px 0;}
    .cairn{
        
        font-variation-settings:'wdth' 100;
        
    }
    .nav{
        
        font-variation-settings:'wdth' 100;
        
        margin-left: -30px;
    }
}
/* ---------- AUTH / FORMULAIRES (inscription, connexion) ---------- */
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:56px 20px;}
.auth-card{
    width:100%;max-width:420px;
    background:#fff;
    border:1px solid #D9DBD6;
    border-radius:10px;
    padding:38px 34px;
}
.auth-card .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--trail);margin-bottom:10px;display:block;
}
.auth-card h1{font-size:26px;color:var(--ink);margin-bottom:8px;}
.auth-card .subtitle{font-size:14.5px;color:var(--stone-dark);margin:0 0 28px;}

.field{margin-bottom:18px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px;}
.field input[type="email"],
.field input[type="password"],
.field input[type="text"]{
    width:100%;padding:12px 14px;
    border:1px solid #D0D3CE;border-radius:var(--radius);
    font-size:15px;font-family:'Inter',sans-serif;color:var(--ink);
    background:var(--mist);transition:border-color .15s ease;
}
.password-wrapper {
  position: relative;
}
.password-wrapper input {
  width: 100%;
  padding-right: 48px;
}
.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: currentColor;
  opacity: 0.55;
}
.toggle-password:hover {
  opacity: 1;
}
.eye-icon {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.eye-closed {
  display: none;
}
.field input:focus{border-color:var(--signal);outline:none;}
.field .hint{font-size:12px;color:var(--stone);margin-top:6px;}
.field .hint.error{color:var(--signal-dark);}

.checkbox-row{display:flex;align-items:flex-start;gap:10px;margin:22px 0 24px;}
.checkbox-row input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--signal);}
.checkbox-row label{font-size:13px;line-height:1.5;color:var(--stone-dark);}
.checkbox-row a{color:var(--signal-dark);font-weight:600;}

.form-alert{display:none;padding:12px 14px;border-radius:var(--radius);font-size:13.5px;margin-bottom:20px;line-height:1.5;}
.form-alert.error{display:block;background:#FBE8E5;color:var(--signal-dark);border:1px solid #F1BBB0;}
.form-alert.success{display:block;background:#EAEFE4;color:var(--trail);border:1px solid #C7D4B7;}

.auth-foot{text-align:center;margin-top:24px;font-size:13.5px;color:var(--stone-dark);}
.auth-foot a{color:var(--stone-dark);font-weight:600;}

.btn:disabled{opacity:0.6;cursor:not-allowed;transform:none;}
.btn-signal.full{width:100%;}

.spinner{
    display:inline-block;width:14px;height:14px;
    border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;border-radius:50%;
    animation:spin .7s linear infinite;margin-right:6px;vertical-align:-2px;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* body en colonne pour permettre à .auth-main de centrer verticalement */
body.has-auth{display:flex;flex-direction:column;min-height:100vh;}
body.has-auth main{flex:1;display:flex;}