/* Natura 36 Paysagiste : thème enfant Divi.
   Couleurs : uniquement celles du client (logo + bannière) et leurs variations de luminosité.
   Toutes les classes sont préfixées n36- pour ne pas entrer en conflit avec Divi / DiviFlash. */

@font-face{
  font-family:"Figtree";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../fonts/figtree-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Client */
  --n36-orange:#F45008; --n36-ardoise:#50546A; --n36-blanc:#FEFEFE; --n36-vert:#A0E000;
  /* Dérivées par luminosité */
  --n36-ink:#1A1C23; --n36-orange-deep:#AD3906; --n36-vert-deep:#496600;
  --n36-orange-50:#FEEEE6;
  --n36-ardoise-50:#F3F4F6; --n36-ardoise-100:#E8E9ED; --n36-ardoise-200:#D3D5DE;
  --n36-vert-50:#F5FFDB;
  /* Rôles */
  --n36-bg:var(--n36-blanc); --n36-bg-section:var(--n36-ardoise-50); --n36-bg-hero:var(--n36-vert-50);
  --n36-text:var(--n36-ink); --n36-text-2:var(--n36-ardoise); --n36-link:var(--n36-orange-deep);
  --n36-action:var(--n36-orange); --n36-action-text:var(--n36-ink);
  --n36-border:var(--n36-ardoise-200); --n36-border-soft:var(--n36-ardoise-100);
  /* Espacements, rayons, ombres */
  --n36-s-xs:8px; --n36-s-sm:12px; --n36-s-md:16px; --n36-s-xl:24px; --n36-s-xxl:32px; --n36-s-xxxl:40px;
  --n36-sec-sm:48px; --n36-sec:64px; --n36-container:1280px;
  --n36-gutter:max(16px,env(safe-area-inset-left,0px));
  --n36-ctl:44px; --n36-r-md:8px; --n36-r-card:16px; --n36-r-pill:9999px;
  --n36-shadow-3:rgba(26,28,35,.08) 0 12px 32px -4px;
  --n36-font:"Figtree","Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ---------- Base du site (Divi garde la main dans le contenu Builder) ---------- */
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.n36-site{background:var(--n36-bg);color:var(--n36-text);font-family:var(--n36-font);font-size:16px;line-height:1.5;font-weight:400}
body.n36-site #page-container{background:var(--n36-bg)}
/* Divi pose overflow + padding-top sur #page-container : incompatible avec un en-tête sticky. */
body.n36-header-on #page-container{padding-top:0!important;overflow:visible!important;overflow-x:clip!important}
body.n36-site #et-main-area,body.n36-site #main-content{background:transparent}

/* Réinitialisation scoppée : spécificité (0,0,1), chargée après Divi, donc elle l'emporte
   sur les règles h1/p/ul de Divi tout en restant sous les classes n36-. */
:where(.n36,.n36-header,.n36-footer,.n36-prop) :is(h1,h2,h3,p,ul,ol,li,figure,dl,dt,dd){margin:0;padding:0;line-height:inherit;font-family:inherit;color:inherit}
:where(.n36,.n36-header,.n36-footer) :is(ul,ol){list-style:none}
:where(.n36,.n36-header,.n36-footer) :is(img){max-width:100%;height:auto;display:block}
:where(.n36,.n36-footer) :is(a){color:var(--n36-link)}
:where(.n36-site) :focus-visible{outline:3px solid var(--n36-ink);outline-offset:3px;border-radius:4px}
:where(.n36-dark) :focus-visible{outline-color:var(--n36-vert)}

.n36-wrap{width:min(var(--n36-container),100% - 2*var(--n36-gutter));margin-inline:auto}
.n36-skip{position:absolute;left:-999px;top:8px;background:var(--n36-ink);color:var(--n36-blanc)!important;padding:10px 14px;border-radius:var(--n36-r-md);z-index:100000;text-decoration:none}
.n36-skip:focus{left:8px}

/* ---------- Bandeau de proposition ---------- */
.n36-prop{background:var(--n36-ink);color:var(--n36-blanc);font-size:13px;line-height:1.4;padding-block:8px;font-family:var(--n36-font)}
.n36-prop b{color:var(--n36-vert);font-weight:600}

/* ---------- Typo ---------- */
.n36-eyebrow{font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--n36-vert-deep)}
.n36-h1{font-size:clamp(34px,6.2vw,60px);line-height:1.08;letter-spacing:-1.2px;font-weight:600;text-wrap:balance;color:var(--n36-ink)}
.n36-h1--page{font-size:clamp(32px,5vw,48px)}
.n36-h2{font-size:clamp(26px,4vw,36px);line-height:1.2;letter-spacing:-.5px;font-weight:600;text-wrap:balance;color:var(--n36-ink)}
.n36-h3{font-size:22px;line-height:1.3;font-weight:600;color:var(--n36-ink)}
.n36-lead{font-size:18px;line-height:1.5;color:var(--n36-text-2)!important;max-width:56ch}

