/* ============ LANDING ============ */
.ln-shell{overflow-x:hidden;}

/* nav */
.nav{position:sticky; top:0; z-index:50; background:rgba(234,231,223,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:13px 24px; display:flex; align-items:center; gap:24px;}
.nav .wm{font-size:27px; color:var(--charcoal);}
.nav-links{display:none; gap:26px; margin-left:18px; font-size:15px; font-weight:500;}
.nav-links a{text-decoration:none; color:var(--charcoal-2);}
.nav-links a:hover{color:var(--charcoal);}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:14px;}
.nav-login{display:none; font-size:15px; font-weight:600; text-decoration:none; color:var(--charcoal);}

/* Bouton hamburger (mobile seulement) */
.nav-toggle{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:44px; height:44px; padding:0; background:transparent; border:1px solid var(--line);
  border-radius:9px; color:var(--charcoal); cursor:pointer;}
.nav-toggle .i-close{display:none;}
.nav.open .nav-toggle .i-open{display:none;}
.nav.open .nav-toggle .i-close{display:block;}

@media(min-width:920px){.nav-links{display:flex;} .nav-login{display:inline;} .nav-toggle{display:none;}
  /* En desktop sur la landing, le .nav-login (à droite) couvre déjà « Connexion » :
     on masque le doublon présent dans le menu pour éviter la répétition. */
  .nav-links .nav-links-login{display:none;}}

/* Menu déroulant mobile révélé par le hamburger */
@media(max-width:919px){
  .nav-in{gap:12px;}
  .nav.open .nav-links{display:flex; flex-direction:column; gap:0; margin:0; padding:6px 0;
    position:absolute; top:100%; left:0; right:0; background:var(--raised);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow);}
  .nav.open .nav-links a{padding:13px 24px; font-size:16px;}
  .nav.open .nav-links a + a{border-top:1px solid var(--line);}
}

/* hero */
.hero{padding:48px 0 64px; position:relative;}
.hero-in{display:grid; grid-template-columns:1fr; gap:44px; align-items:center;}
.hero h1{font-size:clamp(38px,8vw,62px); line-height:1.02; margin:16px 0 0;}
.hero h1 em{font-style:normal; color:var(--sodium-700); box-shadow:inset 0 -.14em 0 var(--sodium-100);}
.hero .lede{font-size:clamp(17px,2.2vw,20px); color:var(--charcoal-2); max-width:34ch; margin:20px 0 28px; line-height:1.5;}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px;}
.hero-assure{display:flex; flex-wrap:wrap; gap:18px; margin-top:22px; font-size:13.5px; color:var(--steel-6);}
.hero-assure span{display:inline-flex; align-items:center; gap:7px;}
.hero-assure svg{color:var(--sodium-700);}
@media(min-width:920px){
  .hero{padding:70px 0 90px;}
  .hero-in{grid-template-columns:1.02fr .98fr; gap:56px;}
}

/* hero visual */
.hero-vis{position:relative; min-height:380px;}
.hero-photo{position:relative; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/3; background:var(--steel-2);}
.hero-photo .img-ph,
.hero-photo .cartable{width:100%; height:100%; display:block;}
.hero-tag{position:absolute; left:-10px; top:18px; background:var(--charcoal); color:var(--craie); font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; padding:8px 13px; border-radius:7px; transform:rotate(-3deg); box-shadow:var(--shadow); z-index:4;}
.hero-tag b{color:var(--d-sodium); font-weight:500;}

/* image placeholders (remplacent <image-slot> du prototype) */
.img-ph{display:flex; align-items:center; justify-content:center; text-align:center;
  background:repeating-linear-gradient(45deg,var(--steel-2),var(--steel-2) 11px,var(--steel-3) 11px,var(--steel-3) 22px);
  color:var(--charcoal-2); font-family:var(--mono); font-size:11px; letter-spacing:.04em; padding:14px;}
.img-ph.circle{border-radius:50%;}

