/* ══════════════════════════════════════════════════════════════════════════
   Le Jardin des Promesses — blocs des pages vitrine
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════ héros ══ */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--vert3);
}

.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover}

/* Lent rapprochement : donne vie à une photographie fixe sans distraire.
   Sur une durée aussi longue, le mouvement se ressent plus qu'il ne se voit. */
body.js .hero-media img{
  animation:respiration 26s ease-out both;
}
@keyframes respiration{
  from{transform:scale(1.1)}
  to{transform:scale(1)}
}

/* Double voile : un dégradé vertical pour asseoir le texte en bas, un voile
   uni pour que le titre tienne quelle que soit la photo mise à sa place. */
.hero-media::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(15,47,36,.86) 0%,rgba(15,47,36,.34) 42%,rgba(15,47,36,.42) 100%),
    linear-gradient(to bottom,rgba(15,47,36,.5) 0%,transparent 26%);
}

.hero-contenu{
  position:relative;z-index:1;
  width:100%;
  max-width:var(--largeur);
  margin-inline:auto;
  padding:0 var(--marge) clamp(70px,11vh,130px);
  color:var(--blanc);
}

.hero h1{
  color:var(--blanc);
  max-width:15ch;
  text-shadow:0 2px 40px rgba(15,47,36,.5);
}
.hero .surtitre{color:var(--or)}
.hero-sous{
  max-width:47ch;
  margin-top:26px;
  font-size:clamp(1.02rem,1.5vw,1.17rem);
  line-height:1.85;
  color:rgba(255,255,255,.86);
  font-weight:300;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:15px;margin-top:40px}

/* Repère de défilement : une ligne qui descend en boucle. */
.hero-cue{
  position:absolute;
  left:50%;bottom:26px;
  transform:translateX(-50%);
  z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.hero-cue i{
  display:block;width:1px;height:52px;
  background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent);
  animation:filer 2.4s ease-in-out infinite;
  transform-origin:top;
}
@keyframes filer{
  0%{transform:scaleY(0);opacity:0}
  40%{opacity:1}
  100%{transform:scaleY(1);opacity:0}
}

/* ── héros court, pour les pages intérieures ── */

.hero.court{min-height:62svh;align-items:center;padding-top:var(--entete)}
.hero.court .hero-contenu{padding-bottom:0;text-align:center}
.hero.court h1{max-width:none;margin-inline:auto}
.hero.court .hero-sous{margin-inline:auto;text-align:center}
.hero.court .filet{margin-inline:auto}

/* ═══════════════════════════════════════════════════════ blocs éditoriaux ══ */

/* Texte et image côte à côte, l'image débordant légèrement de la grille. */
.duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,90px);
  align-items:center;
}
.duo.inverse .duo-media{order:2}

.duo-media{position:relative}
.duo-media img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}
.duo-media.paysage img{aspect-ratio:3/2}

/* Cadre doré décalé : un rappel discret du filet des documents. */
.duo-media::before{
  content:"";
  position:absolute;
  inset:18px -18px -18px 18px;
  border:1px solid var(--or);
  opacity:.4;
  z-index:-1;
}
.duo.inverse .duo-media::before{inset:18px 18px -18px -18px}

.duo-texte p+p{margin-top:20px}
.duo-texte .filet{margin-block:28px}

/* ── signature manuscrite ── */

.signature{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.5rem;
  color:var(--vert);
  margin-top:30px;
}
.signature small{
  display:block;
  font-family:var(--sans);
  font-style:normal;
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--or2);
  margin-top:8px;
}

/* ══════════════════════════════════════════════════════════ prestations ══ */

.prestations{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}

.presta{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--vert3);
  aspect-ratio:3/4.3;
}
.presta img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1),opacity .6s;
  opacity:.82;
}
.presta:hover img{transform:scale(1.06);opacity:.62}

.presta::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,47,36,.92) 4%,rgba(15,47,36,.12) 62%);
  pointer-events:none;
}

