/* ══════════════════════════════════════════════════════════════════════════
   Le Jardin des Promesses — socle graphique du site
   Palette et typographie reprises du logiciel : la marque doit être la même
   d'un bout à l'autre, du devis reçu par e-mail à la page d'accueil.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Palette — identique à src/renderer/css/theme.css du logiciel. */
  --vert:#1a4a3a;
  --vert2:#2d6b53;
  --vert3:#0f2f24;
  --vert-clair:#e6efe9;
  --or:#b8975a;
  --or2:#a07840;
  --or-clair:#f5efe3;
  --creme:#faf8f4;
  --creme2:#f2ede4;
  --blanc:#ffffff;
  --encre:#2c2c2c;
  --encre2:#4f4f4f;
  --gris:#7a7a7a;
  --gris-clair:#9d9d9d;
  --bord:#e2ddd3;
  --bord-fonce:#d4cfc7;
  --danger:#c0392b;
  --succes:#2f8f6a;

  --serif:"Cormorant Garamond",Cormorant,Georgia,"Times New Roman",serif;
  --sans:"Jost","Inter","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,monospace;

  /* Rythme vertical : une seule variable pilote la respiration des sections,
     ce qui garde la page cohérente d'un bloc à l'autre. */
  --section:clamp(72px,10vw,140px);
  --marge:clamp(20px,5vw,64px);
  --largeur:1320px;
  --largeur-texte:660px;

  --r-s:4px;
  --r-m:8px;
  --r-l:18px;

  --ombre-s:0 1px 3px rgba(26,74,58,.06);
  --ombre-m:0 6px 26px rgba(26,74,58,.09);
  --ombre-l:0 24px 70px rgba(15,47,36,.16);

  --transition:.5s cubic-bezier(.22,.61,.36,1);
  --entete:78px;
}

/* ───────────────────────────────────────────────────────────────── reset ── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* L'en-tête est fixe : sans cela, une ancre place son titre dessous. */
  scroll-padding-top:calc(var(--entete) + 20px);
}

body{
  font-family:var(--sans);
  font-size:17px;
  font-weight:300;
  line-height:1.75;
  color:var(--encre2);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
svg{display:block}

:focus-visible{
  outline:2px solid var(--or);
  outline-offset:3px;
  border-radius:2px;
}

::selection{background:var(--or);color:#fff}

/* ────────────────────────────────────────────────────────── typographie ── */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.14;
  color:var(--vert);
  letter-spacing:-.005em;
}

h1{font-size:clamp(2.6rem,6.4vw,5rem)}
h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
h4{font-size:1.2rem}

.surtitre{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--or2);
  display:block;
  margin-bottom:22px;
}

.chapo{
  font-size:clamp(1.05rem,1.6vw,1.22rem);
  line-height:1.85;
  color:var(--encre2);
  font-weight:300;
}

.serif-italique{font-family:var(--serif);font-style:italic}

/* Filet doré : sépare sans trancher, et se retrouve sur les documents. */
.filet{
  width:52px;height:1px;
  background:var(--or);
  margin:26px 0;
  border:0;
}
.filet.centre{margin-left:auto;margin-right:auto}

/* ───────────────────────────────────────────────────────────── structure ── */

.enveloppe{
  width:100%;
  max-width:var(--largeur);
  margin-inline:auto;
  padding-inline:var(--marge);
}
.enveloppe.etroite{max-width:900px}

.section{padding-block:var(--section)}
.section.creme{background:var(--creme)}
.section.blanc{background:var(--blanc)}
.section.ivoire{background:var(--creme2)}
.section.vert{background:var(--vert);color:rgba(255,255,255,.82)}
.section.vert h1,.section.vert h2,.section.vert h3{color:var(--blanc)}
.section.vert .surtitre{color:var(--or)}
.section.vert .filet{background:var(--or)}

.centre{text-align:center}
.mesure{max-width:var(--largeur-texte)}
.mesure.centre{margin-inline:auto}

