:root{
  --blue-primary:#004F59;
  --blue-secondary:#00A3AD;
  --purple:#A51890;
  --black:#000000;
  --white:#FFFFFF;
  --paper:#F5F8F8;
}
*{box-sizing:border-box;margin:0;padding:0;}
/* Filet de sécurité : aucun débordement horizontal visible, quel que soit
   l'élément qui en serait la cause (impossible à vérifier ici sous ~518px,
   la fenêtre minimale de Chrome headless sur cette machine). */
body{font-family:'Inter',sans-serif;color:var(--black);background:var(--white);line-height:1.6;overflow-x:hidden;}
h1,h2{font-family:'Montserrat',sans-serif;font-weight:300;color:var(--blue-primary);}
a{color:var(--blue-secondary);text-decoration:none;}

/* ===== motif ligne de cotation (signature du site) ===== */
.cote{display:flex;align-items:center;gap:16px;max-width:760px;margin:0 auto;}
.cote .line{flex:1;height:1px;background:currentColor;position:relative;}
.cote .line::before,.cote .line::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:currentColor;}
.cote .line::before{left:0;}
.cote .line::after{right:0;}
.cote .label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;white-space:nowrap;}

/* ===== header ===== */
.site-header{background:var(--blue-primary);padding:18px 40px;display:flex;align-items:center;justify-content:space-between;}
.site-header .logo img{height:72px;width:auto;display:block;}
.header-contact{color:var(--white);font-weight:600;font-size:14px;letter-spacing:.02em;}
.header-contact:hover{opacity:.85;}

/* ===== wrapper de centrage (pour les sections pleine largeur) ===== */
.wrap{max-width:900px;margin:0 auto;}

/* ===== hero ===== */
.hero{
  background:var(--blue-primary);color:var(--white);
  max-width:none;margin:0;
  padding:90px 40px 100px;text-align:center;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:40px 40px;
}
.hero-logo{width:150px;height:auto;margin:0 auto 30px;display:block;}
.hero .cote{color:rgba(255,255,255,.6);margin-bottom:26px;}
.hero .cote .label{color:var(--white);}
.hero h1{color:var(--white);font-size:68px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;margin-bottom:18px;}
.hero .subname{font-family:'Montserrat',sans-serif;font-weight:300;color:var(--white);font-size:28px;letter-spacing:.01em;margin-bottom:4px;}
.hero .role{font-style:italic;font-size:17px;opacity:.85;margin-bottom:34px;}
.hero .cote.bottom{margin-top:26px;margin-bottom:0;}
.hero p.tagline{max-width:480px;margin:0 auto;font-size:15px;opacity:.85;}

/* ===== sections ===== */
section{padding:70px 40px;max-width:900px;margin:0 auto;}
.section-head{text-align:center;margin-bottom:48px;}
.section-head .cote{color:#CBD9DA;margin-bottom:14px;}
.section-head .cote .label{color:var(--blue-primary);}
.section-head h2{font-size:32px;}

/* ===== services ===== */
.grid-services{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.plan-card{position:relative;border:1px solid #D7E2E3;padding:26px 24px;background:var(--paper);}
.plan-card::before,.plan-card::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--blue-secondary);}
.plan-card::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.plan-card::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}
.plan-card h3{font-family:'Montserrat',sans-serif;font-weight:500;font-size:16px;color:var(--blue-primary);margin-bottom:8px;}
.plan-card p{font-size:14px;color:#444;}
.plan-card .tag{display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-secondary);font-weight:600;margin-bottom:10px;}

/* ===== zone d'intervention ===== */
.zone{text-align:center;}

.zone-content{display:flex;align-items:center;gap:48px;text-align:left;margin-top:8px;}
.zone-map{flex:0 0 320px;}
.zone-map img{width:100%;height:auto;display:block;border:1px solid var(--blue-secondary);}
.zone-map-caption{font-size:10px;letter-spacing:.02em;color:#8a9a9c;margin-top:8px;text-align:center;}
.zone-map-caption a{color:#8a9a9c;text-decoration:underline;}

.zone-text{flex:1;min-width:220px;}
.zone .dept{display:inline-flex;gap:10px;margin-top:22px;}
.zone .dept span{border:1px solid var(--blue-primary);color:var(--blue-primary);font-size:12px;font-weight:600;letter-spacing:.05em;padding:6px 14px;}

@media(max-width:768px){
  .zone-content{flex-direction:column;text-align:center;}
  .zone-map{flex:0 0 auto;width:280px;}
}

/* ===== réalisations (carrousel) ===== */
.carousel-wrap{display:flex;align-items:center;gap:12px;}
.carousel{
  display:flex;gap:14px;flex:1;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:2px 2px 10px;
  scrollbar-width:none;    /* Firefox */
  -ms-overflow-style:none; /* Edge legacy */
}
.carousel::-webkit-scrollbar{display:none;} /* Chrome / Edge / Safari */
.carousel .slide{
  flex:0 0 280px;aspect-ratio:4/3;background:var(--paper);border:1px solid #D7E2E3;
  position:relative;overflow:hidden;scroll-snap-align:start;
  /* .slide est un <button> : on retire son apparence native */
  padding:0;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.carousel .slide:focus-visible{outline:2px solid var(--blue-secondary);outline-offset:2px;}
.carousel .slide img{width:100%;height:100%;object-fit:cover;display:block;}
.carousel .slide::before,.carousel .slide::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--blue-secondary);z-index:1;}
.carousel .slide::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.carousel .slide::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}
.slide-caption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 12px 8px;
  background:linear-gradient(transparent,rgba(0,20,22,.75));color:var(--white);
}
.slide-caption .tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-secondary);font-weight:600;}
.slide-caption h3{font-family:'Montserrat',sans-serif;font-weight:500;font-size:15px;color:var(--white);margin-top:2px;}
.carousel-nav{
  flex:0 0 auto;width:36px;height:36px;border:1px solid var(--blue-secondary);background:var(--white);
  color:var(--blue-primary);font-size:22px;line-height:1;cursor:pointer;
}
.carousel-nav:hover{background:var(--blue-secondary);color:var(--white);}
.carousel-empty{text-align:center;color:#8a9a9c;font-style:italic;}

/* ===== lightbox (agrandissement d'une réalisation) ===== */
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;}
.lightbox[hidden]{display:none;}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(0,20,22,.85);}
.lightbox-panel{
  position:relative;z-index:1;background:var(--white);width:100%;max-width:760px;
  max-height:90vh;overflow-y:auto;border:1px solid var(--blue-secondary);
}
.lightbox-image{width:100%;max-height:50vh;object-fit:contain;background:var(--paper);display:block;}
.lightbox-info{padding:24px 28px 28px;}
.lightbox-info .tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-secondary);font-weight:600;}
.lightbox-info h3{font-family:'Montserrat',sans-serif;font-weight:500;font-size:20px;color:var(--blue-primary);margin:6px 0 14px;}
.lightbox-info p{color:var(--black);line-height:1.7;}
.lightbox-info p:empty{display:none;}
.lightbox-close{
  position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;
  border:1px solid var(--blue-secondary);background:var(--white);color:var(--blue-primary);
  font-size:22px;line-height:1;cursor:pointer;
}
.lightbox-close:hover{background:var(--blue-secondary);color:var(--white);}