.presta-txt{
  position:absolute;
  inset:auto 0 0 0;
  z-index:1;
  padding:26px 24px 28px;
  color:var(--blanc);
}
.presta-txt h3{color:var(--blanc);font-size:1.5rem;line-height:1.16}
.presta-txt p{
  font-size:.87rem;
  line-height:1.62;
  color:rgba(255,255,255,.74);
  margin-top:10px;
  /* Le résumé se déploie au survol : la vignette reste calme au repos. */
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .6s cubic-bezier(.22,.61,.36,1),opacity .45s,margin-top .6s;
}
.presta:hover .presta-txt p,
.presta:focus-visible .presta-txt p{max-height:8rem;opacity:1}

.presta-plus{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:16px;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--or);
}
.presta-plus svg{width:15px;height:15px;transition:transform .4s}
.presta:hover .presta-plus svg{transform:translateX(5px)}

/* ══════════════════════════════════════════════════════════════ approche ══ */

.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,54px)}

.etape-num{
  font-family:var(--serif);
  font-size:3.1rem;
  line-height:1;
  color:var(--or);
  opacity:.42;
  margin-bottom:18px;
}
.etape h3{margin-bottom:14px;font-size:1.55rem}
.etape p{font-size:.96rem;line-height:1.8}
.etape img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  margin-bottom:24px;
}

/* ══════════════════════════════════════════════════════════════ galerie ══ */

/* Grille en colonnes : les portraits occupent deux rangées, les paysages une.
   Le résultat respire comme une planche-contact, sans calcul JavaScript. */
.galerie{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:150px;
  gap:16px;
}
.galerie a{
  position:relative;
  overflow:hidden;
  background:var(--creme2);
  display:block;
}
.galerie img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.galerie a:hover img{transform:scale(1.05)}
.galerie a::after{
  content:"";position:absolute;inset:0;
  background:rgba(15,47,36,.22);
  opacity:0;transition:opacity .45s;
}
.galerie a:hover::after{opacity:1}

.galerie .haute{grid-row:span 3}
.galerie .large{grid-column:span 2;grid-row:span 2}
.galerie .normale{grid-row:span 2}

/* ── visionneuse ── */

.lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(15,47,36,.97);
  display:none;
  place-items:center;
  padding:clamp(20px,5vw,64px);
}
.lightbox[open],.lightbox.ouverte{display:grid}
.lightbox img{
  max-width:100%;max-height:86vh;
  object-fit:contain;
  box-shadow:var(--ombre-l);
}
.lightbox-fermer,
.lightbox-prec,
.lightbox-suiv{
  position:absolute;
  width:52px;height:52px;
  display:grid;place-items:center;
  color:rgba(255,255,255,.75);
  transition:color .3s,transform .3s;
}
.lightbox-fermer:hover,.lightbox-prec:hover,.lightbox-suiv:hover{color:var(--blanc)}
.lightbox-fermer{top:20px;right:20px}
.lightbox-prec{left:14px;top:50%;transform:translateY(-50%)}
.lightbox-suiv{right:14px;top:50%;transform:translateY(-50%)}
.lightbox-prec:hover{transform:translateY(-50%) translateX(-4px)}
.lightbox-suiv:hover{transform:translateY(-50%) translateX(4px)}
.lightbox svg{width:26px;height:26px}
.lightbox-compte{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-size:.74rem;letter-spacing:.22em;color:rgba(255,255,255,.6);
}

/* ═══════════════════════════════════════════════════════════ témoignages ══ */

.temoignages{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,44px)}

.temoignage{
  background:var(--blanc);
  padding:clamp(30px,3.4vw,44px);
  border-top:2px solid var(--or);
  display:flex;flex-direction:column;
}
.section.vert .temoignage{
  background:rgba(255,255,255,.05);
  border-top-color:var(--or);
}
.temoignage-etoiles{display:flex;gap:4px;color:var(--or);margin-bottom:20px}
.temoignage-etoiles svg{width:15px;height:15px}
.temoignage blockquote{
  font-family:var(--serif);
  font-size:1.18rem;
  font-style:italic;
  line-height:1.66;
  color:var(--encre2);
  flex:1;
}
.section.vert .temoignage blockquote{color:rgba(255,255,255,.9)}
.temoignage cite{
  display:block;
  margin-top:22px;
  font-style:normal;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--or2);
}
.section.vert .temoignage cite{color:var(--or)}

/* ═══════════════════════════════════════════════════════════════ chiffres ══ */

