/* =========================================================================
   Emelaterre — feuille de style unique
   Direction : carnet de maraîchage contemporain, premium et chaleureux.
   ========================================================================= */

/* ------------------------------------------------------------ 1. Tokens */
:root{
  /* couleurs */
  --ivoire:#F6F3EA;
  --blanc-chaud:#FFFDF7;
  --vert-foret:#214638;
  --vert-profond:#173C2B;
  --vert-vegetal:#6F8D43;      /* decoratif uniquement */
  --vert-texte:#57712F;        /* version texte, contraste AA */
  --sauge:#DEE6D7;
  --sauge-pale:#EEF2E9;
  --brun-terre:#7A4E2D;
  --terre-cuite:#A65035;
  --rouge-tomate:#C94932;
  --jaune-solaire:#E7B34A;

  --texte:#243228;
  --texte-2:#55655A;
  --texte-clair:#EDEFE6;
  --texte-clair-2:#C3CFBD;
  --filet:#CFD7C7;
  --filet-sombre:#3A5A48;

  /* typographie */
  --sans:"Inter var",Inter,"Segoe UI Variable Text",-apple-system,
         BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,
          "Times New Roman",serif;

  /* mesures */
  --gouttiere:16px;
  --max:1200px;
  --bloc:clamp(56px,5vw + 28px,112px);
  --r-s:8px;
  --r-m:14px;
  --r-organique:170px 22px 170px 22px;
}

@media (min-width:768px){
  :root{--gouttiere:32px;}
}

/* ------------------------------------------------------------ 2. Base */
*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--ivoire);
  color:var(--texte);
  font-family:var(--sans);
  font-size:clamp(16px,15.2px + 0.22vw,17.5px);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

img,svg,picture{display:block;max-width:100%;}
img{height:auto;}

h1,h2,h3,h4{margin:0;color:var(--vert-foret);line-height:1.14;text-wrap:balance;}

h1,h2{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-0.012em;
}
h1{font-size:clamp(2.05rem,1.36rem + 2.7vw,3.4rem);line-height:1.08;}
h2{font-size:clamp(1.6rem,1.16rem + 1.7vw,2.45rem);}
h3{
  font-family:var(--sans);
  font-size:clamp(1.08rem,1rem + 0.42vw,1.32rem);
  font-weight:600;
  letter-spacing:-0.008em;
}

p{margin:0 0 1em;max-width:62ch;}
p:last-child{margin-bottom:0;}

a{color:var(--vert-foret);}
strong{font-weight:600;}

:focus-visible{
  outline:2.5px solid var(--vert-foret);
  outline-offset:3px;
  border-radius:3px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.lien-evitement{
  position:absolute;top:-100px;left:12px;z-index:80;
  background:var(--vert-foret);color:var(--blanc-chaud);
  padding:12px 18px;border-radius:0 0 var(--r-s) var(--r-s);
  text-decoration:none;font-size:0.95rem;
  transition:top .15s ease;
}
.lien-evitement:focus{top:0;}

/* ------------------------------------------------------------ 3. Structure */
.conteneur{
  width:min(100% - (var(--gouttiere) * 2),var(--max));
  margin-inline:auto;
}

.bloc{padding-block:var(--bloc);}
.bloc--serre{padding-block:calc(var(--bloc) * 0.72);}
.bloc--fin{padding-bottom:calc(var(--bloc) * 0.5);}

.fond-blanc{background:var(--blanc-chaud);}
.fond-sauge{background:var(--sauge-pale);}

.fond-sombre{
  background:var(--vert-profond);
  color:var(--texte-clair);
  position:relative;
  overflow:hidden;
}
.fond-sombre h2,.fond-sombre h3{color:var(--blanc-chaud);}
.fond-sombre p{color:var(--texte-clair-2);}

.filet-haut{border-top:1px solid var(--filet);}
.filet-bas{border-bottom:1px solid var(--filet);}

/* ------------------------------------------------------------ 4. Éléments éditoriaux */
.surtitre{
  display:flex;align-items:center;gap:12px;
  margin:0 0 16px;
  font-size:0.76rem;font-weight:600;
  letter-spacing:0.15em;text-transform:uppercase;
  color:var(--vert-texte);
  max-width:none;
}
.surtitre::after{
  content:"";flex:0 1 64px;height:1px;background:var(--filet);
}
.fond-sombre .surtitre{color:var(--jaune-solaire);}
.fond-sombre .surtitre::after{background:var(--filet-sombre);}

.intro{
  font-size:1.08em;
  color:var(--texte-2);
  max-width:58ch;
}
.fond-sombre .intro{color:var(--texte-clair-2);}

.tete-bloc{margin-bottom:clamp(30px,3.2vw,54px);}
.tete-bloc .intro{margin-top:16px;}

.note{
  font-size:0.86rem;
  color:var(--texte-2);
  max-width:60ch;
  padding-left:14px;
  border-left:2px solid var(--filet);
}

/* boutons */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;
  padding:13px 26px;
  border:1px solid transparent;border-radius:var(--r-m);
  font:inherit;font-size:0.97rem;font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,
             transform .2s ease;
}
.bouton--principal{background:var(--vert-foret);color:var(--blanc-chaud);}
.bouton--principal:hover{background:var(--vert-profond);transform:translateY(-1px);}
.bouton--clair{background:var(--jaune-solaire);color:var(--vert-profond);}
.bouton--clair:hover{background:#F0C264;transform:translateY(-1px);}
.bouton--contour{background:transparent;color:var(--vert-foret);border-color:var(--vert-foret);}
.bouton--contour:hover{background:var(--sauge);}
.bouton--large{width:100%;}

.lien-fleche{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;
  color:var(--vert-foret);
  font-size:0.96rem;font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--filet);
  padding-bottom:2px;
  transition:border-color .2s ease;
}
.lien-fleche::after{content:"→";transition:transform .2s ease;}
.lien-fleche:hover{border-bottom-color:var(--vert-foret);}
.lien-fleche:hover::after{transform:translateX(4px);}
.fond-sombre .lien-fleche{color:var(--jaune-solaire);border-bottom-color:var(--filet-sombre);}
.fond-sombre .lien-fleche:hover{border-bottom-color:var(--jaune-solaire);}

.actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  max-width:none;
}

/* pousse décorative */
.pousse{flex:none;width:22px;height:22px;color:var(--vert-vegetal);}

/* ------------------------------------------------------------ 5. En-tête */
.entete{
  position:sticky;top:0;z-index:60;
  background:rgba(246,243,234,.93);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--filet);
}
.entete-interne{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:74px;padding-block:9px;
}

.marque{
  display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--vert-foret);
}
.marque img{
  width:48px;height:48px;flex:none;border-radius:50%;
}
.marque-texte{display:flex;flex-direction:column;line-height:1.1;}
.marque-nom{
  font-family:var(--serif);font-size:1.24rem;letter-spacing:-0.01em;
}
.marque-sous{
  font-size:0.6rem;font-weight:600;letter-spacing:0.17em;
  text-transform:uppercase;color:var(--vert-texte);
}

.bascule-menu{
  display:none;align-items:center;gap:9px;
  min-height:46px;padding:9px 15px;
  background:transparent;color:var(--vert-foret);
  border:1px solid var(--filet);border-radius:var(--r-s);
  font:inherit;font-size:0.9rem;font-weight:600;cursor:pointer;
}
.bascule-menu:hover{background:var(--sauge);}

.nav-liste{
  display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);
  list-style:none;margin:0;padding:0;
}
.nav-liste a:not(.bouton){
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--vert-foret);text-decoration:none;font-size:0.95rem;
  border-bottom:1.5px solid transparent;
}
.nav-liste a:not(.bouton):hover{border-bottom-color:var(--vert-vegetal);}
.nav-liste a[aria-current="page"]{border-bottom-color:var(--vert-foret);font-weight:600;}
.nav-cta{min-height:44px;padding:11px 19px;font-size:0.92rem;}

@media (max-width:1000px){
  .bascule-menu{display:inline-flex;}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--ivoire);
    border-bottom:1px solid var(--filet);
    box-shadow:0 16px 26px -20px rgba(23,60,43,.5);
  }
  .nav[hidden]{display:none;}
  .nav-liste{
    flex-direction:column;align-items:stretch;gap:0;
    width:min(100% - (var(--gouttiere) * 2),var(--max));
    margin-inline:auto;padding:6px 0 18px;
  }
  .nav-liste li + li{border-top:1px solid var(--filet);}
  .nav-liste a:not(.bouton){min-height:54px;width:100%;}
  .nav-liste li:last-child{border-top:0;padding-top:14px;}
  .nav-cta{width:100%;}

  /* Sans JavaScript : navigation dépliée, en-tête non collant. */
  .no-js .entete{position:static;}
  .no-js .bascule-menu{display:none;}
  .no-js .entete-interne{flex-wrap:wrap;padding-bottom:4px;}
  .no-js .nav{position:static;width:100%;background:none;border:0;box-shadow:none;}
  .no-js .nav-liste{
    flex-direction:row;flex-wrap:wrap;align-items:center;
    width:auto;padding:0 0 10px;gap:2px 20px;
  }
  .no-js .nav-liste li + li{border-top:0;}
  .no-js .nav-liste li:last-child{padding-top:0;}
  .no-js .nav-liste a:not(.bouton){width:auto;min-height:44px;}
  .no-js .nav-cta{width:auto;}
}

/* ------------------------------------------------------------ 6. Hero */
.hero{padding-block:clamp(36px,3.6vw + 18px,78px) var(--bloc);}
.hero-grille{
  display:grid;gap:clamp(30px,3.6vw,66px);align-items:center;
}
@media (min-width:1001px){
  .hero-grille{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);}
}
.hero-texte .intro{margin-top:20px;}
.hero .actions{margin-top:30px;}

.repere-lieu{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:26px;
  font-size:0.88rem;color:var(--texte-2);
}
.repere-lieu svg{width:16px;height:16px;color:var(--terre-cuite);flex:none;}

