/* =========================
   Thème clair "béton"
   ========================= */
:root{
  --bg:#F4F4F4;
  --panel:#FFFFFF;
  --line:#E0E0E0;

  --ink:#212121;         /* Couleur principale du texte */
  --text:#5C5C5C;        /* Secondaire/legacy, utilisé par certains blocs */
  --muted:#6F6F6F;

  --accent:#949494; --accent-2:#5C5C5C; --accent-3:#EBEBEB;
  --brand:#8C8C8C; --brand-2:#747474;

  --ok:#2E7D32; --danger:#B3261E;
  --radius:8px; --shadow:0 6px 16px rgba(0,0,0,.08);

  --logo-bg: linear-gradient(135deg,#BDBDBD,#8C8C8C);

  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,'Helvetica Neue',sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
}
a{color:var(--accent-2); text-decoration:none}
.container{width:min(1200px,92vw); margin-inline:auto}

/* Utils visibilité (par défaut) */
.only-mobile{ display:none !important; }
.only-desktop{ display:initial !important; }

/* Header (fond clair + légère transparence) */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.1) blur(8px);
  background:rgba(255,255,255,.8);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:.8rem; font-weight:700; letter-spacing:.4px}

.logo{
  display:inline-grid; place-items:center;
  width:48px; height:48px; border-radius:8px;
  background: var(--logo-bg);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.logo > img{ width:100%; height:100%; object-fit:contain; display:block; }

.brand b{font-size:1.05rem; color:var(--ink)}

nav ul{display:flex; gap:1.1rem; list-style:none; padding:0; margin:0}
nav a{opacity:.9; padding:.4rem .6rem; border-radius:8px; color:var(--ink)}
nav a[aria-current="page"], nav a:hover{opacity:1; background:rgba(0,0,0,.06)}

nav ul{
  display:flex;
  align-items:center; /* ✅ centre verticalement tous les <li>/<a> */
  gap:1.1rem;
}

nav a{
  display:flex;                /* ✅ le lien s’adapte comme un bouton */
  align-items:center;          /* ✅ centrage vertical */
  justify-content:center;      /* ✅ centrage horizontal du texte */
  padding:.4rem .85rem;        /* léger upgrade visuel */
  line-height:1;               /* pour éviter les décalages de hauteur */
  text-align:center;           /* ✅ utile pour les libellés longueurs variables */
  white-space:normal;
}

.cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#FFFFFF; font-weight:700; padding:.6rem .9rem;
  border-radius:8px; box-shadow:var(--shadow); border:0
}
.cta.ghost{
  background:transparent; color:var(--muted);
  border:1px solid var(--line)
}

/* Accessibilité */
.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:8px; top:8px; width:auto; height:auto; padding:.5rem .7rem; background:#000; color:#fff; border-radius:8px; outline:2px solid var(--brand)}

/* Hero (fond subtil "béton") */
.hero{
  position:relative; padding:82px 0 54px; overflow:hidden;
  background:conic-gradient(from 180deg at 15% 10%, rgba(0,0,0,.03), transparent);
}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center}
.hero h1{font-size:clamp(1.9rem, 2.3rem + 1vw, 3rem); line-height:1.15; margin:0 0 .8rem; color:var(--ink)}
.lead{color:var(--text); margin:0 0 1.2rem; font-size:1.1rem}
.badges{display:flex; flex-wrap:wrap; gap:.6rem}
.badge{
  border:1px solid var(--line); color:var(--ink);
  padding:.45rem .65rem; border-radius:999px; font-size:.9rem;
  display:inline-flex; gap:.45rem; align-items:center; background:#fff
}
.hero-card{
  background:linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.01));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow); overflow:hidden
}
.hero-photo{
  border-radius:10px; aspect-ratio:4/3;
  background:linear-gradient(135deg,#f0f0f0,#e7e7e7);
  display:grid; place-items:center; color:#555; font-weight:600
}

/* Quand .hero-photo est une <img> */
.hero-card img.hero-photo{
  display:block; inline-size:100%; block-size:auto; aspect-ratio:4 / 3;
  object-fit:cover; border-radius:10px;
  max-block-size:clamp(220px, 42vh, 420px);
}

/* Limiter largeur visuel sur grands écrans */
@media (min-width: 1024px){
  .hero-card{ max-inline-size:560px; }
}

/* Sections */
.section{padding:56px 0}
h1,h2{margin:0 0 1rem; color:var(--ink)}
.sub{color:var(--text); margin-top:-.2rem}
.center{text-align:center}

/* Grids */
.grid{display:grid; gap:1rem}
.grid.services{grid-template-columns:repeat(3,1fr)}
.grid.gallery{grid-template-columns:repeat(3,1fr)}
.grid.two{grid-template-columns:1.1fr .9fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow);
  color:var(--ink)
}
.card h2,.card h3{margin:.2rem 0 .4rem}