.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.chiffre b{
  display:block;
  font-family:var(--serif);
  font-size:clamp(2.6rem,4.6vw,3.6rem);
  line-height:1;
  color:var(--or);
  font-weight:400;
}
.chiffre span{
  display:block;
  margin-top:12px;
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.section.creme .chiffre b,.section.blanc .chiffre b{color:var(--vert)}
.section.creme .chiffre span,.section.blanc .chiffre span{color:var(--gris)}

/* ══════════════════════════════════════════════════════════════ inclus ══ */

.inclus{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.inclus li{
  display:flex;gap:15px;align-items:flex-start;
  padding-bottom:22px;
  border-bottom:1px solid var(--bord);
}
.inclus svg{width:19px;height:19px;color:var(--or);flex-shrink:0;margin-top:4px}
.inclus strong{
  display:block;
  font-family:var(--serif);
  font-size:1.2rem;
  font-weight:400;
  color:var(--vert);
  margin-bottom:5px;
}
.inclus p{font-size:.9rem;line-height:1.7}

/* ══════════════════════════════════════════════════════════════ tarifs ══ */

.tarifs-grille{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:26px;
}

.tarif{
  background:var(--blanc);
  border:1px solid var(--bord);
  padding:clamp(30px,3.4vw,42px);
  display:flex;flex-direction:column;
  transition:border-color .4s,transform .4s,box-shadow .4s;
}
.tarif:hover{border-color:var(--or);transform:translateY(-4px);box-shadow:var(--ombre-m)}

.tarif.vedette{
  background:var(--vert);
  border-color:var(--vert);
  position:relative;
}
.tarif.vedette h3,.tarif.vedette .tarif-prix{color:var(--blanc)}
.tarif.vedette p,.tarif.vedette li{color:rgba(255,255,255,.76)}
.tarif.vedette .tarif-cat{color:var(--or)}
.tarif.vedette li svg{color:var(--or)}

.tarif-fanion{
  position:absolute;top:-1px;right:24px;
  background:var(--or);color:var(--blanc);
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  padding:7px 14px;
}

.tarif-cat{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--or2);margin-bottom:14px;
}
.tarif h3{font-size:1.6rem;margin-bottom:12px;line-height:1.2}
.tarif p{font-size:.92rem;line-height:1.72;flex:1}

.tarif-prix{
  font-family:var(--serif);
  font-size:2.5rem;
  color:var(--vert);
  margin-block:24px 6px;
  line-height:1;
}
.tarif-prix small{
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gris);
  display:block;
  margin-bottom:9px;
}
.tarif.vedette .tarif-prix small{color:rgba(255,255,255,.55)}

.tarif ul{margin-top:20px;display:flex;flex-direction:column;gap:11px}
.tarif li{display:flex;gap:11px;font-size:.9rem;line-height:1.55;align-items:flex-start}
.tarif li svg{width:16px;height:16px;color:var(--or);flex-shrink:0;margin-top:3px}
.tarif .btn{margin-top:28px}

/* Squelette affiché pendant que le catalogue arrive du logiciel. */
.tarif-attente{
  height:330px;
  background:linear-gradient(100deg,var(--creme2) 30%,var(--blanc) 50%,var(--creme2) 70%);
  background-size:220% 100%;
  animation:balayage 1.5s linear infinite;
}
@keyframes balayage{from{background-position:180% 0}to{background-position:-80% 0}}

/* ══════════════════════════════════════════════════════════════ équipe ══ */

.equipe{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px)}

.portrait img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  filter:grayscale(.24);
  transition:filter .8s;
}
.portrait:hover img{filter:grayscale(0)}
.portrait h3{margin-top:26px;font-size:1.8rem}
.portrait-role{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--or2);margin-block:10px 18px;display:block;
}
.portrait p{font-size:.96rem;line-height:1.82}
.portrait p+p{margin-top:16px}
.portrait-liens{display:flex;gap:18px;margin-top:22px}

/* Portrait d'equipe non encore fourni : un monogramme plutot qu'une photo
   d'inconnu, qui vaudrait mieux que rien mais serait un mensonge. */
.portrait-vide{
  aspect-ratio:4/5;
  background:linear-gradient(150deg,var(--vert) 0%,var(--vert3) 100%);
  display:grid;
  place-items:center;
  position:relative;
}
.portrait-vide::after{
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid rgba(184,151,90,.4);
}
.portrait-initiales{
  font-family:var(--serif);
  font-size:clamp(3.4rem,7vw,5rem);
  color:var(--or);
  letter-spacing:.06em;
}