/* cadre organique de la photographie */
.cadre-photo{
  position:relative;
  margin:0;
  max-width:600px;
  margin-inline:auto;
  padding:13px;
}
.cadre-photo::before{
  content:"";position:absolute;inset:0;
  border:1px solid var(--filet);
  border-radius:var(--r-organique);
  pointer-events:none;
}
.cadre-photo img{
  width:100%;
  border-radius:var(--r-organique);
  box-shadow:0 28px 48px -34px rgba(23,60,43,.55);
}
/* brins decoratifs : places dans les angles laisses libres par le cadre
   organique, sans jamais sortir de la boite (aucun debordement possible). */
.cadre-photo .brin{
  position:absolute;
  width:56px;height:auto;
  color:var(--vert-vegetal);
  opacity:.42;
  pointer-events:none;
}
.cadre-photo .brin--hg{top:4px;left:2px;transform:rotate(-16deg);}
.cadre-photo .brin--bd{bottom:4px;right:2px;transform:rotate(164deg);}
@media (max-width:560px){
  .cadre-photo .brin{width:42px;opacity:.34;}
}

/* ------------------------------------------------------------ 7. Repères rapides */
.reperes-bande{padding-block:clamp(24px,2.4vw,36px);}
.reperes{
  display:grid;
  gap:0;
}
@media (min-width:700px){
  .reperes{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1001px){
  .reperes{grid-template-columns:repeat(4,minmax(0,1fr));}
}
.repere{
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 22px 16px 0;
  border-top:1px solid var(--filet);
}
@media (min-width:1001px){
  .repere{
    border-top:0;
    padding:4px 24px 4px 0;
    border-left:1px solid var(--filet);
    padding-left:22px;
  }
  .repere:first-child{border-left:0;padding-left:0;}
}
.repere p{
  margin:0;
  font-size:1rem;font-weight:600;
  color:var(--vert-foret);
  max-width:22ch;
}

/* ------------------------------------------------------------ 8. Questions */
.questions-grille{
  display:grid;
  gap:clamp(26px,3vw,40px);
  align-items:start;
}
@media (min-width:1000px){
  .questions-grille{
    grid-template-columns:minmax(0,40fr) minmax(0,60fr);
    column-gap:clamp(40px,4.6vw,86px);
    row-gap:clamp(24px,2.6vw,38px);
  }
  .questions-edito{grid-column:1;grid-row:1;}
  .liste-questions{grid-column:2;grid-row:1 / span 2;}
  .conclusion-questions{grid-column:1;grid-row:2;}
}
.questions-edito .intro{margin-top:16px;}

.liste-questions{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
}
.liste-questions li{
  display:flex;align-items:baseline;gap:16px;
  padding:15px 0;
  border-bottom:1px dashed var(--filet);
  font-family:var(--serif);
  font-size:clamp(1.08rem,1rem + 0.5vw,1.36rem);
  color:var(--vert-foret);
}
.liste-questions li:first-child{border-top:1px dashed var(--filet);}
.liste-questions .puce{
  flex:none;
  min-width:2.4ch;
  font-family:var(--sans);
  font-size:0.74rem;font-weight:700;letter-spacing:0.06em;
  color:var(--vert-texte);
}
.conclusion-questions{
  margin:0;
  padding:22px 26px;
  background:var(--sauge-pale);
  border-left:3px solid var(--vert-vegetal);
  border-radius:0 var(--r-m) var(--r-m) 0;
  font-family:var(--serif);
  font-size:clamp(1.06rem,1rem + 0.4vw,1.24rem);
  color:var(--vert-foret);
  max-width:46ch;
}

/* ------------------------------------------------------------ 9. Services */
.services{
  display:flex;flex-direction:column;
}
.service{
  display:grid;
  gap:6px 26px;
  padding-block:clamp(26px,2.6vw,40px);
  border-top:1px solid var(--filet);
  align-items:start;
}
.service:last-child{border-bottom:1px solid var(--filet);}

@media (min-width:860px){
  .service{
    grid-template-columns:4.5ch minmax(0,34ch) minmax(0,1fr) 32px;
    column-gap:clamp(18px,2vw,32px);
    align-items:baseline;
  }
  .service p{padding-top:2px;}
}

.service-num{
  font-size:0.78rem;font-weight:600;letter-spacing:0.1em;
  color:var(--texte-2);
  padding-top:5px;
}
.service h3{margin:0;}
.service p{margin:0;color:var(--texte-2);max-width:56ch;}
.service-motif{display:none;}
@media (min-width:860px){
  .service-motif{
    display:block;width:28px;height:28px;color:var(--vert-vegetal);opacity:.45;
    justify-self:end;align-self:start;
  }
}

/* ------------------------------------------------------------ 10. Méthode */
.etapes{
  list-style:none;margin:0;padding:0;
  position:relative;
  display:grid;gap:clamp(24px,2.6vw,38px);
}
@media (min-width:860px){
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(34px,4vw,72px);}
}
.etape{
  position:relative;
  padding-left:58px;
}
.etape-num{
  position:absolute;left:0;top:-2px;
  width:40px;height:40px;
  display:grid;place-items:center;
  border:1px solid var(--vert-foret);border-radius:50%;
  background:var(--blanc-chaud);
  font-size:0.94rem;font-weight:700;color:var(--vert-foret);
}
.etape::after{
  content:"";position:absolute;left:19.5px;top:44px;bottom:-26px;
  width:1px;background:var(--filet);
}
.etape:last-child::after{display:none;}
@media (min-width:860px){
  .etape::after{display:none;}
}
.etape h3{margin-bottom:8px;}
.etape p{color:var(--texte-2);margin:0;max-width:52ch;}