/* ---------- Boutons ---------- */
.n36-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--n36-ctl);padding:0 22px;border-radius:var(--n36-r-pill);
  background:var(--n36-action);color:var(--n36-action-text)!important;font:600 15px/1.3 var(--n36-font);text-decoration:none;border:2px solid var(--n36-action);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.n36-btn:hover{background:var(--n36-orange-deep);border-color:var(--n36-orange-deep);color:var(--n36-blanc)!important}
.n36-btn--ghost{background:transparent;border-color:var(--n36-ink)}
.n36-btn--ghost:hover{background:var(--n36-ink);border-color:var(--n36-ink)}

/* ---------- En-tête ---------- */
.n36-header{position:sticky;top:0;z-index:999;background:var(--n36-bg);border-bottom:1px solid var(--n36-border-soft);font-family:var(--n36-font)}
.admin-bar .n36-header{top:32px}
@media (max-width:782px){.admin-bar .n36-header{top:46px}}
@media (max-width:600px){.admin-bar .n36-header{top:0}}
.n36-header .n36-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.n36-logo img{height:36px;width:auto}
.n36-nav{display:flex;align-items:center;gap:var(--n36-s-xl)}
.n36-nav a:not(.n36-btn){color:var(--n36-ink);text-decoration:none;font-weight:500;font-size:15px;padding:10px 2px}
.n36-nav a:not(.n36-btn):hover{color:var(--n36-orange-deep);text-decoration:underline;text-underline-offset:5px}
.n36-menu-btn{display:none;min-height:var(--n36-ctl);min-width:var(--n36-ctl);border:1.5px solid var(--n36-border);background:var(--n36-blanc);border-radius:var(--n36-r-md);cursor:pointer;color:var(--n36-ink);font:600 14px var(--n36-font)}
@media (max-width:860px){
  .n36-menu-btn{display:inline-flex;align-items:center;justify-content:center;padding:0 12px}
  .n36-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--n36-blanc);
    padding:8px var(--n36-gutter) 20px;border-bottom:1px solid var(--n36-border)}
  .n36-nav.is-open{display:flex}
  .n36-nav a:not(.n36-btn){padding:14px 2px;border-bottom:1px solid var(--n36-border-soft);font-size:17px}
  .n36-nav .n36-btn{margin-top:16px}
}

/* ---------- Hero ---------- */
.n36-hero{background:var(--n36-bg-hero);padding-block:var(--n36-sec-sm) var(--n36-sec)}
.n36-hero .n36-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--n36-sec-sm);align-items:center}
.n36-hero-t{display:grid;gap:var(--n36-s-xl);justify-items:start}
.n36-hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.n36-hero-note{font-size:14px;color:var(--n36-text-2)!important}
.n36-collage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--n36-s-md);align-items:start;max-width:520px}
.n36-collage figure{border-radius:var(--n36-r-card);overflow:hidden;box-shadow:var(--n36-shadow-3);background:var(--n36-ardoise-100)}
.n36-collage figure:nth-child(2){margin-top:var(--n36-s-xxl)}
.n36-collage img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (max-width:860px){.n36-hero .n36-wrap{grid-template-columns:1fr}.n36-collage{max-width:440px}}

/* ---------- Sections ---------- */
.n36-sec{padding-block:var(--n36-sec)}
.n36-sec-h{display:grid;gap:var(--n36-s-sm);margin-bottom:var(--n36-s-xxxl);justify-items:start}
.n36-alt{background:var(--n36-bg-section)}
.n36-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:var(--n36-s-xl)}
.n36-card{background:var(--n36-blanc);border:1px solid var(--n36-border);border-radius:var(--n36-r-card);padding:var(--n36-s-xl)!important;display:grid;gap:var(--n36-s-sm);align-content:start}
.n36-card--cta{align-self:start;justify-items:start}
.n36-bar{display:block;width:40px;height:4px;border-radius:2px;background:var(--n36-vert)}
.n36-card p{color:var(--n36-text-2);font-size:15px}

