
/* ==========================================================
   TMS CONFORT V8.3 — PAGES INTÉRIEURES
   Same visual language as the approved V8.2 homepage.
   ========================================================== */

:root{
  --v83-bg:#02080e;
  --v83-panel:#061521;
  --v83-panel2:#091d2a;
  --v83-line:rgba(93,219,255,.16);
  --v83-cyan:#39f1df;
  --v83-blue:#2f9cff;
  --v83-text:#f7fbff;
  --v83-soft:#b7cbd7;
}

/* Page header: shorter and more cinematic */
main:not(.home-v4) .phead{
  min-height:330px;
  display:flex;
  align-items:center;
  padding:78px 0 64px!important;
  background:
    linear-gradient(90deg,rgba(2,8,14,.98),rgba(2,8,14,.78) 50%,rgba(2,8,14,.35)),
    url('hero-tv-v82.jpg') center 46%/cover no-repeat!important;
  border-bottom:1px solid var(--v83-line)!important;
}
main:not(.home-v4) .phead h1{
  max-width:920px;
  color:#fff!important;
  font-size:clamp(3.2rem,6vw,5.8rem)!important;
  line-height:.91!important;
  letter-spacing:-.06em!important;
  text-shadow:0 14px 45px rgba(0,0,0,.5);
}
main:not(.home-v4) .phead-sub{
  max-width:720px;
  color:#c1d2dc!important;
  font-size:1.05rem;
  line-height:1.65;
}

/* Cinematic intro card */
.v83-page-visual{
  padding:56px 0 34px;
  background:var(--v83-bg)!important;
}
.v83-page-visual-card{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  overflow:hidden;
  border-radius:28px;
  background:linear-gradient(145deg,#081b28,#04121b);
  border:1px solid var(--v83-line);
  box-shadow:0 30px 80px rgba(0,0,0,.30);
}
.v83-page-photo{
  position:relative;
  min-height:330px;
  overflow:hidden;
}
.v83-page-photo img{
  width:100%;height:100%;display:block;
  object-fit:cover;
  filter:saturate(.98) contrast(1.05);
}
.v83-page-photo:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 60%,rgba(4,18,27,.82));
}
.v83-page-photo span{
  position:absolute;left:20px;bottom:18px;z-index:2;
  padding:8px 12px;border-radius:999px;
  background:rgba(2,8,14,.82);
  border:1px solid rgba(57,241,223,.23);
  color:#c9fbf6;
  font:700 .68rem/1 "Space Grotesk",system-ui,sans-serif;
  letter-spacing:.09em;
}
.v83-page-copy{
  padding:46px 48px;
  align-self:center;
}
.v83-page-copy h2{
  color:#fff!important;
  font:700 clamp(2.2rem,4vw,3.7rem)/.97 "Space Grotesk",system-ui,sans-serif!important;
  letter-spacing:-.05em;
  margin:12px 0 18px!important;
}
.v83-page-copy p:last-child{
  color:#b8cbd7!important;
  line-height:1.72;
  margin:0;
}

/* Service photo strip */
.v83-service-gallery{
  padding:24px 0 34px;
  background:var(--v83-bg)!important;
}
.v83-service-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.v83-service-grid figure{
  position:relative;
  margin:0;
  overflow:hidden;
  min-height:185px;
  border-radius:20px;
  border:1px solid var(--v83-line);
  background:#071721;
  box-shadow:0 18px 48px rgba(0,0,0,.25);
}
.v83-service-grid img{
  width:100%;height:100%;position:absolute;inset:0;
  object-fit:cover;filter:saturate(.95) contrast(1.06);
}
.v83-service-grid figure:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 35%,rgba(2,8,14,.92));
}
.v83-service-grid figcaption{
  position:absolute;left:17px;right:17px;bottom:15px;z-index:2;
  color:#fff;
  font:700 1rem/1.2 "Space Grotesk",system-ui,sans-serif;
}