/* ------------------------------------------------------------ 11. Section émotionnelle */
.emotion{position:relative;}
.emotion-motif{
  position:absolute;inset:0;
  color:#2A5540;
  opacity:.5;
  pointer-events:none;
}
.emotion-grille{
  position:relative;
  display:grid;
  gap:clamp(26px,3vw,40px);
}
@media (min-width:1000px){
  .emotion-grille{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    column-gap:clamp(44px,5vw,96px);
    align-items:center;
  }
}
.emotion-citation{
  font-family:var(--serif);
  font-size:clamp(2rem,1.2rem + 3.4vw,3.5rem);
  line-height:1.1;
  color:var(--blanc-chaud);
  margin:0;
  max-width:16ch;
  text-wrap:balance;
}
.emotion-citation .accent{color:var(--jaune-solaire);}
.emotion p{font-size:1.06em;max-width:46ch;}
.emotion-trait{
  display:block;width:64px;height:1px;
  background:var(--jaune-solaire);
  opacity:.8;
  margin-bottom:22px;
}
.emotion-legumes{
  display:flex;flex-wrap:wrap;gap:10px 12px;
  margin:28px 0 0;padding:0;list-style:none;
}
.emotion-legumes li{
  font-size:0.86rem;
  color:var(--texte-clair);
  border:1px solid var(--filet-sombre);
  border-radius:999px;
  padding:7px 15px;
}
.emotion-legumes li:first-child{
  border-color:var(--rouge-tomate);
  color:#F6C9BF;
}

/* ------------------------------------------------------------ 12. Emeric */
.emeric-grille{
  display:grid;gap:clamp(28px,3.4vw,62px);align-items:center;
}
@media (min-width:860px){
  .emeric-grille{grid-template-columns:minmax(0,.72fr) minmax(0,1fr);}
}
.emeric-media{justify-self:center;width:100%;}

/* portrait recadre d'Emeric, cadre organique sobre */
.portrait{
  position:relative;margin:0;
  width:100%;max-width:372px;
  margin-inline:auto;
  padding:11px;
}
.portrait::before{
  content:"";position:absolute;inset:0;
  border:1px solid var(--filet);
  border-radius:132px 18px 132px 18px;
  pointer-events:none;
}
.portrait img{
  width:100%;
  border-radius:124px 12px 124px 12px;
}

.emeric-texte p{margin-top:18px;color:var(--texte-2);}
.emeric-texte .actions{margin-top:28px;}
.signature{
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--vert-foret);
  margin-top:26px;
}

/* ------------------------------------------------------------ 13. Appel final */
.appel{
  position:relative;
  border-radius:96px 18px 96px 18px;
  padding:clamp(34px,4vw,64px) clamp(24px,3.4vw,58px);
  background:var(--ivoire);
  border:1px solid var(--filet);
  text-align:center;
}
.appel h2{margin-inline:auto;max-width:26ch;}
.appel p{margin:20px auto 0;color:var(--texte-2);}
.appel .actions{justify-content:center;margin-top:30px;}
.appel-brin{
  width:44px;height:auto;margin:0 auto 18px;
  color:var(--vert-vegetal);opacity:.7;
}

/* ------------------------------------------------------------ 14. Pages internes */
.page-tete{
  padding-block:clamp(34px,3.4vw + 16px,70px) clamp(26px,2.6vw,44px);
  border-bottom:1px solid var(--filet);
}
.page-tete .intro{margin-top:18px;}

.fil{
  display:flex;flex-wrap:wrap;gap:8px;
  list-style:none;margin:0 0 20px;padding:0;
  font-size:0.84rem;color:var(--texte-2);
}
.fil a{color:var(--texte-2);}
.fil li + li::before{content:"›";margin-right:8px;color:var(--filet);}

/* page Emeric : colonnes alignees en haut, portrait en tete de colonne */
.apropos-grille{
  display:grid;
  gap:clamp(28px,3.2vw,54px);
  align-items:start;
}
.apropos-media{width:100%;}
.apropos-media-interne{width:100%;}
.apropos-devise{
  margin:20px 0 0;
  font-family:var(--serif);
  font-size:1.02rem;
  color:var(--texte-2);
  text-align:center;
  max-width:26ch;
  margin-inline:auto;
}
@media (max-width:999px){
  .apropos-media .portrait{max-width:300px;}
}
@media (min-width:1000px){
  .apropos-grille{
    grid-template-columns:minmax(0,38fr) minmax(0,62fr);
    column-gap:clamp(40px,4.6vw,84px);
  }
  .apropos-media{align-self:stretch;}
  .apropos-media-interne{position:sticky;top:104px;}
  .apropos-devise{text-align:left;margin-inline:0;}
}