/* phone mock */
.phone{width:248px; border-radius:34px; background:#0E0B07; padding:9px; box-shadow:0 30px 60px -26px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4); position:relative;}
.phone-scr{background:var(--d-canvas); border-radius:27px; overflow:hidden; position:relative;}
.phone-notch{position:absolute; top:8px; left:50%; transform:translateX(-50%); width:78px; height:18px; background:#0E0B07; border-radius:0 0 12px 12px; z-index:5;}
.hero-vis .phone{position:absolute; right:-6px; bottom:-30px; z-index:6;}
@media(max-width:919px){
  .hero-vis{display:flex; flex-direction:column; align-items:center;}
  .hero-vis .phone{position:relative; right:auto; bottom:auto; margin-top:-70px;}
}

/* dark phone screen content */
.scr{padding:30px 16px 16px; color:var(--craie); font-size:13px;}
.scr-hi{font-family:var(--serif); font-size:19px; line-height:1.1; margin-bottom:2px;}
.scr-sub{font-family:var(--mono); font-size:10.5px; color:var(--craie-muted); letter-spacing:.04em; margin-bottom:16px;}
.scr-lbl{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--craie-muted); margin:14px 0 8px; display:flex; justify-content:space-between;}
.scr-card{background:var(--d-surface); border:1px solid var(--d-line); border-radius:12px; padding:12px; display:flex; align-items:center; gap:11px; margin-bottom:8px;}
.scr-card .ico{width:34px; height:34px; border-radius:9px; background:#23362B; color:var(--d-ok); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.scr-card.alert .ico{background:#3A2118; color:var(--d-danger);}
.scr-card b{font-size:13px; display:block;} .scr-card small{font-family:var(--mono); font-size:10px; color:var(--craie-muted);}
.scr-card .temp{margin-left:auto; font-family:var(--mono); font-size:18px; font-weight:500;}
.scr-card.alert .temp{color:var(--d-danger);}
.scr-nav{display:flex; justify-content:space-around; padding:11px 6px 6px; border-top:1px solid var(--d-line); margin-top:6px;}
.scr-nav span{display:flex; flex-direction:column; align-items:center; gap:3px; font-family:var(--mono); font-size:8px; letter-spacing:-.02em; color:var(--craie-muted);}
.scr-nav span.on{color:var(--d-sodium);}

/* problème — dark band */
.prob{background:var(--d-canvas); color:var(--craie);}
.prob .eyebrow{color:var(--d-sodium);}
.prob h2{color:var(--craie); font-size:clamp(28px,4.6vw,44px); line-height:1.06; max-width:18ch; margin:14px 0 0;}
.prob p.intro{color:var(--craie-muted); max-width:54ch; margin:20px 0 0; font-size:17px;}
.stats{display:grid; grid-template-columns:1fr; gap:1px; margin-top:48px; background:var(--d-line); border:1px solid var(--d-line); border-radius:14px; overflow:hidden;}
.stat{background:var(--d-canvas); padding:30px 26px;}
.stat .n{font-family:var(--serif); font-size:clamp(44px,7vw,64px); line-height:.95; color:var(--d-sodium);}
.stat .l{font-family:var(--mono); font-size:12.5px; color:var(--craie-muted); letter-spacing:.03em; margin-top:12px; line-height:1.5;}
@media(min-width:760px){.stats{grid-template-columns:repeat(3,1fr);}}

/* section head */
.sh{max-width:62ch;}
.sh h2{font-size:clamp(28px,4.4vw,42px); line-height:1.05; margin:12px 0 0;}
.sh p{color:var(--charcoal-2); font-size:17px; margin:16px 0 0;}
.section-head-center{text-align:center; margin:0 auto;}

/* piliers */
.piliers{display:grid; grid-template-columns:1fr; gap:18px; margin-top:48px;}
@media(min-width:820px){.piliers{grid-template-columns:repeat(3,1fr);}}
.pilier{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 26px; box-shadow:var(--shadow);}
.pilier .pic{width:54px; height:54px; border-radius:12px; background:var(--sodium-50); color:var(--sodium-700); display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.pilier h3{font-size:23px;}
.pilier p{color:var(--charcoal-2); font-size:15.5px; margin:10px 0 0; line-height:1.55;}
.pilier .arrow{margin-top:16px; font-family:var(--mono); font-size:13px; color:var(--sodium-700); display:inline-flex; gap:6px; align-items:center; text-decoration:none; transition:gap .15s ease, color .15s ease;}
a.arrow:hover{color:var(--charcoal); gap:10px;}

/* pour qui */
.qui{background:var(--surface);}
.qui-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:42px;}
@media(min-width:760px){.qui-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1080px){.qui-grid{grid-template-columns:repeat(5,1fr);}}
.qui-card{background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 22px;}
.qui-card .qic{color:var(--charcoal); margin-bottom:16px;}
.qui-card b{font-size:17px; display:block;}
.qui-card span{font-size:14px; color:var(--steel-6); display:block; margin-top:6px; line-height:1.5;}

/* showcase */
.show-row{display:grid; grid-template-columns:1fr; gap:44px; align-items:center; margin-top:50px;}
@media(min-width:920px){.show-row{grid-template-columns:.92fr 1.08fr; gap:60px;}}
.show-vis{display:flex; justify-content:center;}
.show-list{display:flex; flex-direction:column; gap:22px;}
.show-item{display:flex; gap:16px;}
.show-item .si{width:46px; height:46px; border-radius:11px; background:var(--charcoal); color:var(--sodium); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.show-item h4{font-size:19px;}
.show-item p{color:var(--charcoal-2); font-size:15px; margin:6px 0 0; line-height:1.5;}

/* tarifs */
.tarifs{background:var(--d-canvas); color:var(--craie);}
.tarifs .eyebrow{color:var(--d-sodium);}
.tarifs h2{color:var(--craie); font-size:clamp(28px,4.4vw,42px); margin:12px 0 0;}
.tarifs .sub{color:var(--craie-muted); font-size:16px; margin:14px 0 0;}
.plans{display:grid; grid-template-columns:1fr; gap:16px; margin-top:46px;}
@media(min-width:680px){.plans{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.plans{grid-template-columns:repeat(4,1fr);}}
.plan{background:var(--d-surface); border:1px solid var(--d-line); border-radius:14px; padding:26px 22px; display:flex; flex-direction:column;}
.plan.feat{border-color:var(--d-sodium); box-shadow:0 0 0 1px var(--d-sodium), 0 30px 50px -30px rgba(0,0,0,.6); position:relative;}
.plan .pop{position:absolute; top:-12px; left:22px; background:var(--d-sodium); color:#1A1206; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; padding:5px 11px; border-radius:100px; font-weight:600;}
.plan .pname{font-family:var(--serif); font-size:23px;}
.plan .pwho{font-family:var(--mono); font-size:11px; color:var(--craie-muted); letter-spacing:.03em; margin-top:4px;}
.plan .price{margin:18px 0 4px; display:flex; align-items:baseline; gap:4px;}
.plan .price .a{font-family:var(--serif); font-size:42px; line-height:1;}
.plan .price .u{font-family:var(--mono); font-size:12px; color:var(--craie-muted);}
.plan ul{list-style:none; padding:0; margin:18px 0 22px; display:flex; flex-direction:column; gap:9px;}
.plan li{font-size:13.5px; color:var(--craie); display:flex; gap:9px; align-items:flex-start;}
.plan li svg{color:var(--d-ok); flex-shrink:0; margin-top:2px;}
.plan .btn{margin-top:auto;}
.plan-cta-dark{background:transparent; color:var(--craie); border:1.5px solid var(--craie-muted);}
.plan-cta-dark:hover{background:var(--d-raised);}
.plan.feat .plan-cta{background:var(--d-sodium); color:#1A1206;}

/* témoignages */
.temoins-grid{display:grid; grid-template-columns:1fr; gap:18px; margin-top:44px;}
@media(min-width:820px){.temoins-grid{grid-template-columns:repeat(3,1fr);}}
.temoin{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow);}
.temoin .q{font-family:var(--serif); font-size:19px; line-height:1.35; color:var(--charcoal);}
.temoin .who{display:flex; align-items:center; gap:12px; margin-top:20px;}
.temoin .who .img-ph{width:44px; height:44px; flex-shrink:0;}
.temoin .who b{font-size:14.5px; display:block;} .temoin .who span{font-size:12.5px; color:var(--steel-6); font-family:var(--mono);}
.temoin .ex{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-4); margin-bottom:14px;}

/* final cta */
.final{background:var(--sodium); color:var(--charcoal); text-align:center;}
.final h2{font-size:clamp(32px,6vw,56px); line-height:1.02; max-width:16ch; margin:0 auto;}
.final p{font-size:18px; margin:18px auto 30px; max-width:40ch; color:#5a4413;}
.final .btn-dark{box-shadow:0 12px 30px -14px rgba(0,0,0,.5);}
.final .fineprint{font-family:var(--mono); font-size:12px; color:#6b531a; margin-top:18px;}

/* footer */
.foot{background:var(--d-canvas); color:var(--craie-muted); padding:64px 0 40px;}
.foot-top{display:grid; grid-template-columns:1fr; gap:36px;}
@media(min-width:760px){.foot-top{grid-template-columns:1.6fr 1fr 1fr 1fr;}}
.foot .wm{font-size:30px; color:var(--craie);}
.foot-brand p{font-size:14px; max-width:30ch; margin:16px 0 0; color:var(--craie-muted); line-height:1.55;}
.foot h5{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--craie-muted); margin:4px 0 16px; font-weight:500;}
.foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px;}
.foot ul a{font-size:14.5px; color:var(--craie); text-decoration:none;} .foot ul a:hover{color:var(--d-sodium);}
.foot-disc{margin-top:48px; padding-top:28px; border-top:1px solid var(--d-line); font-style:italic; font-size:13px; line-height:1.6; max-width:80ch; color:var(--craie-muted);}
.foot-legal{margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--craie-muted); display:flex; flex-wrap:wrap; gap:14px; align-items:center;}