/* Gallery */
.tile{
  position:relative; border-radius:10px; overflow:hidden;
  background:linear-gradient(135deg,#f0f0f0,#e7e7e7);
  aspect-ratio:4/3; cursor:zoom-in
}
.tile span{
  position:absolute; bottom:10px; left:10px; font-size:.9rem;
  background:rgba(0,0,0,.35); color:#fff;
  padding:.3rem .5rem; border-radius:8px
}
.tile img{width:100%; height:100%; object-fit:cover; display:block; opacity:.95}

.car-item{ cursor: zoom-in; }

/* Lightbox */
dialog{border:0; border-radius:12px; padding:0; overflow:hidden; background:#fff; color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.lightbox img{max-width:90vw; max-height:85vh; display:block}

/* Avis */
.review{display:flex; gap:1rem; align-items:flex-start}
.avatar{width:44px; height:44px; border-radius:50%; background:#ddd}
.stars{letter-spacing:2px; color:#f5a623}

/* Form */
form{display:grid; gap:.8rem}
.row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
label{display:grid; gap:.2rem; font-size:.95rem; color:var(--ink)}


:where(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="file"]
),
textarea{
  width:100%;
  background:#fff; color:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  padding:.8rem;
  min-height:120px; resize:vertical;
}


/* Checkbox: taille naturelle, pas de largeur 100% */
input[type="checkbox"]{
  width:auto; height:auto;          /* retire le 100% hérité */
  margin: .2rem 0 0;                /* petit alignement vertical */
  accent-color: var(--brand-2);     /* couleur conforme au thème */
  vertical-align: top;              /* évite le décalage de ligne */
}


/* Conteneur de la ligne RGPD */
.consent{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  font-size:.9rem;
  color:var(--muted);
}

/* La case garde sa taille naturelle */
.consent > input[type="checkbox"]{
  flex:0 0 auto;
}

/* Le texte prend tout l’espace restant */
.consent > span{
  flex:1 1 auto;
  min-width:0;              /* évite les débordements sur petits écrans */
  line-height:1.4;
}

.sr-only{
  position:absolute; 
  width:1px; 
  height:1px; 
  padding:0; 
  margin:-1px; 
  overflow:hidden; 
  clip:rect(0,0,0,0); 
  white-space:nowrap; 
  border:0
}

.actions{
  display:flex; 
  gap:.6rem; 
  flex-wrap:wrap; 
  margin-top:.4rem
}

/* Footer */
.site-footer{padding:32px 0 60px; color:var(--muted)}
.foot-grid{display:grid; gap:1rem; grid-template-columns:2fr 1fr}
.top{
  position:fixed; right:16px; bottom:16px; border-radius:999px;
  padding:.7rem .9rem; background:rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.12); backdrop-filter:blur(4px);
  color:var(--ink)
}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr}
  .grid.services, .grid.gallery{grid-template-columns:1fr 1fr}
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width: 620px){
  nav ul{gap:.4rem}
  .grid.gallery{grid-template-columns:1fr}
}

/* Mise en page propre des avis */
.card.review{ display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:start; }
.card.review .avatar{ inline-size:48px; block-size:48px; border-radius:50%; background:#ddd center/cover no-repeat; }
.card.review .review-photo{
  margin-top:.5rem; inline-size:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:8px; border:1px solid var(--line);
}

.reviews{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  grid-auto-rows:8px;
  gap:20px; align-items:start;
}
.reviews .review{
  grid-row:span var(--rows,1);
  display:block; height:auto!important; min-height:0!important;
}
@media (max-width:768px){
  .reviews{ grid-template-columns:1fr; grid-auto-rows:auto; gap:16px }
  .reviews .review{ grid-row:auto }
}

/* Images dans les avis */
.reviews .review img{ width:100%; height:auto; display:block; }

/* Mode "inverted colors" utilisateur */
@media (inverted-colors: inverted){
  html{ filter: invert(1) hue-rotate(180deg); }
  img, video, picture, svg, canvas, iframe{ filter: invert(1) hue-rotate(180deg); }
}

.grid.services{
  display:grid;
  gap:20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items:stretch;
  grid-auto-rows: 1fr;
}
.grid.services > .card{
  height:100%;
  display:flex;
  flex-direction:column;
}
.grid.services.services--4{
  grid-template-columns: repeat(2, 1fr);
}

/* Avant/Après (responsive auto-ratio images) */
.ba{
  position:relative;
  width:100%;
  max-width:900px;
  margin:0 auto 24px;
  overflow:hidden;
  border-radius:10px;
  box-shadow:var(--shadow);
  background:#eee;
  border:1px solid var(--line);

  /* position du curseur (0–100) et variables pour le hublot */
  --pos:50;                         /* valeur numérique sans % pour faciliter les calc */
  --x: calc(var(--pos) * 1%);       /* pourcentages utilisables en CSS */
  --feather: clamp(12px, 2.2vw, 26px);      /* largeur du fondu autour du curseur */

  /* garde la hauteur sous contrôle */
  max-height: 65vh;
}
@media (min-width: 992px){
  .ba{ max-height: 75vh; }
}

.ba > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background: transparent;   /* plus de « disque » noir disgracieux */
}