.texte-long{max-width:68ch;}
.texte-long h2{margin-top:clamp(34px,3vw,52px);}
.texte-long h3{margin-top:28px;}
.texte-long h2 + p,.texte-long h3 + p{margin-top:14px;}
.texte-long p,.texte-long li{color:var(--texte-2);}
.texte-long ul{padding-left:22px;margin:0 0 1em;}
.texte-long li{margin-bottom:8px;}
.texte-long li::marker{color:var(--vert-texte);}
.texte-long > p:first-child{margin-top:0;}

.a-completer{
  display:inline-block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.84em;
  background:#F3E7CF;
  color:#6B4A16;
  border:1px dashed #C9A15A;
  border-radius:5px;
  padding:1px 7px;
  white-space:nowrap;
}
.encart-avertissement{
  margin-bottom:clamp(26px,3vw,40px);
  padding:20px 22px;
  background:#F7EEDC;
  border:1px solid #DCC189;
  border-left:4px solid var(--jaune-solaire);
  border-radius:0 var(--r-m) var(--r-m) 0;
}
.encart-avertissement p{color:#5E4718;font-size:0.94rem;}
.encart-avertissement strong{color:#4A380F;}

/* ------------------------------------------------------------ 15. Formulaire */
.contact-grille{
  display:grid;gap:clamp(30px,3.4vw,64px);align-items:start;
}
@media (min-width:960px){
  .contact-grille{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);}
}
.coordonnees{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;gap:14px;
}
.coordonnees li{display:grid;gap:3px;justify-items:start;}
.coordonnees .etiquette{
  font-size:0.74rem;font-weight:600;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--vert-texte);
}
.coordonnees a{font-weight:500;}
.coord-lien{
  display:inline-flex;align-items:center;min-height:34px;
  text-decoration-color:var(--filet);text-underline-offset:3px;
}
.coord-lien:hover{text-decoration-color:var(--vert-foret);}

.formulaire{
  background:var(--blanc-chaud);
  border:1px solid var(--filet);
  border-radius:var(--r-m);
  padding:clamp(20px,2.4vw,34px);
}
.legende-form{font-size:0.86rem;color:var(--texte-2);margin-bottom:22px;}
.obligatoire{color:var(--terre-cuite);}

.duo{display:grid;gap:0 20px;}
@media (min-width:560px){.duo{grid-template-columns:repeat(2,minmax(0,1fr));}}

.champ{margin-bottom:20px;}
.champ > label{
  display:block;margin-bottom:7px;
  font-size:0.92rem;font-weight:600;color:var(--vert-foret);
}
.champ input,.champ select,.champ textarea{
  width:100%;min-height:50px;
  padding:12px 14px;
  font:inherit;font-size:1rem;color:var(--texte);
  background:var(--ivoire);
  border:1px solid var(--filet);border-radius:var(--r-s);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.champ textarea{min-height:140px;resize:vertical;line-height:1.6;}
.champ select{
  appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23214638' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  border-color:var(--vert-foret);
  box-shadow:0 0 0 3px rgba(33,70,56,.13);
  outline:none;
}
.champ [aria-invalid="true"]{border-color:var(--terre-cuite);background:#FDF4F1;}

.champ-case{
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:20px;
}
.champ-case input{
  width:22px;height:22px;min-height:0;flex:none;margin-top:3px;
  accent-color:var(--vert-foret);
}
.champ-case label{font-size:0.92rem;color:var(--texte-2);font-weight:400;}
.champ-case .erreur{flex-basis:100%;}

.erreur{margin:7px 0 0;font-size:0.85rem;color:var(--terre-cuite);}
.erreur[hidden]{display:none;}

.mention-demo{
  margin:4px 0 18px;
  font-size:0.87rem;color:var(--texte-2);
}
.encart-noscript{
  margin-bottom:20px;padding:14px 16px;
  background:var(--sauge);border-radius:var(--r-s);
  font-size:0.9rem;
}

.recap{
  margin-top:26px;padding:24px;
  background:var(--sauge-pale);
  border:1px solid var(--filet);border-radius:var(--r-m);
}
.recap[hidden]{display:none;}
.recap p{margin:10px 0 0;color:var(--texte-2);font-size:0.94rem;}
.recap-texte{
  margin:16px 0 0;padding:16px;
  background:var(--blanc-chaud);
  border:1px solid var(--filet);border-radius:var(--r-s);
  font-family:inherit;font-size:0.93rem;line-height:1.62;
  white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;
}
.recap-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  margin-top:18px !important;max-width:none;
}
.recap-etat{font-size:0.88rem;color:var(--texte-2);}

/* ------------------------------------------------------------ 16. 404 */
.page-404{
  min-height:60vh;
  display:grid;place-items:center;
  text-align:center;
}
.page-404 .code{
  font-family:var(--serif);
  font-size:clamp(3.4rem,2rem + 7vw,6rem);
  line-height:1;color:var(--sauge);
  margin-bottom:12px;
}
.page-404 p{margin-inline:auto;}
.page-404 .actions{justify-content:center;margin-top:28px;}

/* ------------------------------------------------------------ 17. Pied de page */
.pied{
  background:var(--vert-profond);
  color:var(--texte-clair-2);
  padding-block:clamp(42px,4vw,66px) 24px;
}
.pied a{color:var(--texte-clair);}

.pied-grille{
  display:grid;
  gap:clamp(30px,3vw,44px);
}
@media (min-width:780px){
  .pied-grille{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1000px){
  .pied-grille{
    grid-template-columns:minmax(0,40fr) minmax(0,20fr) minmax(0,40fr);
    column-gap:clamp(32px,3.4vw,56px);
  }
}

.pied-marque{
  display:flex;align-items:flex-start;gap:16px;
}
.pied-marque img{width:56px;height:56px;border-radius:50%;flex:none;}
.pied-nom{
  font-family:var(--serif);font-size:1.34rem;color:var(--blanc-chaud);
  margin:0 0 6px;
}
.pied-signature{
  font-family:var(--serif);font-size:1.02rem;color:var(--jaune-solaire);
  max-width:34ch;margin:0;
}

.pied h2{
  font-family:var(--sans);
  font-size:0.72rem;font-weight:600;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--texte-clair-2);
  margin:0 0 12px;
}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.pied ul a{
  display:inline-flex;align-items:center;min-height:38px;
  text-decoration:none;font-size:0.94rem;
  border-bottom:1px solid transparent;
}
.pied ul a:hover{border-bottom-color:var(--jaune-solaire);}

.pied-contact ul{gap:6px;}
.pied-contact li{
  display:flex;align-items:center;gap:11px;
  font-size:0.94rem;
}
.pied-contact .ico{
  width:17px;height:17px;flex:none;
  color:var(--jaune-solaire);opacity:.85;
}
.pied-lieu{min-height:38px;}

.pied-bas{
  margin-top:clamp(34px,3.4vw,52px);
  padding-top:20px;
  border-top:1px solid var(--filet-sombre);
  display:flex;flex-wrap:wrap;gap:8px 28px;
  align-items:center;justify-content:space-between;
  font-size:0.84rem;
}
.pied-bas p{margin:0;color:var(--texte-clair-2);max-width:none;flex:0 1 auto;}
.pied .pied-legal{
  display:flex;flex-wrap:wrap;gap:0 22px;
  list-style:none;margin:0;padding:0;
  flex:0 0 auto;
}
.pied-legal li{white-space:nowrap;}
.pied-legal a{
  font-size:0.84rem;
  color:var(--texte-clair-2);
  text-decoration-color:var(--filet-sombre);
  text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:34px;
}
.pied-legal a:hover{color:var(--blanc-chaud);}
.credit-starlead a{
  color:var(--texte-clair-2);
  text-decoration-color:var(--filet-sombre);
  text-underline-offset:3px;
}
.credit-starlead a:hover{color:var(--blanc-chaud);}

/* ------------------------------------------------------------ 18. Apparition douce */
.apparait{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease,transform .6s ease;
}
.apparait.vu{opacity:1;transform:none;}
.no-js .apparait{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .apparait{opacity:1 !important;transform:none !important;transition:none;}
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
  }
}