/* ---------- Réalisations ---------- */
.n36-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--n36-s-xl)}
.n36-gal figure{display:grid;gap:var(--n36-s-sm)}
.n36-ph{border-radius:var(--n36-r-card);overflow:hidden;background:var(--n36-ardoise-100);border:1px solid var(--n36-border)}
.n36-gal img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.n36-gal figcaption{font-size:15px;font-weight:500;color:var(--n36-ink)}
.n36-gal figcaption span{display:block;font-weight:400;color:var(--n36-text-2);font-size:14px}
.n36-note{margin-top:var(--n36-s-xl)!important;font-size:13px;color:var(--n36-text-2)!important}

/* ---------- Étapes ---------- */
.n36-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--n36-s-xxl);counter-reset:n36s}
.n36-steps li{display:grid;align-content:start;gap:var(--n36-s-xs);counter-increment:n36s;border-top:3px solid var(--n36-ink);padding-top:var(--n36-s-md)!important}
.n36-steps li::before{content:"0" counter(n36s);font-size:13px;font-weight:600;color:var(--n36-orange-deep);letter-spacing:.5px}
.n36-steps p{color:var(--n36-text-2);font-size:15px}

/* ---------- Bandeau CTA ---------- */
.n36-band{background:var(--n36-ardoise);color:var(--n36-blanc)}
.n36-band .n36-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--n36-s-xxl);align-items:center;padding-block:var(--n36-sec-sm)}
.n36-band .n36-h2{color:var(--n36-blanc)}
.n36-band p{color:var(--n36-ardoise-100);max-width:52ch;margin-top:var(--n36-s-sm)}
.n36-acc{color:var(--n36-vert)}
@media (max-width:720px){.n36-band .n36-wrap{grid-template-columns:1fr}}

/* ---------- Contact ---------- */
.n36-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--n36-s-xxl)}
.n36-coords{display:grid;gap:var(--n36-s-md)}
.n36-coords > div{display:grid;gap:2px;border-bottom:1px solid var(--n36-border);padding-bottom:var(--n36-s-md)}
.n36-coords dt{font-size:13px;font-weight:600;color:var(--n36-text-2);letter-spacing:.3px}
.n36-coords dd{font-size:17px;color:var(--n36-ink)}
.n36-todo{background:var(--n36-orange-50);color:var(--n36-ink);border-radius:var(--n36-r-md);padding:2px 8px;font-size:14px}

/* ---------- Contenu Builder ajouté sur l'accueil ---------- */
.n36-extra{background:var(--n36-bg)}

/* ---------- Page simple (mentions légales…) ---------- */
.n36-legal{padding-block:var(--n36-sec-sm) var(--n36-sec);max-width:72ch;display:grid;gap:var(--n36-s-xl)}
.n36-prose{display:grid;gap:var(--n36-s-md);font-size:16px;color:var(--n36-text)}
.n36-prose h2{font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.3px;color:var(--n36-ink);margin-top:var(--n36-s-md)}
.n36-prose h3{font-size:19px;font-weight:600;color:var(--n36-ink)}
.n36-prose :is(ul,ol){padding-left:1.25em;list-style:revert}
.n36-prose a{color:var(--n36-link)}

/* ---------- Pied de page ---------- */
#main-footer.n36-footer,.n36-footer{background:var(--n36-ink);color:var(--n36-ardoise-200);padding-block:var(--n36-sec-sm) var(--n36-s-xxl);font-family:var(--n36-font)}
.n36-footer .n36-wrap{display:grid;gap:var(--n36-s-xl)}
.n36-footer a{color:var(--n36-blanc)}
.n36-footer-top{display:flex;flex-wrap:wrap;gap:var(--n36-s-xl);justify-content:space-between;align-items:center}
.n36-footer-top img{height:32px;width:auto;background:var(--n36-blanc);padding:6px 10px;border-radius:var(--n36-r-md);box-sizing:border-box}
.n36-footer small{font-size:13px;color:var(--n36-ardoise-200)}
.n36-footer ul{display:flex;flex-wrap:wrap;gap:var(--n36-s-xl)}
.n36-footer :focus-visible{outline-color:var(--n36-vert)}