/* ─────────────────────────────────────────────────────────────── boutons ── */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.19em;
  text-transform:uppercase;
  padding:17px 34px;
  border:1px solid var(--vert);
  background:var(--vert);
  color:var(--blanc);
  cursor:pointer;
  transition:background .3s,color .3s,border-color .3s,transform .3s;
  white-space:nowrap;
}
.btn:hover{background:var(--vert2);border-color:var(--vert2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

.btn-or{background:var(--or);border-color:var(--or);color:var(--blanc)}
.btn-or:hover{background:var(--or2);border-color:var(--or2)}

.btn-contour{background:transparent;color:var(--vert)}
.btn-contour:hover{background:var(--vert);color:var(--blanc)}

.btn-clair{background:transparent;border-color:rgba(255,255,255,.5);color:var(--blanc)}
.btn-clair:hover{background:var(--blanc);border-color:var(--blanc);color:var(--vert)}

.btn-plein{width:100%}
.btn-sm{padding:12px 22px;font-size:.72rem}

/* Lien souligné à l'arrivée du curseur : discret au repos, vivant au survol. */
.lien-fin{
  display:inline-block;
  font-size:.78rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--vert);
  padding-bottom:5px;
  position:relative;
}
.lien-fin::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:1px;
  background:var(--or);
  transform:scaleX(.32);
  transform-origin:left;
  transition:transform var(--transition);
}
.lien-fin:hover::after{transform:scaleX(1)}
.section.vert .lien-fin{color:var(--blanc)}

/* ══════════════════════════════════════════════════════════════ en-tête ══ */

.entete{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:var(--entete);
  display:flex;
  align-items:center;
  transition:background .45s,box-shadow .45s,height .45s;
}

/* Au-dessus d'une photo pleine page, l'en-tête reste transparent et le texte
   passe en blanc : la photo doit rester le premier plan. */
.entete.sur-image{background:transparent}
.entete.sur-image .entete-lien,
.entete.sur-image .marque-nom,
.entete.sur-image .marque-sous,
.entete.sur-image .burger{color:var(--blanc)}
.entete.sur-image .marque-sceau{border-color:rgba(255,255,255,.45)}

.entete.posee{
  background:rgba(250,248,244,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--bord);
  height:66px;
}

.entete-int{
  width:100%;
  max-width:var(--largeur);
  margin-inline:auto;
  padding-inline:var(--marge);
  display:flex;
  align-items:center;
  gap:30px;
}

/* ── marque ── */

.marque{display:flex;align-items:center;gap:13px;flex-shrink:0}

.marque-sceau{
  width:40px;height:40px;
  border-radius:50%;
  border:1px solid var(--or);
  display:grid;place-items:center;
  flex-shrink:0;
  transition:border-color .45s;
}
.marque-sceau svg{width:24px;height:24px}

.marque-txt{display:flex;flex-direction:column;line-height:1.05}
.marque-nom{
  font-family:var(--serif);
  font-size:1.24rem;
  color:var(--vert);
  letter-spacing:.012em;
  transition:color .45s;
  white-space:nowrap;
}
.marque-sous{
  font-size:.53rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--or2);
  margin-top:3px;
  transition:color .45s;
}

/* ── navigation ── */

.nav{display:flex;align-items:center;gap:34px;margin-left:auto}

.entete-lien{
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--encre2);
  position:relative;
  padding-block:6px;
  transition:color .3s;
  white-space:nowrap;
}
.entete-lien::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.entete-lien:hover::after,
.entete-lien[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.entete-lien[aria-current="page"]{color:var(--vert)}

.entete-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}

.burger{
  display:none;
  width:44px;height:44px;
  place-items:center;
  color:var(--vert);
  margin-left:auto;
}
.burger span{
  display:block;width:22px;height:1px;
  background:currentColor;
  position:relative;
  transition:background .2s;
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;
  width:22px;height:1px;background:currentColor;
  transition:transform .3s;
}
.burger span::before{top:-7px}
.burger span::after{top:7px}

body.menu-ouvert .burger span{background:transparent}
body.menu-ouvert .burger span::before{transform:translateY(7px) rotate(45deg)}
body.menu-ouvert .burger span::after{transform:translateY(-7px) rotate(-45deg)}

/* ── menu plein écran (mobile) ── */

.menu-mobile{
  position:fixed;inset:0;
  z-index:99;
  background:var(--vert);
  display:flex;flex-direction:column;
  justify-content:center;
  padding:var(--entete) var(--marge) var(--marge);
  opacity:0;visibility:hidden;
  transition:opacity .4s,visibility .4s;
  overflow-y:auto;
}
body.menu-ouvert .menu-mobile{opacity:1;visibility:visible}

.menu-mobile a{
  font-family:var(--serif);
  font-size:clamp(1.9rem,7vw,2.7rem);
  color:var(--blanc);
  padding-block:9px;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s,transform .5s;
}
body.menu-ouvert .menu-mobile a{opacity:1;transform:none}

