/* SysAmandine — modules Dolibarr — vitrine (thème clair, couleurs du logo) */
:root{
  --blue:#1B5D9D; --blue-dark:#154a7d; --blue-soft:#eaf2fb;
  --green:#9CC327; --green-dark:#7da01d; --green-soft:#f2f8e3;
  --orange:#F19506; --orange-dark:#d68405; --orange-soft:#fef1de;
  --ink:#1d2b3a; --muted:#5d6e80; --bg:#ffffff; --bg2:#f5f9fd; --line:#e4ecf4;
  --radius:16px; --maxw:1080px; --shadow:0 10px 30px rgba(27,93,157,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}

/* Header */
header.site{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:12px;height:66px}
header.site img{height:38px;width:38px}
header.site .brand{font-weight:800;font-size:1.1rem;color:var(--blue);letter-spacing:.2px}
header.site nav{margin-left:auto;display:flex;gap:20px;align-items:center}
header.site nav a{color:var(--muted);font-size:.95rem;font-weight:500}
header.site nav a:hover{color:var(--blue);text-decoration:none}
.langbtn{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:8px;
  padding:5px 11px;cursor:pointer;font-size:.85rem;font-weight:600}
.langbtn:hover{color:var(--blue);border-color:var(--blue)}

/* Hero */
.hero{padding:78px 0 40px;text-align:center;background:
  radial-gradient(60% 80% at 50% -10%,var(--blue-soft),transparent)}
.hero .eyebrow{color:var(--orange-dark);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:.82rem}
.hero h1{font-size:2.6rem;line-height:1.12;margin:.25em 0 .35em;max-width:780px;margin-inline:auto}
.hero h1 .grad{background:linear-gradient(90deg,var(--blue),var(--green-dark));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:1.22rem;color:var(--muted);max-width:660px;margin:0 auto 28px}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.badge{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  font-size:.85rem;color:var(--muted)}

/* Buttons */
.btn{display:inline-block;border-radius:11px;padding:13px 24px;font-weight:700;
  border:2px solid transparent;cursor:pointer;transition:.15s}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(241,149,6,.28)}
.btn-primary:hover{background:var(--orange-dark);text-decoration:none;transform:translateY(-1px)}
.btn-ghost{border-color:var(--blue);color:var(--blue);background:#fff}
.btn-ghost:hover{background:var(--blue-soft);text-decoration:none}
.btn.disabled{opacity:.55;pointer-events:none;box-shadow:none}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}

/* Sections */
section{padding:54px 0}
h2.section{font-size:1.8rem;margin:0 0 6px;color:var(--ink)}
.center{text-align:center}
.sub{color:var(--muted);margin:0 0 30px}
.bg2{background:var(--bg2)}

/* Promise cards */
.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.promise .p{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow)}
.promise .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:1.4rem;margin-bottom:12px}
.ic.b{background:var(--blue-soft)}.ic.g{background:var(--green-soft)}.ic.o{background:var(--orange-soft)}
.promise h4{margin:.1em 0 .35em;font-size:1.12rem}
.promise p{color:var(--muted);margin:0}

/* Module grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  display:flex;flex-direction:column;box-shadow:var(--shadow);transition:.15s}
.card:hover{border-color:var(--blue);transform:translateY(-3px)}
.card h3{margin:.1em 0 .3em;font-size:1.22rem;color:var(--blue)}
.card .tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--green-dark);font-weight:800}
.card p{color:var(--muted);flex:1;margin:.4em 0 1.1em}
.card .foot{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.status-pill{font-size:.74rem;border-radius:999px;padding:4px 11px;border:1px solid var(--line);color:var(--muted);background:#fff}
.status-soon{color:var(--orange-dark);border-color:var(--orange);background:var(--orange-soft)}
.status-live{color:var(--green-dark);border-color:var(--green);background:var(--green-soft)}

/* Features */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.feature h4{margin:.1em 0 .35em;font-size:1.06rem;color:var(--ink)}
.feature p{color:var(--muted);margin:0;font-size:.96rem}

/* About / human */
.about{display:grid;grid-template-columns:140px 1fr;gap:26px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.about .avatar{width:140px;height:140px;border-radius:50%;background:var(--blue-soft);
  display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:2.4rem;font-weight:800;overflow:hidden}
.about .avatar img{width:100%;height:100%;object-fit:cover}
.about h3{margin:0 0 .3em;color:var(--blue)}
.about p{color:var(--muted);margin:.2em 0}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:20px;
  width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.step h4{margin:.4em 0 .3em}
.step p{color:var(--muted);margin:0;font-size:.96rem}

/* Screenshots */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.shot{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);transition:.15s}
.shot:hover{transform:translateY(-3px);border-color:var(--blue)}
.shot a{display:block}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:11px 14px;color:var(--muted);font-size:.9rem;text-align:center;border-top:1px solid var(--line)}