@media(max-width:640px){
  .lightbox{padding:12px;}
  .lightbox-info{padding:18px 20px 22px;}
}

/* 1-2 réalisations : centrées plutôt que collées à gauche (flex-wrap plutôt
   qu'overflow:auto pour rester sûr sur petit écran). */
.carousel.carousel-centered{justify-content:center;flex-wrap:wrap;overflow-x:visible;}

/* ===== à propos ===== */
.about{display:flex;gap:36px;align-items:center;}
.about p{font-size:15px;color:#333;}
.about-text-only{display:block;text-align:center;max-width:640px;margin:0 auto;}
.about-text-only p{font-size:17px;}
@media(max-width:640px){.about{flex-direction:column;}}

/* ===== contact ===== */
.contact-panel{background:var(--blue-primary);max-width:none;margin:0;padding:56px 48px;color:var(--white);}
.contact-panel .section-head .cote{color:rgba(255,255,255,.3);}
.contact-panel .section-head .cote .label,.contact-panel .section-head h2{color:var(--white);}
.field{margin-bottom:22px;}
.field label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;opacity:.8;}
.field input,.field textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.5);
  color:var(--white);font-family:'Inter',sans-serif;font-size:15px;padding:8px 2px;outline:none;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.65);}
.btn{margin-top:10px;background:transparent;border:1px solid var(--white);color:var(--white);padding:12px 30px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;cursor:pointer;}
.btn:hover{background:rgba(255,255,255,.1);}

/* Honeypot : hors écran plutôt que display:none — certains robots ignorent
   les champs display:none mais remplissent quand même ceux-ci. */
.hp-field{position:absolute;left:-9999px;top:-9999px;}

.form-errors,.form-success{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);
  padding:14px 18px;margin-bottom:22px;font-size:14px;
}
.form-errors{list-style:none;}
.form-errors li{margin-bottom:4px;}
.form-errors li:last-child{margin-bottom:0;}
.direct-contact{margin-top:32px;padding-top:26px;border-top:1px solid rgba(255,255,255,.25);display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:.01em;}
.direct-contact a{color:var(--white);text-decoration:underline;text-underline-offset:3px;}
.direct-contact a:hover{color:var(--blue-secondary);}
.direct-contact .sep{opacity:.4;}
@media(max-width:640px){.direct-contact{flex-direction:column;align-items:flex-start;gap:6px;}.direct-contact .sep{display:none;}}

/* ===== pages légales ===== */
.legal-page h1{font-family:'Montserrat',sans-serif;font-weight:500;color:var(--blue-primary);font-size:30px;margin-bottom:36px;text-align:center;}
.legal-page h2{font-family:'Montserrat',sans-serif;font-weight:500;color:var(--blue-primary);font-size:18px;margin:36px 0 12px;}
.legal-page h2:first-of-type{margin-top:0;}
.legal-page p{font-size:15px;color:#333;line-height:1.7;margin-bottom:14px;}
.legal-page ul{padding-left:20px;margin:10px 0 16px;}
.legal-page li{font-size:15px;color:#333;line-height:1.7;margin-bottom:6px;}

/* ===== footer ===== */
.site-footer{background:#013A42;color:rgba(255,255,255,.7);text-align:center;padding:24px;font-size:12px;}
.site-footer a{color:rgba(255,255,255,.85);}
.site-footer .admin-link{margin-top:10px;}
.site-footer .admin-link a{color:rgba(255,255,255,.35);font-size:11px;}
.site-footer .admin-link a:hover{color:rgba(255,255,255,.7);}

@media(max-width:640px){
  .grid-services{grid-template-columns:1fr;}
  .hero h1{font-size:40px;}
  .hero .subname{font-size:22px;}
  .hero-logo{width:100px;}
  .carousel .slide{flex-basis:220px;}
  .carousel-nav{display:none;}
  .cote{gap:8px;}
  .cote .label{font-size:9px;letter-spacing:.06em;white-space:normal;text-align:center;}
}

@media(max-width:400px){
  .hero h1{font-size:32px;}
}