/* ------------------------------------------------------------ 19. Entretien du jardin */

/* rappel discret sur la page d'accueil */
.jardin-bande{border-top:1px solid var(--filet);}
.jardin-grille{
  display:grid;gap:clamp(24px,2.8vw,48px);align-items:center;
}
@media (min-width:900px){
  .jardin-grille{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);}
}
.jardin-grille .actions{margin-top:22px;}
.jardin-familles{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;
}
.jardin-familles li{
  display:flex;align-items:center;gap:12px;
  padding:13px 0;
  border-bottom:1px solid var(--filet);
  color:var(--vert-foret);
  font-size:0.99rem;font-weight:600;
}
.jardin-familles li:first-child{border-top:1px solid var(--filet);}
.jardin-familles .pousse{width:19px;height:19px;}

/* hero de page interne avec actions */
.page-tete--hero .actions{margin-top:28px;}
.page-tete--hero .repere-lieu{margin-top:22px;}

/* quatre familles de prestations */
.familles{display:flex;flex-direction:column;}
.famille{
  display:grid;gap:14px clamp(24px,3vw,56px);
  padding-block:clamp(26px,2.8vw,42px);
  border-top:1px solid var(--filet);
  align-items:start;
}
.famille:last-child{border-bottom:1px solid var(--filet);}
@media (min-width:900px){
  .famille{grid-template-columns:minmax(0,36fr) minmax(0,64fr);}
}
.famille-num{
  font-size:0.78rem;font-weight:600;letter-spacing:0.1em;
  color:var(--texte-2);margin:0 0 8px;
}
.famille-tete h3{
  font-size:clamp(1.14rem,1.02rem + 0.5vw,1.42rem);
  margin-bottom:10px;
}
.famille-chapo{margin:0;color:var(--texte-2);font-size:0.96rem;max-width:34ch;}

