/* MMV — BLOC « COMMENT ÇA SE PASSE » (page Groupes & Évènements) */
.mdv-etp{
  --etp-or:#B29760; --etp-or-txt:#836C3F; --etp-encre:#402E15;
  --etp-texte:#5B4B3C; --etp-ivoire:#FFFBF0; --etp-filet:#E2D6BC;
  background:var(--etp-ivoire);
  padding:clamp(60px,6.5vw,104px) 20px clamp(64px,7vw,112px);
  scroll-margin-top:90px;
}
.mdv-etp *{ box-sizing:border-box; }
.mdv-etp-inner{ max-width:1240px; margin:0 auto; }
.mdv-etp-titre{
  margin:0 0 10px; text-align:center; color:var(--etp-encre); line-height:1.05;
  font-family:"Alegreya SC",Georgia,serif; font-weight:500;
  font-size:clamp(27px,3.3vw,47px); letter-spacing:.02em; text-transform:uppercase;
}
.mdv-etp-titre em{
  font-family:'Parisienne',cursive; font-style:normal; font-weight:400;
  text-transform:none; letter-spacing:0; font-size:1.42em; line-height:.8;
  margin:0 .06em; position:relative; top:.06em;
}
.mdv-etp-soustitre{
  margin:0 auto clamp(40px,4.4vw,64px); text-align:center;
  font-family:"Alegreya SC",Georgia,serif; font-weight:400;
  font-size:clamp(14px,1.35vw,19px); letter-spacing:.04em; color:var(--etp-encre);
}
.mdv-etp-grille{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--etp-filet);
}
.mdv-etp-item{
  padding:clamp(28px,3vw,44px) clamp(20px,2.2vw,34px) clamp(20px,2.4vw,36px) 0;
}
.mdv-etp-item + .mdv-etp-item{
  border-left:1px solid var(--etp-filet);
  padding-left:clamp(24px,2.6vw,40px);
}
.mdv-etp-num{
  display:block; margin:0 0 clamp(14px,1.6vw,24px);
  font-family:'Parisienne',cursive; color:var(--etp-or);
  font-size:clamp(46px,4.6vw,66px); line-height:.8;
}
.mdv-etp-nom{
  margin:0 0 12px; color:var(--etp-encre);
  font-family:"Alegreya SC",Georgia,serif; font-weight:600;
  font-size:clamp(16px,1.35vw,19px); letter-spacing:.05em;
}
.mdv-etp-txt{
  margin:0; color:var(--etp-texte);
  font-family:"Alegreya",Georgia,serif; font-size:clamp(15.5px,1.2vw,17.5px); line-height:1.6;
}
.mdv-etp-todo{ border-bottom:1px dashed #C9B892; font-style:italic; }
@media (max-width:900px){
  .mdv-etp-grille{ grid-template-columns:repeat(2,1fr); }
  .mdv-etp-item{ padding-right:24px; }
  .mdv-etp-item:nth-child(3){ border-left:0; padding-left:0; }
  .mdv-etp-item:nth-child(3), .mdv-etp-item:nth-child(4){ border-top:1px solid var(--etp-filet); }
}
@media (max-width:560px){
  .mdv-etp-grille{ grid-template-columns:1fr; }
  .mdv-etp-item{ padding:26px 0; border-left:0 !important; padding-left:0 !important; }
  .mdv-etp-item + .mdv-etp-item{ border-top:1px solid var(--etp-filet); }
}



/* CLAUSTRA v3 - exactement la maquette de Themis : tiges #B29760 / #836C3F, socle noir, grappes fournies (11/09/2026) */
.mdv-etp{--cl-or:#B29760;--cl-or-fonce:#836C3F;--cl-socle:#150E06;--cl-zone:clamp(150px,15.8vw,196px);--cl-socle-h:clamp(12px,1.45vw,18px);--cl-gw:clamp(24px,2.45vw,30px)}
.mdv-etp .mdv-etp-grille{position:relative;border-top:0 !important;grid-template-columns:22.83fr 25.89fr 26.74fr 24.54fr;
  padding:clamp(40px,4.4vw,58px) 0 calc(var(--cl-zone) + var(--cl-socle-h) + clamp(34px,3.6vw,48px))}
.mdv-etp .mdv-etp-grille > .mdv-etp-item{position:relative;z-index:1;border:0 !important;padding:0 clamp(22px,2.8vw,40px) 0 clamp(34px,4.6vw,64px) !important}
.mdv-etp .mdv-etp-grille > .mdv-etp-item:first-child{padding-left:clamp(14px,2.2vw,32px) !important}
.mdv-etp .mdv-etp-grille > .mdv-etp-item:nth-child(4){padding-right:clamp(14px,2.2vw,32px) !important}
.mdv-etp-claustra{position:absolute;inset:0;pointer-events:none;z-index:0}
.mdv-cl-socle{position:absolute;left:-1.65%;right:-2.2%;bottom:0;height:var(--cl-socle-h);background:var(--cl-socle);transform-origin:0 50%}
.mdv-cl-t{position:absolute;bottom:var(--cl-socle-h);width:4px;margin-left:-2px;height:calc(var(--cl-zone) * var(--k,1))}
.mdv-cl-t.is-haute{top:0;height:auto}
.mdv-cl-tube{position:absolute;inset:0;display:block;background:var(--cl-or);overflow:hidden;transform-origin:50% 100%}
.mdv-cl-t.is-b .mdv-cl-tube{background:var(--cl-or-fonce)}
.mdv-cl-tube::after{content:"";position:absolute;left:0;right:0;height:22%;top:100%;background:linear-gradient(180deg,rgba(255,251,240,0),rgba(255,251,240,.7) 50%,rgba(255,251,240,0));opacity:0}
.mdv-cl-g{position:absolute;z-index:2;width:var(--cl-gw);aspect-ratio:240/214;left:calc(50% + var(--dx,0) * 1px - var(--cl-gw) / 2);
  bottom:calc(var(--cl-zone) * var(--fy,.5) - var(--cl-gw) * .445);transform-origin:57% 3%;
  background:url(/wp-content/uploads/2026/09/grappe-raisin-doree-claustra.png) center/contain no-repeat}
.mdv-cl-g.is-b{background-image:url(/wp-content/uploads/2026/09/grappe-raisin-bronze-claustra.png.webp)}
.mdv-cl-g.is-top{bottom:auto;top:calc(var(--top,40) * 1px - var(--cl-gw) * .445)}
/* animation : le socle se pose, les tiges montent en vague de gauche a droite, les grappes se posent puis se balancent */
.mdv-etp-js .mdv-etp-grille:not(.is-up) .mdv-cl-tube{transform:scaleY(0)}
.mdv-etp-js .mdv-etp-grille:not(.is-up) .mdv-cl-socle{transform:scaleX(0)}
.mdv-etp-js .mdv-etp-grille:not(.is-up) .mdv-cl-g{opacity:0}
.mdv-etp-grille.is-up .mdv-cl-socle{transition:transform 1.1s cubic-bezier(.6,0,.2,1)}
.mdv-etp-grille.is-up .mdv-cl-tube{animation:mdvClMonte 1.25s cubic-bezier(.33,1,.68,1) both;animation-delay:.1s;will-change:transform;backface-visibility:hidden}

.mdv-etp-grille.is-up .mdv-cl-t.is-haute .mdv-cl-tube::after{animation:mdvClReflet 1.3s ease-in-out both;animation-delay:1.4s}
.mdv-etp-grille.is-up .mdv-cl-g{animation:mdvClPose .7s cubic-bezier(.33,1,.68,1) both,mdvClBalance var(--sw,5s) ease-in-out infinite;
  animation-delay:1.15s,calc(1.9s + var(--sd,0s))}

@keyframes mdvClMonte{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@keyframes mdvClReflet{0%{top:100%;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:-22%;opacity:0}}
@keyframes mdvClPose{0%{opacity:0;transform:translateY(-6px) scale(.85)}100%{opacity:1;transform:none}}
@keyframes mdvClBalance{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
/* 2 colonnes : une seule grande tige au milieu, une tige sur trois en moins */
@media (max-width:900px){
  .mdv-etp{--cl-zone:clamp(140px,22vw,180px)}
  .mdv-etp .mdv-etp-grille{grid-template-columns:1fr 1fr;row-gap:clamp(30px,5vw,44px)}
  .mdv-etp .mdv-etp-grille > .mdv-etp-item{padding:0 !important}
  .mdv-etp .mdv-etp-grille > .mdv-etp-item:nth-child(odd){padding-right:clamp(30px,5vw,48px) !important;padding-left:clamp(8px,2vw,16px) !important}
  .mdv-etp .mdv-etp-grille > .mdv-etp-item:nth-child(even){padding-left:clamp(30px,5vw,48px) !important}
  .mdv-cl-t.h1,.mdv-cl-t.h3,.mdv-cl-t.m3{display:none}
  .mdv-cl-t.h2{left:50% !important}
}
/* 1 colonne : etapes empilees, la claustra en pied de bloc */
@media (max-width:560px){
  .mdv-etp{--cl-zone:130px;--cl-socle-h:11px;--cl-gw:26px}
  .mdv-etp .mdv-etp-grille{padding-top:6px;row-gap:30px;grid-template-columns:1fr}
  .mdv-etp .mdv-etp-grille > .mdv-etp-item:nth-child(n){padding:0 !important}
  .mdv-cl-t.is-haute,.mdv-cl-t.m2,.mdv-cl-g.gm{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mdv-etp-grille .mdv-cl-tube,.mdv-etp-grille .mdv-cl-g,.mdv-etp-grille .mdv-cl-socle{animation:none !important;transition:none !important;transform:none !important;opacity:1 !important}
}

/* CLAUSTRA - cotes et densite (11/09/2026) : tiges prolongees jusqu'aux bords de la page, 6 tiges par colonne */
@media (max-width:560px){.mdv-cl-t.cote{display:none}}
/* SOCLE-DEVIS - le socle de la claustra devient le bloc devis, d'apres la maquette de Themis (11/09/2026) */
.mdv-etp{--cl-socle-h:0px}
.mdv-cl-socle{display:none}
.mdv-etp{overflow-x:clip}
.mdv-etp-cta{position:relative;margin:0 calc(50% - 50vw);background:#150E06;text-align:center;
  padding:clamp(52px,5.6vw,82px) clamp(22px,4vw,60px) clamp(50px,5.2vw,76px)}
html body.page-id-2138 #content .mdv-etp .mdv-etp-cta-kicker{margin:0 0 14px !important;font-family:"Alegreya SC",Alegreya,Georgia,serif !important;font-size:13px !important;font-weight:400 !important;
  letter-spacing:.2em !important;text-transform:uppercase !important;line-height:1.3 !important;color:rgba(255,251,240,.8) !important}
html body.page-id-2138 #content .mdv-etp .mdv-etp-cta-titre{margin:0 0 18px !important;font-family:Alegreya,Georgia,serif !important;font-weight:200 !important;font-size:clamp(26px,2.6vw,36px) !important;
  line-height:1.16 !important;letter-spacing:.02em !important;text-transform:uppercase !important;color:#FFFBF0 !important}
html body.page-id-2138 #content .mdv-etp .mdv-etp-cta-titre em{font-family:Parisienne,cursive !important;font-style:normal !important;font-weight:400 !important;text-transform:none !important;
  letter-spacing:0 !important;font-size:1.5em !important;line-height:.6 !important;color:#FFFBF0 !important;margin:0 .04em}
html body.page-id-2138 #content .mdv-etp .mdv-etp-cta-txt{margin:0 auto 32px !important;max-width:34em;font-family:Alegreya,Georgia,serif !important;font-size:17px !important;line-height:1.35 !important;color:rgba(255,251,240,.86) !important}
html body.page-id-2138 #content .mdv-etp .mdv-etp-cta-btn{display:inline-block;font-family:"Alegreya SC",Alegreya,Georgia,serif !important;font-size:13px !important;letter-spacing:.2em !important;text-transform:uppercase !important;
  line-height:1.4 !important;padding:15px 34px !important;border:1px solid #FFFBF0 !important;color:#FFFBF0 !important;background:transparent !important;text-decoration:none !important;
  transition:background-color .35s ease,color .35s ease}
html body.page-id-2138 #content .mdv-etp .mdv-etp-cta-btn:hover,html body.page-id-2138 #content .mdv-etp .mdv-etp-cta-btn:focus-visible{background:#FFFBF0 !important;color:#150E06 !important}
/* animation : le socle se deroule de gauche a droite, puis le texte apparait */
/* animation v2 : le bloc s'ouvre depuis le centre, le surtitre se resserre, le titre sort du flou, puis texte et bouton montent */
.mdv-etp-js .mdv-etp-grille:not(.is-up) + .mdv-etp-cta{clip-path:inset(0 50% 0 50%)}
.mdv-etp-grille.is-up + .mdv-etp-cta{clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.65,0,.35,1)}
html.mdv-etp-js body.page-id-2138 #content .mdv-etp-grille:not(.is-up) + .mdv-etp-cta .mdv-etp-cta-kicker{opacity:0;letter-spacing:.6em !important}
.mdv-etp-js .mdv-etp-grille:not(.is-up) + .mdv-etp-cta .mdv-etp-cta-titre{opacity:0;filter:blur(10px);transform:scale(.96)}
.mdv-etp-js .mdv-etp-grille:not(.is-up) + .mdv-etp-cta .mdv-etp-cta-txt,html.mdv-etp-js body.page-id-2138 #content .mdv-etp-grille:not(.is-up) + .mdv-etp-cta .mdv-etp-cta-btn{opacity:0;transform:translateY(14px)}
html body.page-id-2138 #content .mdv-etp-grille.is-up + .mdv-etp-cta .mdv-etp-cta-kicker{transition:opacity 1s ease .55s,letter-spacing 1.4s cubic-bezier(.2,.7,.2,1) .55s}
.mdv-etp-grille.is-up + .mdv-etp-cta .mdv-etp-cta-titre{transition:opacity 1s ease .75s,filter 1.1s ease .75s,transform 1.2s cubic-bezier(.2,.7,.2,1) .75s}
.mdv-etp-grille.is-up + .mdv-etp-cta .mdv-etp-cta-txt{transition:opacity .8s ease 1.1s,transform .9s cubic-bezier(.2,.7,.2,1) 1.1s}
html body.page-id-2138 #content .mdv-etp-grille.is-up + .mdv-etp-cta .mdv-etp-cta-btn{transition:opacity .8s ease 1.3s,transform .9s cubic-bezier(.2,.7,.2,1) 1.3s,background-color .35s ease,color .35s ease !important}
@media (max-width:560px){
  .mdv-etp{--cl-socle-h:0px}
  .mdv-etp-cta{margin:0 calc(50% - 50vw);padding:46px 22px 44px}
}
@media (prefers-reduced-motion:reduce){
  .mdv-etp-cta,.mdv-etp-cta > *{clip-path:none !important;opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
}