.menu-mobile-pied{
  margin-top:40px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:20px;
  font-size:.8rem;
  color:rgba(255,255,255,.65);
}
.menu-mobile-pied a{font-family:var(--sans);font-size:.8rem;padding:0}

/* ── icônes sociales ── */

.socials{display:flex;align-items:center;gap:14px}
.socials a{
  width:34px;height:34px;
  display:grid;place-items:center;
  color:inherit;
  opacity:.72;
  transition:opacity .3s,transform .3s;
}
.socials a:hover{opacity:1;transform:translateY(-2px)}
.socials svg{width:17px;height:17px}

/* ══════════════════════════════════════════════════════════════ formulaires ══ */

.champ{margin-bottom:22px}
.champ-duo{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}

.champ label{
  display:block;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--or2);
  margin-bottom:9px;
}

.champ input,
.champ select,
.champ textarea{
  width:100%;
  padding:14px 0;
  border:0;
  border-bottom:1px solid var(--bord-fonce);
  background:transparent;
  font-size:1rem;
  font-weight:300;
  color:var(--encre);
  border-radius:0;
  transition:border-color .3s;
}
.champ textarea{resize:vertical;min-height:110px;line-height:1.7}
.champ select{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8975a' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 2px center;
  background-size:17px;
  padding-right:26px;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;
  border-bottom-color:var(--or);
}
.champ input::placeholder,.champ textarea::placeholder{color:var(--gris-clair)}

.champ-aide{
  display:block;
  font-size:.78rem;
  color:var(--gris);
  margin-top:8px;
  line-height:1.6;
}

.champ-case{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}
.champ-case input{
  width:17px;height:17px;
  margin-top:4px;
  flex-shrink:0;
  accent-color:var(--vert);
}
.champ-case label{
  font-size:.86rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--encre2);
  line-height:1.6;
  margin:0;
}

/* Piège à robots : invisible pour l'œil comme pour les lecteurs d'écran, mais
   présent dans le document — un automate le remplit, un visiteur jamais. */
.piege{
  position:absolute!important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ── messages ── */

.message{
  padding:15px 19px;
  border-left:2px solid;
  font-size:.9rem;
  line-height:1.65;
  margin-bottom:22px;
  display:flex;gap:12px;align-items:flex-start;
}
.message svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.message.succes{background:rgba(47,143,106,.08);border-color:var(--succes);color:#1f6b4d}
.message.erreur{background:rgba(192,57,43,.07);border-color:var(--danger);color:#96271b}
.message.info{background:var(--or-clair);border-color:var(--or);color:var(--or2)}

/* ══════════════════════════════════════════════════════════════════ pied ══ */

.pied{background:var(--vert3);color:rgba(255,255,255,.62);padding-block:clamp(56px,7vw,88px) 0}

.pied-grille{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(30px,5vw,64px);
  padding-bottom:56px;
}

.pied h4{
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--or);
  margin-bottom:22px;
  font-weight:400;
}

.pied-marque{
  font-family:var(--serif);
  font-size:1.6rem;
  color:var(--blanc);
  margin-bottom:16px;
  line-height:1.2;
}
.pied p{font-size:.92rem;line-height:1.8}
.pied li{margin-bottom:11px;font-size:.92rem}
.pied a{transition:color .3s}
.pied a:hover{color:var(--or)}

.pied .socials{margin-top:24px;color:rgba(255,255,255,.72)}

.pied-bas{
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  align-items:center;
  font-size:.8rem;
  color:rgba(255,255,255,.42);
}
.pied-bas .pousse{margin-left:auto}

/* ══════════════════════════════════════════════════════════ animations ══ */

/* Apparition à la lecture. L'état de départ n'est posé que si le script est
   là pour le lever : sans JavaScript, tout reste visible. */
[data-anim]{opacity:1}
body.js [data-anim]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);
}
body.js [data-anim].vu{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.js [data-anim]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ════════════════════════════════════════════════════════════ responsive ══ */

@media (max-width:1080px){
  /* Tout passe dans le menu plein écran : garder « Espace client » à côté du
     logo le collerait à la marque, sans place pour respirer. */
  .nav,.entete-actions{display:none}
  .burger{display:grid}
  .entete-int{gap:16px}
  .pied-grille{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  body{font-size:16px}
  .marque-sous{display:none}
  .marque-nom{font-size:1.08rem}
  .champ-duo{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr;gap:38px}
  .pied-bas{flex-direction:column;align-items:flex-start}
  .pied-bas .pousse{margin-left:0}
  .btn{padding:15px 26px;font-size:.74rem}
}