:root{
    --green:#1f9d57; --green-d:#157a43; --green-l:#e9f7ef;
    --ink:#15241c; --muted:#5a6b61; --line:#e3e9e4;
    --bg:#ffffff; --bg-soft:#f6f8f6; --amber:#ffb703; --radius:16px;
    --shadow:0 6px 24px rgba(21,36,28,.08); --shadow-lg:0 18px 48px rgba(21,36,28,.14);
    --maxw:1140px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.12;letter-spacing:-.01em}
  a{color:inherit;text-decoration:none}
  img{max-width:100%}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
  .btn{display:inline-flex;align-items:center;gap:.5em;background:var(--green);color:#fff;font-weight:600;font-size:1rem;
    padding:14px 22px;border-radius:999px;border:0;cursor:pointer;transition:.2s transform,.2s background;white-space:nowrap}
  .btn:hover{background:var(--green-d);transform:translateY(-1px)}
  .btn.block{width:100%;justify-content:center;padding:16px}
  .btn-ghost{background:#fff;color:var(--green-d);border:1.5px solid var(--line)}
  .btn-ghost:hover{background:var(--green-l);border-color:var(--green-l)}
  .eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-d);background:var(--green-l);padding:6px 12px;border-radius:999px}

  /* Header */
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:68px}
  .logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.22rem}
  .logo .dot{width:30px;height:30px;border-radius:9px;background:var(--green);display:grid;place-items:center;color:#fff;font-family:'Fraunces',serif}
  .nav-links{display:flex;gap:28px;align-items:center}
  .nav-links a{color:var(--muted);font-weight:500;font-size:.95rem}
  .nav-links a:hover{color:var(--ink)}
  .menu-btn{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--ink)}

  /* Hero */
  .hero{background:linear-gradient(180deg,var(--green-l),#fff 70%);padding:56px 0 40px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
  .hero h1{font-size:clamp(2.1rem,4.6vw,3.3rem);margin:16px 0 14px}
  .hero p.lead{font-size:1.15rem;color:var(--muted);max-width:30em}
  .hero-media{position:relative;margin-top:26px;border-radius:var(--radius);overflow:hidden;
    aspect-ratio:16/10;background:linear-gradient(135deg,#bfe6cd,#e9f7ef);box-shadow:var(--shadow)}
  .hero-media .illus{position:absolute;inset:0;width:100%;height:100%;z-index:0}
  .hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
  .hero-media .float{position:absolute;z-index:3;left:14px;bottom:14px;background:rgba(255,255,255,.95);
    border-radius:12px;padding:9px 14px;font-weight:600;font-size:.86rem;box-shadow:var(--shadow);display:flex;gap:8px;align-items:center}
  .ticks{list-style:none;display:flex;flex-wrap:wrap;gap:14px 22px;margin:22px 0 0}
  .ticks li{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem}
  .ticks li::before{content:"✓";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:.8rem}
  /* Form card */
  .form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:26px}
  .form-card h2{font-size:1.4rem;margin-bottom:4px}
  .form-card .sub{color:var(--muted);font-size:.92rem;margin-bottom:18px}
  .field{margin-bottom:13px}
  .field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:5px;color:var(--ink)}
  .field input{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:11px;font-size:1rem;font-family:inherit;transition:.15s border}
  .field input:focus{outline:none;border-color:var(--green)}
  .field .opt{color:var(--muted);font-weight:400}
  .consent{display:flex;gap:9px;align-items:flex-start;font-size:.78rem;color:var(--muted);margin:6px 0 14px}
  .consent input{margin-top:3px}
  .form-note{text-align:center;font-size:.78rem;color:var(--muted);margin-top:10px}
  .trust-inline{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:.85rem;color:var(--muted)}
  .stars{color:var(--amber);letter-spacing:1px}
  .ok-msg{display:none;text-align:center;padding:20px}
  .ok-msg .big{font-size:2.4rem}
  .ok-msg h3{font-size:1.3rem;margin:6px 0}

  /* Marques strip */
  .strip{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
  .strip p{text-align:center;color:var(--muted);font-size:.9rem;margin-bottom:14px}
  .chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
  .chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:600;font-size:.9rem;color:var(--muted)}

  section.band{padding:62px 0}
  .band.soft{background:var(--bg-soft)}
  .head-center{text-align:center;max-width:36em;margin:0 auto 42px}
  .head-center h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:12px 0 10px}
  .head-center p{color:var(--muted);font-size:1.05rem}

  /* Steps */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
  .step .n{width:40px;height:40px;border-radius:11px;background:var(--green-l);color:var(--green-d);display:grid;place-items:center;font-family:'Fraunces',serif;font-size:1.25rem;font-weight:600;margin-bottom:14px}
  .step h3{font-size:1.18rem;margin-bottom:7px}
  .step p{color:var(--muted);font-size:.95rem}

  /* Categories */
  .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .cat{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;transition:.2s;box-shadow:var(--shadow)}
  .cat:hover{transform:translateY(-3px);border-color:var(--green)}
  .cat .ic{font-size:1.7rem;width:52px;height:52px;border-radius:13px;background:var(--green-l);display:grid;place-items:center;flex:none}
  .cat h3{font-size:1.08rem;margin-bottom:2px}
  .cat span{color:var(--muted);font-size:.85rem}

  /* Samples */
  .grid-samples{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .sample{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
  .sample .thumb{height:140px;background:var(--green-l);position:relative;overflow:hidden}
  .sample .thumb .illus{position:absolute;inset:0;width:100%;height:100%;z-index:0}
  .sample .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
  .sample .badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--green);color:#fff;font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
  .sample .body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:4px;flex:1}
  .sample .tag{font-size:.75rem;color:var(--green-d);font-weight:600}
  .sample h3{font-size:1rem;font-family:'Inter',sans-serif;font-weight:700;line-height:1.3}
  .sample p{font-size:.85rem;color:var(--muted);flex:1}
  .sample .btn{margin-top:8px;padding:10px 16px;font-size:.9rem}

  /* Avantages */
  .adv{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .adv .item{text-align:left}
  .adv .ic{font-size:1.5rem;width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;margin-bottom:12px}
  .adv h3{font-size:1.05rem;margin-bottom:5px}
  .adv p{color:var(--muted);font-size:.9rem}

  /* Avis */
  .avis{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .avis .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
  .avis .stars{font-size:1rem;margin-bottom:10px}
  .avis p{font-size:.95rem;margin-bottom:14px}
  .avis .who{display:flex;align-items:center;gap:11px}
  .avis .av{width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700}
  .avis .who b{font-size:.9rem;display:block}
  .avis .who span{font-size:.8rem;color:var(--muted)}

  /* FAQ */
  .faq{max-width:760px;margin:0 auto}
  .q{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
  .q button{width:100%;text-align:left;background:none;border:0;padding:18px 20px;font-size:1.02rem;font-weight:600;font-family:inherit;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
  .q .plus{font-size:1.4rem;color:var(--green);flex:none;transition:.2s transform}
  .q.open .plus{transform:rotate(45deg)}
  .q .a{max-height:0;overflow:hidden;transition:.25s max-height;color:var(--muted);font-size:.96rem}
  .q .a div{padding:0 20px 18px}

  /* CTA band */
  .cta-band{background:linear-gradient(120deg,var(--green),var(--green-d));color:#fff;border-radius:22px;padding:48px;text-align:center}
  .cta-band h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:10px;color:#fff}
  .cta-band p{opacity:.92;margin-bottom:22px;font-size:1.05rem}
  .cta-band .btn{background:#fff;color:var(--green-d)}
  .cta-band .btn:hover{background:#eafff2}

  /* Footer */
  footer{background:#10231a;color:#c7d6cd;padding:52px 0 26px;font-size:.92rem}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-bottom:34px}
  footer .logo{color:#fff;margin-bottom:12px}
  footer p.blurb{color:#9fb3a7;max-width:28em}
  footer h4{color:#fff;font-size:.95rem;margin-bottom:14px;font-family:'Inter';font-weight:700}
  footer ul{list-style:none}
  footer ul li{margin-bottom:9px}
  footer ul a{color:#c7d6cd}
  footer ul a:hover{color:#fff}
  .foot-bottom{border-top:1px solid #23402f;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8aa093;font-size:.82rem}

  /* Prose / contenu SEO */
  .prose{max-width:790px;margin:0 auto}
  .prose h2{font-size:clamp(1.45rem,2.6vw,2rem);margin:36px 0 12px}
  .prose h2:first-of-type{margin-top:14px}
  .prose h3{font-family:'Inter',sans-serif;font-weight:700;font-size:1.12rem;margin:22px 0 6px;color:var(--ink)}
  .prose p{color:#3f5146;margin-bottom:14px;font-size:1.02rem;line-height:1.72}
  .prose p.lead-p{font-size:1.12rem;color:var(--ink)}
  .prose strong{color:var(--ink)}

  /* Guide — blocs visuels */
  .guide-head{text-align:center;max-width:42em;margin:0 auto}
  .guide-head h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:12px 0 12px}
  .guide-head p{color:var(--muted);font-size:1.1rem}
  .sec-h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:54px 0 8px;text-align:center}
  .sec-intro{color:var(--muted);text-align:center;max-width:42em;margin:0 auto 26px;font-size:1.02rem}
  .why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .why-cards .c{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
  .why-cards .ic{font-size:1.5rem;width:50px;height:50px;border-radius:13px;background:var(--green-l);display:grid;place-items:center;margin-bottom:14px}
  .why-cards h3{font-family:'Inter',sans-serif;font-weight:700;font-size:1.1rem;margin-bottom:7px}
  .why-cards p{color:var(--muted);font-size:.95rem;line-height:1.6}
  .type-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .type-cards .t{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
  .type-cards .t .ic{font-size:1.7rem;width:56px;height:56px;border-radius:14px;background:var(--green-l);display:grid;place-items:center;flex:none}
  .type-cards h3{font-family:'Inter',sans-serif;font-weight:700;font-size:1.08rem;margin-bottom:5px}
  .type-cards p{color:var(--muted);font-size:.93rem;line-height:1.6}
  .callout{background:var(--green-l);border:1px solid #cfe9d8;border-radius:20px;padding:36px;margin:54px 0 0}
  .callout h2{margin:0 0 10px;font-size:clamp(1.4rem,2.6vw,1.9rem)}
  .callout>p{color:#3f5146;max-width:56em;line-height:1.7}
  .mini-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
  .mini-steps .s{background:#fff;border-radius:13px;padding:18px;text-align:center;border:1px solid #d8ecdf}
  .mini-steps .s .n{width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700;margin:0 auto 10px}
  .mini-steps .s b{display:block;font-size:.98rem;margin-bottom:3px}
  .mini-steps .s span{font-size:.85rem;color:var(--muted)}
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .compare .col{border-radius:var(--radius);padding:26px;border:1px solid var(--line)}
  .compare .good{background:#eef9f1;border-color:#cfe9d8}
  .compare .bad{background:#fdf1f1;border-color:#f3d6d6}
  .compare h4{font-family:'Inter',sans-serif;font-size:1.08rem;margin-bottom:14px;display:flex;align-items:center;gap:9px}
  .compare ul{list-style:none;display:flex;flex-direction:column;gap:11px}
  .compare li{display:flex;gap:10px;font-size:.95rem;color:#3f5146;line-height:1.5}
  .compare li .m{flex:none;font-weight:800}
  .good li .m{color:var(--green)}
  .bad li .m{color:#d14b4b}
  .mission{background:linear-gradient(120deg,#10231a,#1b4030);color:#ddece4;border-radius:22px;padding:42px;margin-top:54px;display:grid;grid-template-columns:1.35fr 1fr;gap:30px;align-items:center}
  .mission h2{color:#fff;margin:0 0 12px;font-size:clamp(1.5rem,2.8vw,2rem)}
  .mission p{color:#bcd3c6;margin:0;line-height:1.7}
  .mission .check{list-style:none;display:flex;flex-direction:column;gap:13px}
  .mission .check li{display:flex;gap:11px;align-items:center;font-weight:600;color:#fff;font-size:.98rem}
  .mission .check li::before{content:"✓";width:26px;height:26px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff;font-size:.8rem;flex:none}

  @media(max-width:900px){
    .hero-grid,.steps,.cats,.grid-samples,.adv,.avis,.foot-grid,.why-cards,.type-cards,.compare,.mission,.mini-steps{grid-template-columns:1fr}
    .mission{padding:30px}
    .grid-samples{grid-template-columns:1fr 1fr}
    .steps,.cats{grid-template-columns:1fr}
    .nav-links{display:none}
    .menu-btn{display:block}
    .nav-links.open{display:flex;position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;padding:16px 20px;border-bottom:1px solid var(--line);gap:16px}
    .cta-band{padding:34px 20px}
    .adv{grid-template-columns:1fr 1fr}
  }
  @media(max-width:560px){.grid-samples,.adv{grid-template-columns:1fr}}

/* --- sous-pages --- */
.subhero{background:linear-gradient(180deg,var(--green-l),#fff);padding:46px 0 14px}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:12px}
.crumb a{color:var(--green-d)}
.subhero h1{font-size:clamp(1.8rem,3.8vw,2.7rem);margin-bottom:12px}
.subhero p.lead{color:var(--muted);font-size:1.12rem;max-width:42em}
.article{max-width:800px;margin:0 auto}
.article h2{font-size:clamp(1.3rem,2.4vw,1.8rem);margin:32px 0 10px}
.article h3{font-family:'Inter',sans-serif;font-weight:700;font-size:1.1rem;margin:20px 0 6px;color:var(--ink)}
.article p{color:#3f5146;line-height:1.75;margin-bottom:14px;font-size:1.02rem}
.article ul{margin:0 0 16px 1.2em;color:#3f5146;line-height:1.7}
.article li{margin-bottom:8px}
.backlinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.backlinks a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:.9rem;color:var(--green-d);font-weight:600}
.backlinks a:hover{border-color:var(--green);background:var(--green-l)}
.form-narrow{max-width:480px;margin:0 auto}
.legal-note{background:var(--green-l);border:1px solid #cfe9d8;border-radius:12px;padding:14px 16px;font-size:.9rem;color:#3f5146;margin:16px 0}
/* --- menu déroulant header --- */
.has-drop{position:relative}
.has-drop>.drop-toggle{cursor:pointer}
.dropdown{display:none;position:absolute;top:calc(100% + 10px);left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;min-width:210px;z-index:60}
.dropdown a{display:block;padding:9px 12px;border-radius:8px;color:var(--muted);font-size:.93rem;white-space:nowrap}
.dropdown a:hover{background:var(--green-l);color:var(--ink)}
.has-drop:hover .dropdown{display:block}
@media(max-width:900px){
  .has-drop{width:100%}
  .has-drop:hover .dropdown{display:none}
  .dropdown{position:static;box-shadow:none;border:0;padding:4px 0 6px 14px;min-width:0}
  .has-drop.open .dropdown{display:block}
}