/* Image du dessus: affichée à droite, avec fondu autour de la limite */
.ba > img.top{
  /* La zone gauche devient transparente, la droite opaque,
     avec un fondu centré sur --x et d’épaisseur --feather. */
  -webkit-mask: linear-gradient(
    90deg,
    transparent calc(var(--x) - var(--feather)),
    #000       calc(var(--x) + var(--feather))
  );
  mask: linear-gradient(
    90deg,
    transparent calc(var(--x) - var(--feather)),
    #000       calc(var(--x) + var(--feather))
  );
}
/* Filet vertical discret à la position du curseur */
.ba::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left: var(--x);
  transform: translateX(-0.5px);
  width: 1px;
  background: rgba(255,255,255,.9);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.12),
    0 0 10px rgba(0,0,0,.08);
  pointer-events:none;
}

/* Ratio du conteneur en fonction de la première image chargée */
.ba::before{
  content:"";
  display:block;
  padding-bottom:150%;
}
.ba[data-ratio]::before{
  padding-bottom:calc(var(--ratio) * 100%);
}

/* Slider en bas (inchangé) */
.ba .ba-range{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  width:80%;
  appearance:none;
  height:8px;
  background:var(--accent-3);
  border-radius:999px;
  border:1px solid var(--line);
  z-index:5;
}
.ba .ba-range::-webkit-slider-thumb{
  appearance:none;
  width:18px; height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border:0; box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.ba .ba-range::-moz-range-thumb{
  width:18px; height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border:0; box-shadow:0 1px 4px rgba(0,0,0,.2);
}

/* Sélecteur vertical (inchangé, avec bascule mobile) */
.ba-chooser{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px;
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
  max-height:80%;
  overflow:auto;
  scrollbar-width:thin;
  z-index:6;
}
.ba-chooser li{ list-style:none; }
.ba-chooser button{
  display:block;
  inline-size:64px; block-size:64px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#fff;
  padding:0;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ba-chooser button:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.12); }
.ba-chooser button.is-active{ border-color:var(--brand-2); }
.ba-chooser button img{
  inline-size:100%; block-size:100%; object-fit:cover; display:block; border-radius:8px;
}

/* En mobile: sélecteur en bas, horizontal */
@media (max-width: 640px){
  .ba-chooser{
    top:auto; bottom:12px; left:50%; right:auto;
    transform:translateX(-50%);
    flex-direction:row;
    max-width:92%;
    max-height:unset;
  }
 /* .ba{ --portalR: clamp(72px, 28vw, 160px); } /* hublot un peu plus petit */
  .ba{ --feather: clamp(10px, 4vw, 18px); }
}



/* Carrousel horizontal (scroll-snap) */
.carousel{ margin-block:32px; }
.carousel-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.8rem;
}
.carousel-ctrl button{
  inline-size:36px; block-size:36px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--ink); box-shadow:var(--shadow); cursor:pointer;
}
.car-track{
  display:grid; grid-auto-flow:column; gap:14px; overflow:auto; padding-bottom:.4rem;
  scroll-snap-type:x mandatory; scroll-padding-inline:12px;
}
.car-item{
  inline-size:min(360px, 72vw); block-size:220px; border-radius:10px; overflow:hidden;
  background:#eee; border:1px solid var(--line); scroll-snap-align:center; flex:0 0 auto;
}
.car-item img{ inline-size:100%; block-size:100%; object-fit:cover; display:block; }


/* Diaporama (fade) */
.diapo{ padding:0; overflow:hidden }
.diapo .diapo-viewport{
  position:relative; inline-size:100%; block-size:0;
  padding-bottom:66.666%; /* ratio ~3:2 */
}
.diapo .diapo-viewport img{
  position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .5s ease;
}
.diapo .diapo-viewport img.is-active{ opacity:1; }
.diapo .diapo-dots{ display:flex; gap:6px; justify-content:center; padding:10px }
.diapo .diapo-dots i{
  inline-size:8px; block-size:8px; border-radius:50%; background:var(--accent); opacity:.6;
}
.diapo .diapo-dots i.is-active{ background:var(--brand-2); opacity:1 }


.cert-logos{
  margin: 24px auto 40px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
}

.cert-logos img{
  height:100px;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.15));
  transition:transform .2s ease;
}

.cert-logos img:hover{
  transform:scale(1.06);
}

@media (max-width:600px){
  .cert-logos img{
    height:65px;
  }
}