/* Inner content spacing + separation */
main:not(.home-v4)>section:not(.phead):not(.v83-page-visual):not(.v83-service-gallery){
  padding-top:70px;
  padding-bottom:70px;
}
main:not(.home-v4)>section:nth-of-type(even):not(.phead):not(.v83-page-visual){
  background:
    radial-gradient(circle at 88% 18%,rgba(47,156,255,.055),transparent 24rem),
    linear-gradient(180deg,#030b12,#02080e)!important;
}

/* Interior grids/cards */
main:not(.home-v4) .seo-grid,
main:not(.home-v4) .zones-grid{
  gap:18px!important;
}
main:not(.home-v4) .seo-grid>div,
main:not(.home-v4) .zone,
main:not(.home-v4) .faq-item,
main:not(.home-v4) .info,
main:not(.home-v4) .legal-body,
main:not(.home-v4) .booking-form,
main:not(.home-v4) .booking-ok,
main:not(.home-v4) .card{
  background:
    linear-gradient(145deg,rgba(9,29,42,.98),rgba(4,17,26,.98))!important;
  border:1px solid var(--v83-line)!important;
  border-radius:22px!important;
  box-shadow:0 20px 58px rgba(0,0,0,.24)!important;
}

/* Prices: turn text grids into premium tariff panels */
.page-tarifs .seo-grid>div{
  position:relative;
  overflow:hidden;
  min-height:185px;
}
.page-tarifs .seo-grid>div:before{
  content:"";
  position:absolute;right:-55px;top:-55px;
  width:150px;height:150px;border-radius:50%;
  background:rgba(57,241,223,.055);
  filter:blur(10px);
}
.page-tarifs .seo-grid strong{
  color:#73f3e8!important;
}
.page-tarifs .tariff-note{
  border-radius:22px!important;
  background:linear-gradient(135deg,#0a2633,#071722)!important;
}

/* Zones */
.page-zones .zone{
  padding:28px!important;
  transition:transform .22s ease,border-color .22s ease;
}
.page-zones .zone:hover{
  transform:translateY(-4px);
  border-color:rgba(57,241,223,.30)!important;
}
.page-zones .zone h3{font-size:1.35rem!important}

/* FAQ: larger, calmer accordion */
.page-faq .faq{max-width:1000px;margin:auto}
.page-faq .faq-item{
  margin-bottom:13px;
  overflow:hidden;
}
.page-faq .faq-item summary{
  padding:22px 24px!important;
  font:700 1.02rem/1.35 "Space Grotesk",system-ui,sans-serif!important;
}
.page-faq .faq-a{
  padding:0 24px 24px!important;
  color:#b7cbd7!important;
}

/* About: make portrait feel intentional */
.page-apropos .about .wrap{
  max-width:1050px;
}
.page-apropos .about-photo{
  border-radius:26px!important;
  border:1px solid rgba(93,219,255,.16);
  box-shadow:0 28px 70px rgba(0,0,0,.34);
}
.page-apropos .checks{
  display:grid;
  gap:10px;
}
.page-apropos .checks li{
  padding:10px 0;
  border-bottom:1px solid rgba(93,219,255,.08);
}

/* Contact + booking */
.page-contact .contact,
.page-rdv .rdv-wrap{
  max-width:980px!important;
}
.page-contact form,
.page-rdv .booking-form{
  padding:30px!important;
  border-radius:24px!important;
}
.page-contact input,.page-contact textarea,.page-contact select,
.page-rdv input,.page-rdv textarea,.page-rdv select{
  min-height:50px;
  border-radius:12px!important;
}
.page-contact textarea,.page-rdv textarea{min-height:145px}

/* Legal: readable editorial panel */
.page-legal .legal-body{
  max-width:980px;
  margin:auto;
  padding:42px!important;
}
.page-legal .legal-body h3{
  padding-top:24px;
  margin-top:26px;
  border-top:1px solid rgba(93,219,255,.10);
}
.page-legal .legal-body h3:first-child{
  padding-top:0;margin-top:0;border-top:0;
}

/* Realisations empty state */
.page-realisations .galsec .sec-head{
  max-width:760px;
  margin:auto;
  padding:42px 28px;
  border:1px dashed rgba(57,241,223,.24);
  border-radius:24px;
  background:linear-gradient(145deg,#081b28,#04111a);
}

/* CTA consistent with homepage */
main:not(.home-v4) .cta,
main:not(.home-v4) .final-cta{
  background:
    radial-gradient(circle at 84% 25%,rgba(47,156,255,.12),transparent 24rem),
    linear-gradient(135deg,#081b28,#04111a)!important;
}

/* Tablet */
@media(max-width:980px){
  .v83-page-visual-card{grid-template-columns:1fr}
  .v83-page-photo{min-height:300px}
  .v83-page-photo:after{background:linear-gradient(transparent 60%,rgba(4,18,27,.9))}
  .v83-service-grid{grid-template-columns:1fr 1fr}
}

/* Mobile */
@media(max-width:640px){
  main:not(.home-v4) .phead{
    min-height:260px;
    padding:58px 0 46px!important;
  }
  main:not(.home-v4) .phead h1{
    font-size:clamp(2.65rem,13vw,3.6rem)!important;
    letter-spacing:-.055em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .v83-page-visual{padding:34px 0 18px}
  .v83-page-visual-card{border-radius:22px}
  .v83-page-photo{min-height:230px}
  .v83-page-copy{padding:28px 24px 32px}
  .v83-page-copy h2{font-size:2.25rem!important}
  .v83-service-grid{grid-template-columns:1fr}
  .v83-service-grid figure{min-height:210px}
  main:not(.home-v4)>section:not(.phead):not(.v83-page-visual):not(.v83-service-gallery){
    padding-top:50px;
    padding-bottom:50px;
  }
  .page-contact form,
  .page-rdv .booking-form,
  .page-legal .legal-body{
    padding:20px!important;
  }
}


/* TMS V8.3.2 — SERVICES + CONTACT FIX */

/* ----------------------------------------------------------
   SERVICES
   The visual category strip was sliding under the sticky header.
   Give the strip its own clean breathing room and remove clipping.
   ---------------------------------------------------------- */
.page-services .v83-service-gallery{
  padding:42px 0 34px !important;
  position:relative;
  z-index:1;
  overflow:visible !important;
}
.page-services .v83-service-grid{
  align-items:stretch;
}
.page-services .v83-service-grid figure{
  min-height:210px !important;
  overflow:hidden !important;
}
.page-services .v83-service-grid img{
  object-position:center !important;
}
.page-services .v83-service-grid figcaption{
  padding-top:34px;
  line-height:1.2;
}

/* The catalogue must begin clearly below the visual strip. */
.page-services .v83-service-gallery + section{
  padding-top:78px !important;
}

/* ----------------------------------------------------------
   CONTACT
   The form column was too narrow and left a huge empty void.
   Rebuild the area as a balanced two-column premium layout.
   ---------------------------------------------------------- */
.page-contact .contact{
  max-width:1180px !important;
  margin:0 auto !important;
}
.page-contact .contact .wrap,
.page-contact .contact-grid,
.page-contact .contact-layout{
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.page-contact .contact-grid,
.page-contact .contact-layout{
  display:grid !important;
  grid-template-columns:minmax(320px,.82fr) minmax(480px,1.18fr) !important;
  gap:56px !important;
  align-items:start !important;
}
.page-contact .contact-grid > *,
.page-contact .contact-layout > *{
  min-width:0 !important;
}
.page-contact form,
.page-contact .contact-form{
  width:100% !important;
  max-width:none !important;
}
.page-contact .contact form{
  padding:34px !important;
}
.page-contact .contact-info,
.page-contact .info{
  width:100% !important;
  max-width:none !important;
}
.page-contact .contact .btns,
.page-contact .contact-actions{
  display:flex !important;
  flex-wrap:wrap;
  gap:12px;
}

/* If the legacy markup does not expose contact-grid/contact-layout,
   stretch the immediate wrapper and its two columns cleanly. */
.page-contact .contact > .wrap{
  width:min(1180px,calc(100% - 48px)) !important;
}
.page-contact .contact > .wrap > div{
  min-width:0;
}

/* Make the form fields feel intentionally roomy. */
.page-contact input,
.page-contact select{
  min-height:54px !important;
}
.page-contact textarea{
  min-height:170px !important;
}

/* Tablet / narrow desktop */
@media(max-width:980px){
  .page-contact .contact-grid,
  .page-contact .contact-layout{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  .page-contact .contact{
    max-width:760px !important;
  }
}

/* Mobile */
@media(max-width:640px){
  .page-services .v83-service-gallery{
    padding-top:28px !important;
  }
  .page-services .v83-service-gallery + section{
    padding-top:52px !important;
  }
  .page-contact .contact > .wrap{
    width:min(100% - 28px,760px) !important;
  }
  .page-contact .contact form{
    padding:22px !important;
  }
}


/* TMS V8.3.3 — CONTACT CENTERING */

/* Center the whole contact composition instead of leaving it visually
   weighted to the left side of the viewport. */
.page-contact .contact{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
}

.page-contact .contact > .wrap{
  width:min(1080px, calc(100% - 56px)) !important;
  max-width:1080px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* First row = contact details + form */
.page-contact .contact > .wrap:first-child{
  display:grid !important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) !important;
  gap:54px !important;
  align-items:start !important;
}

.page-contact .contact > .wrap:first-child > .reveal{
  width:100% !important;
  min-width:0 !important;
}

/* Keep the left content compact but intentional. */
.page-contact .contact > .wrap:first-child > .reveal:first-child{
  max-width:470px !important;
  justify-self:end !important;
}

/* Let the form breathe and use the available width. */
.page-contact .contact > .wrap:first-child > .reveal:last-child{
  max-width:560px !important;
  justify-self:start !important;
}

.page-contact .booking-form{
  width:100% !important;
  max-width:none !important;
}

/* Map follows the same centered axis as the two-column block. */
.page-contact .contact > .wrap:nth-child(2){
  width:min(1080px, calc(100% - 56px)) !important;
  max-width:1080px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.page-contact .contact-map{
  width:100% !important;
  max-width:1080px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Tablet: stack cleanly and stay centered. */
@media(max-width:980px){
  .page-contact .contact > .wrap:first-child{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  .page-contact .contact > .wrap:first-child > .reveal:first-child,
  .page-contact .contact > .wrap:first-child > .reveal:last-child{
    max-width:720px !important;
    width:100% !important;
    justify-self:center !important;
  }
}

/* Mobile */
@media(max-width:640px){
  .page-contact .contact > .wrap,
  .page-contact .contact > .wrap:nth-child(2){
    width:min(100% - 28px, 720px) !important;
  }
}


/* TMS V8.3.4 — CONTACT REBALANCED
   Make the contact area feel like one centered premium module,
   not two independent columns drifting to the left.
*/

.page-contact .contact{
  padding-top:56px !important;
}

/* One centered visual module */
.page-contact .contact > .wrap:first-child{
  width:min(1040px, calc(100% - 64px)) !important;
  max-width:1040px !important;
  margin:0 auto !important;
  padding:34px !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:42px !important;
  align-items:start !important;
  background:
    radial-gradient(circle at 86% 18%,rgba(47,156,255,.075),transparent 19rem),
    linear-gradient(145deg,rgba(7,24,36,.98),rgba(3,13,21,.99)) !important;
  border:1px solid rgba(93,219,255,.15) !important;
  border-radius:28px !important;
  box-shadow:0 30px 80px rgba(0,0,0,.32) !important;
}

/* Remove the artificial "push to one side" behavior from V8.3.3 */
.page-contact .contact > .wrap:first-child > .reveal:first-child,
.page-contact .contact > .wrap:first-child > .reveal:last-child{
  max-width:none !important;
  width:100% !important;
  justify-self:stretch !important;
  margin:0 !important;
}

/* Balance the left intro visually */
.page-contact .contact > .wrap:first-child > .reveal:first-child{
  padding:6px 4px 4px 6px !important;
}
.page-contact .contact > .wrap:first-child > .reveal:first-child h2{
  margin-top:0 !important;
  max-width:15ch;
}
.page-contact .contact > .wrap:first-child > .reveal:first-child .lead{
  max-width:46ch;
}

/* Make the info panel fill the column cleanly */
.page-contact .info{
  margin-top:26px !important;
  width:100% !important;
}
.page-contact .info .row{
  padding:18px 18px !important;
}
.page-contact .contact .cta{
  width:100%;
  justify-content:flex-start;
}

/* Form column */
.page-contact .booking-form{
  width:100% !important;
  margin-top:14px !important;
}
.page-contact .contact > .wrap:first-child > .reveal:last-child .eyebrow{
  margin-top:4px !important;
}

/* Map aligned exactly with the centered contact module */
.page-contact .contact > .wrap:nth-child(2){
  width:min(1040px, calc(100% - 64px)) !important;
  max-width:1040px !important;
  margin:38px auto 0 !important;
  padding:0 !important;
}
.page-contact .contact-map{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  border-radius:24px !important;
  overflow:hidden !important;
  border:1px solid rgba(93,219,255,.14) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.28) !important;
}

/* Tablet */
@media(max-width:900px){
  .page-contact .contact > .wrap:first-child{
    grid-template-columns:1fr !important;
    width:min(760px, calc(100% - 40px)) !important;
    padding:28px !important;
    gap:32px !important;
  }
  .page-contact .contact > .wrap:nth-child(2){
    width:min(760px, calc(100% - 40px)) !important;
  }
}

/* Mobile */
@media(max-width:560px){
  .page-contact .contact{
    padding-top:36px !important;
  }
  .page-contact .contact > .wrap:first-child{
    width:calc(100% - 24px) !important;
    padding:20px !important;
    border-radius:22px !important;
  }
  .page-contact .contact > .wrap:nth-child(2){
    width:calc(100% - 24px) !important;
  }
  .page-contact .contact .cta{
    flex-direction:column;
  }
  .page-contact .contact .cta .btn{
    width:100%;
    justify-content:center;
  }
}