.liste-prestations{
  list-style:none;margin:0;padding:0;
  display:grid;gap:9px 30px;
}
@media (min-width:620px){
  .liste-prestations{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.liste-prestations li{
  position:relative;
  padding-left:24px;
  font-size:0.97rem;
  color:var(--texte);
}
.liste-prestations li::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:11px;height:11px;
  border-radius:70% 8% 70% 8%;
  background:var(--vert-vegetal);
  opacity:.55;
  transform:rotate(-12deg);
}
.famille-note{
  margin:16px 0 0;
  font-size:0.88rem;color:var(--texte-2);
  padding-left:14px;border-left:2px solid var(--filet);
  max-width:46ch;
}
.note--limites{margin-top:clamp(26px,3vw,40px);}

/* autre besoin */
.autre-besoin{
  display:grid;gap:20px clamp(24px,3vw,48px);align-items:center;
}
@media (min-width:860px){
  .autre-besoin{grid-template-columns:minmax(0,1fr) auto;}
}
.autre-besoin h2{font-size:clamp(1.4rem,1.14rem + 1vw,1.9rem);}
.autre-besoin p{margin-top:12px;color:var(--texte-2);}
.autre-besoin .actions{margin:0;}

/* ponctuel / régulier */
.options{
  display:grid;gap:clamp(18px,2.2vw,32px);
}
@media (min-width:760px){
  .options{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.option{
  padding:clamp(22px,2.4vw,32px);
  background:var(--blanc-chaud);
  border:1px solid var(--filet);
  border-radius:54px 14px 54px 14px;
}
.option .pousse{width:26px;height:26px;margin-bottom:14px;}
.option h3{margin-bottom:10px;}
.option p{margin:0;color:var(--texte-2);}
.options-actions{margin-top:clamp(26px,3vw,40px);}

/* questions pratiques + zone : deux colonnes éditoriales */
.pratique-grille,.zone-grille{
  display:grid;gap:clamp(20px,2.6vw,54px);align-items:start;
}
@media (min-width:900px){
  .pratique-grille,.zone-grille{grid-template-columns:minmax(0,40fr) minmax(0,60fr);}
}
.pratique-grille h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.78rem);}
.zone-grille h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.78rem);}
.pratique-grille p,.zone-grille p{color:var(--texte-2);}
.zone-grille .repere-lieu{margin-top:18px;}

/* ------------------------------------------------------------ 20. Pages locales */

/* grille de liens par zone, sous la section « Autour de Couthuin » */
.zones-liens{grid-column:1 / -1;margin-top:clamp(22px,2.4vw,34px);}
.zones-liens-titre{
  font-size:0.8rem;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--vert-texte);
  margin:0 0 14px;max-width:none;
}
.zones-liens ul{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0 clamp(20px,2.4vw,40px);
}
@media (min-width:560px){.zones-liens ul{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:960px){.zones-liens ul{grid-template-columns:repeat(4,minmax(0,1fr));}}
.zones-liens li{border-top:1px solid var(--filet);}
.zones-liens a{
  display:flex;align-items:center;
  min-height:46px;padding:6px 0;
  color:var(--vert-foret);text-decoration:none;
  font-size:0.95rem;font-weight:500;
}
.zones-liens a::before{
  content:"";flex:none;
  width:9px;height:9px;margin-right:11px;
  border-radius:70% 8% 70% 8%;
  background:var(--vert-vegetal);opacity:.6;
  transform:rotate(-12deg);
}
.zones-liens a:hover{color:var(--vert-profond);text-decoration:underline;
  text-underline-offset:3px;}

/* besoins prioritaires d'une zone */
.besoins-locaux{
  display:grid;gap:0 clamp(26px,3vw,56px);
}
@media (min-width:820px){
  .besoins-locaux{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.besoin-local{
  padding-block:clamp(22px,2.4vw,32px);
  border-top:1px solid var(--filet);
}
.besoin-local h3{margin-bottom:10px;}
.besoin-local p{margin:0;color:var(--texte-2);max-width:44ch;}
.besoin-local .lien-fleche{margin-top:12px;}
@media (min-width:820px){
  .besoins-locaux--quatre .besoin-local:nth-last-child(-n+2),
  .besoins-locaux .besoin-local:nth-last-child(-n+2){border-bottom:1px solid var(--filet);}
}
@media (max-width:819px){
  .besoin-local:last-child{border-bottom:1px solid var(--filet);}
}

/* familles de services d'une zone */
.services-locaux{
  display:grid;gap:clamp(24px,2.6vw,40px) clamp(26px,3vw,56px);
}
@media (min-width:760px){
  .services-locaux{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.service-local{
  padding-top:20px;
  border-top:1px solid var(--filet);
}
.service-local h3{margin-bottom:12px;}
.liste-prestations--compacte{grid-template-columns:minmax(0,1fr);gap:7px;}
@media (min-width:620px){
  .liste-prestations--compacte{grid-template-columns:minmax(0,1fr);}
}

/* encart potager contextuel */
.encart-potager{
  display:grid;gap:18px clamp(24px,3vw,48px);align-items:center;
}
@media (min-width:860px){
  .encart-potager{grid-template-columns:minmax(0,1fr) auto;}
}
.encart-potager h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.72rem);}
.encart-potager p{margin-top:12px;color:var(--texte-2);}
.encart-potager .actions{margin:0;}

/* FAQ locale */
.faq-grille{display:grid;gap:clamp(22px,2.6vw,54px);align-items:start;}
@media (min-width:900px){
  .faq-grille{grid-template-columns:minmax(0,38fr) minmax(0,62fr);}
}
.faq-grille h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.78rem);}
.faq-liste{display:grid;gap:0;}
.faq-item{
  padding-block:20px;
  border-top:1px solid var(--filet);
}
.faq-item:last-child{border-bottom:1px solid var(--filet);}
.faq-item h3{
  font-size:clamp(1rem,0.96rem + 0.28vw,1.12rem);
  margin-bottom:8px;
}
.faq-item p{margin:0;color:var(--texte-2);}

/* zones voisines */
.voisins-bande{border-top:1px solid var(--filet);}
.voisins{
  display:grid;gap:14px clamp(24px,3vw,48px);align-items:baseline;
}
@media (min-width:760px){
  .voisins{grid-template-columns:auto minmax(0,1fr);}
}
.voisins h2{
  font-family:var(--sans);
  font-size:0.78rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--vert-texte);
}
.voisins ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 10px;
}
.voisins a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:8px 16px;
  border:1px solid var(--filet);border-radius:999px;
  color:var(--vert-foret);text-decoration:none;
  font-size:0.92rem;
  transition:background-color .18s ease,border-color .18s ease;
}
.voisins a:hover{background:var(--sauge);border-color:var(--vert-vegetal);}