/* ══════════════════════════════════════════════════════════════ film ══ */

.film{position:relative;aspect-ratio:16/9;background:var(--vert3);overflow:hidden}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* La vidéo n'est chargée qu'au clic : sinon YouTube pose ses traceurs et
   plusieurs centaines de kilo-octets avant même qu'on l'ait regardée. */
.film-affiche{position:absolute;inset:0;cursor:pointer;border:0;padding:0;width:100%}
.film-affiche img{width:100%;height:100%;object-fit:cover;opacity:.66}
.film-affiche::after{
  content:"";position:absolute;inset:0;
  background:rgba(15,47,36,.3);
  transition:background .4s;
}
.film-affiche:hover::after{background:rgba(15,47,36,.14)}
.film-play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:84px;height:84px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:50%;
  display:grid;place-items:center;
  color:var(--blanc);
  z-index:1;
  transition:transform .45s,background .45s;
}
.film-affiche:hover .film-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.14)}
.film-play svg{width:26px;height:26px;margin-left:4px}

/* ══════════════════════════════════════════════════════════ appel final ══ */

.appel{position:relative;overflow:hidden;background:var(--vert)}
.appel-media{position:absolute;inset:0;opacity:.19}
.appel-media img{width:100%;height:100%;object-fit:cover}
.appel .enveloppe{position:relative;z-index:1}

/* ══════════════════════════════════════════════════════════════ contact ══ */

.contact-grille{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,86px)}

.contact-infos li{
  padding-block:22px;
  border-bottom:1px solid var(--bord);
  display:flex;gap:17px;align-items:flex-start;
}
.contact-infos li:first-child{padding-top:0}
.contact-infos svg{width:19px;height:19px;color:var(--or);flex-shrink:0;margin-top:4px}
.contact-infos strong{
  display:block;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--or2);margin-bottom:6px;font-weight:400;
}
.contact-infos p,.contact-infos a{font-size:1rem;line-height:1.6;color:var(--encre2)}
.contact-infos a:hover{color:var(--vert)}

.carte-lieu{
  margin-top:34px;
  aspect-ratio:16/10;
  background:var(--creme2);
  border:1px solid var(--bord);
  display:grid;place-items:center;
  text-align:center;
  padding:26px;
}
.carte-lieu svg{width:30px;height:30px;color:var(--or);margin-inline:auto}
.carte-lieu p{margin-top:14px;font-size:.92rem;line-height:1.7}

/* ══════════════════════════════════════════════════════════════ légal ══ */

.legal{padding-top:calc(var(--entete) + var(--section))}
.legal h2{font-size:1.7rem;margin-block:44px 16px}
.legal h3{font-size:1.2rem;margin-block:26px 10px}
.legal p,.legal li{font-size:.96rem;line-height:1.85;margin-bottom:12px}
.legal ul{list-style:disc;padding-left:22px;margin-bottom:20px}
.legal a{color:var(--vert2);text-decoration:underline;text-underline-offset:3px}

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

@media (max-width:1080px){
  .prestations{grid-template-columns:repeat(2,1fr)}
  .galerie{grid-template-columns:repeat(3,1fr)}
  .contact-grille{grid-template-columns:1fr}
}

@media (max-width:900px){
  .duo,.equipe{grid-template-columns:1fr}
  .duo.inverse .duo-media{order:0}
  .duo-media::before{display:none}
  .etapes,.temoignages,.inclus{grid-template-columns:1fr}
  .chiffres{grid-template-columns:1fr 1fr;gap:40px 24px}
  .etape img{aspect-ratio:16/9}
}

@media (max-width:640px){
  .hero{min-height:88svh}
  .hero.court{min-height:52svh}
  .prestations{grid-template-columns:1fr}
  .presta{aspect-ratio:3/2.4}
  .presta-txt p{max-height:8rem;opacity:1}
  .galerie{grid-template-columns:repeat(2,1fr);grid-auto-rows:118px;gap:10px}
  .galerie .large{grid-column:span 2}
  .hero-actions .btn{width:100%}
}