/* Panel — ambiance lagon */
.panel{position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0c3f70 0%,#1B5D9D 40%,#1f8fb0 74%,#27b3a5 100%);
  color:#fff;border-radius:var(--radius);padding:42px 34px 50px;text-align:center;box-shadow:var(--shadow)}
.panel::before{content:"";position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);pointer-events:none}
.panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;
  background:url(wave.svg) bottom center / 100% 150px no-repeat;pointer-events:none}
.panel > *{position:relative;z-index:1}
.panel h2.section{color:#fff}.panel .sub{color:#dcecf5}
.panel .btn-primary{background:var(--orange)}
.panel .btn-ghost{background:transparent;border-color:#fff;color:#fff}
.panel .btn-ghost:hover{background:rgba(255,255,255,.12)}

ul.check{list-style:none;padding:0;margin:0}
ul.check li{padding-left:28px;position:relative;color:var(--muted);margin:.3em 0}
ul.check li::before{content:"✓";position:absolute;left:0;color:var(--green-dark);font-weight:800}

/* Footer */
footer.site{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:.92rem;background:var(--bg2)}
footer.site .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* Lang visibility */
[data-en]{display:none}
body.en [data-fr]{display:none}
body.en [data-en]{display:revert}

@media(max-width:680px){
  .hero h1{font-size:2rem}.hero p.lead{font-size:1.08rem}
  header.site nav a:not(.langbtn){display:none}
  .about{grid-template-columns:1fr;text-align:center}.about .avatar{margin:0 auto}
}

/* ===== Canva page module ===== */
.modhero{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;text-align:left}
.modicon{width:88px;height:88px;border-radius:22px;display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;flex:0 0 auto;box-shadow:var(--shadow);background:var(--blue-soft)}
.modicon.g{background:var(--green-soft)}.modicon.o{background:var(--orange-soft)}
.modhead{flex:1;min-width:280px}
.modhead .cat{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--green-dark);font-weight:800}
.modhead h1{font-size:2.5rem;line-height:1.12;margin:.12em 0 .2em;color:var(--blue)}
.modhead .tagline{color:var(--muted);font-size:1.14rem;margin:0 0 14px;max-width:640px}
.editor-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:5px 13px 5px 5px;font-size:.86rem;color:var(--blue);font-weight:700}
.editor-badge img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 6px;font-size:.92rem;color:var(--muted);list-style:none;padding:0}
.meta li b{color:var(--ink)}
.lead-block{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.lead-block .box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.lead-block .box h3{margin:.1em 0 .4em;font-size:1.15rem}
.lead-block .box.prob h3{color:var(--orange-dark)} .lead-block .box.sol h3{color:var(--green-dark)}
.lead-block .box p{color:var(--muted);margin:0}
.faq .q{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px}
.faq .q h4{margin:0 0 .35em;color:var(--ink);font-size:1.04rem}
.faq .q p{margin:0;color:var(--muted)}
@media(max-width:680px){.lead-block{grid-template-columns:1fr}.modhead h1{font-size:1.7rem}}

/* hero module : texte + cover */
.modtop{display:grid;grid-template-columns:1.5fr .6fr;gap:38px;align-items:center}
.modcover img{width:100%;max-width:480px;border-radius:18px;box-shadow:var(--shadow);display:block;margin:0 auto}
.glyphtile{width:240px;max-width:100%;aspect-ratio:1;margin:0 auto;border-radius:36px;display:flex;
  align-items:center;justify-content:center;background:linear-gradient(135deg,#ffffff,var(--blue-soft));
  border:1px solid var(--line);box-shadow:var(--shadow)}
.glyphtile img{width:66%;height:66%}
@media(max-width:820px){.modtop{grid-template-columns:1fr;text-align:left}.modcover{order:-1}.glyphtile{width:200px}}
/* icône de fonctionnalité */
.feature .fic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;margin-bottom:10px;background:var(--blue-soft)}
.feature .fic.g{background:var(--green-soft)} .feature .fic.o{background:var(--orange-soft)}
/* icône module dans la carte d'accueil */
.card .cardicon{width:40px;height:40px;border-radius:11px;background:var(--blue-soft);display:flex;
  align-items:center;justify-content:center;margin-bottom:6px}
.card .cardicon img{width:30px;height:30px}

/* Lightbox captures */
.shot img{cursor:zoom-in}
.lb{position:fixed;inset:0;background:rgba(12,27,45,.92);display:none;align-items:center;justify-content:center;z-index:60;padding:30px}
.lb.open{display:flex}
.lb-img{max-width:92vw;max-height:84vh;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.55);background:#fff}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:none;
  cursor:pointer;border-radius:12px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s}
.lb-close{top:18px;right:20px;font-size:1.7rem;width:46px;height:46px}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:2.6rem;width:56px;height:80px}
.lb-prev{left:16px}.lb-next{right:16px}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.28)}
.lb-cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#dcecf5;font-size:.95rem;padding:0 16px}
@media(max-width:560px){.lb-prev,.lb-next{width:44px;height:64px;font-size:2rem}}