/* ------------------------------------------------------------ 21. SEO local V1 (30/09/2026)
   Ajouts minimes pour les nouvelles pages services : aucune règle existante modifiée. */

/* liens vers les pages services, dans les familles du hub */
.famille-liens{display:flex;flex-wrap:wrap;gap:4px 26px;margin:16px 0 0;max-width:none;}

/* accueil : familles du jardin devenues des liens */
.jardin-familles a{color:inherit;text-decoration:none;}
.jardin-familles a:hover{text-decoration:underline;text-underline-offset:3px;}

/* liste de prestations dans une colonne éditoriale */
.pratique-grille .liste-prestations{margin-block:18px 20px;}

/* liens contextuels dans les composants existants */
.service-local .lien-fleche{margin-top:12px;}
.option .actions{margin-top:16px;gap:4px 24px;}
.services-actions{margin-top:clamp(22px,2.4vw,34px);}
.questions-edito .actions{margin-top:16px;}

/* formulaire : champ piège anti-robot, invisible pour les visiteurs */
.champ-piege{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
.form-erreur{margin:0 0 16px;padding:12px 14px;border-left:2px solid var(--terre-cuite);background:var(--blanc-chaud);}
.formulaire [type="submit"][disabled]{opacity:.7;cursor:progress;}
#form-succes{scroll-margin-top:96px;}

/* ------------------------------------------------------------ 22. Réalisations (30/09/2026)
   Page /realisations/ et photo de preuve isolée sur quelques pages : aucune règle existante modifiée. */
.real-sommaire{margin-top:24px;gap:2px 26px;}
.real-note{margin-top:18px;}

.real-bloc{display:grid;gap:clamp(22px,2.8vw,52px);align-items:start;}
@media (min-width:900px){
  .real-bloc{grid-template-columns:minmax(0,31fr) minmax(0,69fr);}
}
.real-texte h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.78rem);}
.real-texte p{color:var(--texte-2);}
.real-texte h2 + p{margin-top:14px;}
.real-texte .actions{margin-top:18px;}

.real-galerie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);}
.real-galerie .real-photo--principale{grid-column:1 / -1;}
@media (min-width:700px){
  .real-galerie--trio{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
  .real-galerie--cinq{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);}
  .real-galerie--trio .real-photo--principale,
  .real-galerie--cinq .real-photo--principale{grid-column:auto;grid-row:span 2;}
}
.real-photo{margin:0;display:flex;flex-direction:column;min-width:0;}
.real-photo picture{display:block;}
.real-photo img,.photo-preuve img{
  display:block;width:100%;height:auto;aspect-ratio:3 / 4;object-fit:cover;
  border-radius:var(--r-m);background:var(--sauge);
}
@media (min-width:700px){
  .real-galerie--trio .real-photo--principale picture,
  .real-galerie--cinq .real-photo--principale picture{position:relative;flex:1 1 auto;min-height:0;}
  .real-galerie--trio .real-photo--principale img,
  .real-galerie--cinq .real-photo--principale img{position:absolute;inset:0;height:100%;aspect-ratio:auto;}
}
.real-photo figcaption,.photo-preuve figcaption{
  margin-top:9px;font-size:0.84rem;line-height:1.45;color:var(--texte-2);
}

/* photo de preuve isolée dans une colonne éditoriale existante */
.photo-preuve{margin:24px 0 0;max-width:360px;}
.photo-preuve figcaption a{white-space:nowrap;}

/* ------------------------------------------------------------ 22. Navigation — 6 liens (ajout « Réalisations ») */
/* Entre 1001 et 1140 px, les 6 liens + le bouton tiennent sur une ligne sans retour à la ligne. */
@media (min-width:1001px) and (max-width:1140px){
  .entete-interne{gap:14px;}
  .nav-liste{gap:13px;}
  .nav-liste a:not(.bouton),.nav-cta{white-space:nowrap;}
  .nav-cta{padding-inline:15px;}
}
@media (min-width:1001px) and (max-width:1023px){
  .marque-sous{white-space:nowrap;}
  .entete-interne{gap:10px;}
  .nav-liste{gap:10px;}
}