/* ========================= /assets/styles.css ========================= */
:root{
  --red-600:#E10917; /* rouge carte */
  --gray-100:#F1F1F0;--gray-300:#CBCAC8;--gray-700:#6B7275;--gray-800:#484F51;--gray-900:#1D1D1C;
  --wood-300:#C4A493;--wood-500:#867B6E;
  --radius:16px;--shadow-md:0 10px 30px rgba(0,0,0,.08);--shadow-lg:0 20px 50px rgba(0,0,0,.12)
}
*{box-sizing:border-box}
body{background-color: #f2F2F2; margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--gray-900);-webkit-font-smoothing:antialiased;line-height:1.6}
h1,h2,h3{font-family:Montserrat,Inter,sans-serif;line-height:1.2;margin:0 0 .6rem}
h1{font-size:clamp(2rem,3.6vw,3.2rem);font-weight:800;letter-spacing:.2px}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700}
h3{font-size:clamp(1.2rem,1.8vw,1.4rem);font-weight:600}
p{margin:.2rem 0 1rem}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:clamp(1rem,4vw,2rem)}
.center{text-align:center}
.mt-12{margin-top:12px}.mt-20{margin-top:20px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.75rem}
.logo{width:42px;height:42px}
.wordmark{
  display: inline-flex;
  flex-direction: column;
}

.wordmark .name{
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 800;
  color: var(--red-600);
  letter-spacing: .5px;
  font-size: 20px;
}

.wordmark .sub{
  font-weight: 600;
  color: var(--gray-800);
  font-size: 20px;
  margin-left: .3rem;
}

/* Slogan manuscrit */
.wordmark .tagline{
  margin-top: 2px;
  font-size: clamp(1rem, 1.5vw, .9rem);
  font-family: "Dancing Script", "Pacifico", "Great Vibes", cursive;
  font-weight: 400;
  color: #4a4f52;
  letter-spacing: .03em;
}
.links{display:flex;gap:.6rem;align-items:center}
.links a{padding:.6rem .9rem;border-radius:999px;font-weight:600}
.links a:hover{background:rgba(0,0,0,.06)}
.links .active{background:rgba(0,0,0,.06)}
.cta{background:var(--red-600);color:#fff;border-radius:999px;padding:.6rem 1rem;font-weight:700;box-shadow:0 8px 18px rgba(225,9,23,.22)}
.cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(225,9,23,.28)}
.burger{display:none;border:0;background:transparent}
.burger svg{width:28px;height:28px}
.mobile{display:none;position:absolute;width:100%;background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
.mobile a{display:block;padding:1rem 1.2rem;border-top:1px solid rgba(0,0,0,.05)}
.mobile .cta{margin:.6rem 1.2rem 1.2rem;display:inline-block}
@media (max-width:860px){.links{display:none}.burger{display:block}}

/* Base (reprend l’ancien) */
:root { --header-h: 64px; }

/* 1) Sécurise la hauteur : fallback si --header-h n'est pas à jour */
:root{ --header-h: 72px; } /* ajuste à la vraie hauteur de ton header */
.hero.hero--cover{
  min-height: calc(100svh - var(--header-h, 72px));
  /* en cas de mobile où 100svh varie, tu peux tester 100dvh */
  position: relative;        /* pour ::before/::after */
  display: grid;
  place-items: center;       /* centre le premier enfant (.container) */
  text-align: center;
  padding: 0;                /* supprime tout padding du hero */
  overflow: hidden;
}

/* 2) Neutralise le padding vertical de la container dans le hero */
.hero.hero--cover .container{
  padding-block: 0;
}

/* 3) Force la grille interne à prendre la hauteur du hero et à centrer le bloc texte */
.hero.hero--cover .hero-grid{
  min-height: inherit;       /* prend la hauteur du hero */
  width: min(1200px, 100%);
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;       /* centrage vertical garanti */
  justify-content: center;   /* centrage horizontal */
}

/* 4) Bloc texte : largeur confortable + typo responsive */
.hero.hero--cover .hero-text{
  max-width: 960px;
  margin: 0 auto;
  color: #111;
}
.hero.hero--cover .hero-text h1{
  font-size: clamp(2.4rem, 5.4vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: .2px;
  margin: 0 0 .6rem;
}
.hero.hero--cover .hero-text .lead{
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.55;
  color: #2a2e31;
  max-width: 60ch;
  margin: 0 auto 1.1rem;
}

/* 5) Background + blur (inchangé) */
.hero.hero--cover::before{
  content:"";
  position:absolute; inset:0;
  background: center / cover no-repeat var(--hero-bg);
  filter: blur(2px);
  transform: scale(1.06);
  z-index: -2;
}
.hero.hero--cover::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(255,255,255,.45);
  z-index: -1;
}

/* 6) Boutons au centre + responsive */
.hero.hero--cover .btn-row{ justify-content: center; gap: .8rem; margin-top: 1rem; }
.hero.hero--cover .btn{ padding: .9rem 1.2rem; font-size: clamp(.95rem, 1.6vw, 1.05rem); }
@media (max-width: 560px){
  .hero.hero--cover .btn-row{ flex-direction: column; align-items: center; }
  .hero.hero--cover .btn{ width: 100%; max-width: 420px; }
}

/* 7) Couleur d’accent en rouge, texte global noir */
.hero .accent{ color: var(--red-600); }

/* 8) Masque l’ancienne colonne visuelle si encore présente */
.hero.hero--cover .hero-visual{ display: none; }

/* 9) Confort de scroll avec header sticky */
.site-header + .hero.hero--cover{ scroll-margin-top: var(--header-h, 72px); }

/* Bouton outline inversé sur fond sombre */
.btn.outline.invert{
  border:1px solid rgba(255,255,255,.7);
  color:#fff; background: transparent;
}
.btn.outline.invert:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.9);
}

/* Petit confort de scroll avec header sticky */
.site-header + .hero--cover{ scroll-margin-top: var(--header-h); }
.beam{width:40px;height:6px;background:linear-gradient(90deg,var(--wood-300),var(--wood-500));border-radius:99px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.quick-infos{margin-top:1rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.4rem .7rem;background:#fff;border:1px solid var(--gray-300)}
.btn-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top: 30px;}
.hero .btn-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top: 30px;    justify-content: center;}

.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.1rem;border-radius:12px;font-weight:700}
.btn.primary{background:var(--red-600);color:#fff;box-shadow:0 12px 28px rgba(225,9,23,.25)}
.btn.outline{border:1px solid var(--gray-300);background:#fff}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}

/* Sections */
.section{padding: clamp(2rem,6vw,4rem) 0}
.section.alt{background:#fff}
.section-head{padding:0 var(--container-pad)}
.section .container > .section-head{padding:0}

/* Cards grid */
.cards-grid{display:grid;gap:1rem;grid-template-columns:repeat(12,1fr)}
.service-card{grid-column:span 3;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:1.2rem;box-shadow:var(--shadow-md);transition:transform .2s ease}
.service-card:hover{transform:translateY(-2px)}
.service-card .icon{font-size:26px;margin-bottom:.4rem}
@media (max-width:980px){.service-card{grid-column:span 6}}
@media (max-width:640px){.service-card{grid-column:span 12}}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.review{grid-column:span 4;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:1.1rem;box-shadow:var(--shadow-md)}
.review .stars{color:#F5B301;letter-spacing:3px;font-size:20px;margin-bottom:.4rem}
@media (max-width:980px){.review{grid-column:span 6}}
@media (max-width:640px){.review{grid-column:span 12}}

/* Trust */
.trust{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.trust-item{grid-column:span 3;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:1.1rem;box-shadow:var(--shadow-md)}
.trust-icon{font-size:24px;margin-bottom:.3rem}
@media (max-width:980px){.trust-item{grid-column:span 6}}
@media (max-width:640px){.trust-item{grid-column:span 12}}

/* Mini gallery */
.mini-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mini-gallery img{width:100%;height:180px;object-fit:cover;border-radius:12px}
@media (max-width:980px){.mini-gallery{grid-template-columns:repeat(2,1fr)}.mini-gallery img{height:160px}}
@media (max-width:640px){.mini-gallery{grid-template-columns:1fr}.mini-gallery img{height:220px}}

  /* ===== Atelier : 1 photo (gauche) / texte (droite) ===== */
  .facility-one .container {
    padding: clamp(12px, 2vw, 18px);
  }

  .facility-one__grid {
    display: grid;
    gap: clamp(14px, 2vw, 22px);
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas: "visual text";
    align-items: center;
  }

  @media (max-width: 900px) {
    .facility-one__grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        "text"
        "visual";
      /* sur mobile : image EN DESSOUS */
    }
  }


  .emphasis li {
    list-style: none;
  }

  /* ==== Carrousel (atelier) ==== */
  .facility-photo {
    margin: 0;
  }

  .carousel {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: var(--shadow-md);
  }

  .carousel__viewport {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* grand visuel; ajustable 3/2 ou 16/10 si tu veux */
  }

  @media (max-width: 640px) {
    .carousel__viewport {
      aspect-ratio: 16 / 10;
    }
  }

  .carousel__slide {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateX(0);
  }

  .carousel__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    backface-visibility: hidden;
    background: black;
  }

  /* flèches */
  .carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(0, 0, 0, .08);
    color: #222;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  }

  .carousel__btn:hover {
    background: #fff;
  }

  .carousel__btn svg {
    width: 24px;
    height: 24px;
  }

  .carousel__btn.prev {
    left: 10px;
  }

  .carousel__btn.next {
    right: 10px;
  }

  /* points */
  .carousel__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
  }

  .carousel__dots .dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, .65);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
  }

  .carousel__dots .dot.is-active {
    background: var(--red-600);
  }

  /* accessibilité / motion */
  @media (prefers-reduced-motion: no-preference) {
    .carousel__viewport {
      transition: transform .5s ease;
    }
  }

  
  
/* ====== Lightbox ====== */
.lightbox[hidden]{ display:none; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.78);
  display: grid; place-items: center; padding: 2rem;
}
.lightbox img{
  max-width: min(92vw,1400px);
  max-height: 86vh;
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.lb-close{
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.25);
  font-size: 22px; line-height: 1; cursor: pointer;
}

.before-after-grid{
  display:grid;
  gap:1rem;
}

/* 2 colonnes sur tablette, 3 colonnes sur grand écran */
@media (min-width: 700px){
  .before-after-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (min-width: 1100px){
  .before-after-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

.before-after{
  position:relative; 
  aspect-ratio: 4 / 5;
  border-radius:14px; overflow:hidden; background:#e9ecef;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.ba-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
/* on “clippe” seulement l'image AVANT, pas de redimensionnement => pas de déformation */
.ba-img.before{ clip-path: inset(0 50% 0 0); }

/* range invisible pour l’accessibilité + drag partout */
.before-after .ba-range{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor: col-resize;
}

/* poignée & ligne */
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:2px; background: rgba(255,255,255,.85); box-shadow:0 0 0 1px rgba(0,0,0,.1);
}
.ba-handle span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:999px;
  background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
}
.ba-handle span::before, .ba-handle span::after{
  content:""; width:10px; height:10px; display:block;
  border-top:2px solid #fff; border-left:2px solid #fff;
}
.ba-handle span::before{ transform: rotate(-45deg) translateX(3px); margin-right:6px; }
.ba-handle span::after{  transform: rotate(135deg) translateX(-3px); margin-left:6px; }

/* couche supérieure (avant) recadrée dynamiquement */
.before-after .ba-top{
  position: absolute; inset: 0; width: 50%; overflow: hidden; /* init 50% */
}

/* slider invisible mais capturant les events */
.before-after .ba-range{
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: col-resize;
}

/* poignée + ligne verticale */
.ba-handle{
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 2px; background: rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}
.ba-handle span{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
}
.ba-handle span::before, .ba-handle span::after{
  content: ""; display: block; width: 10px; height: 10px; border-top: 2px solid #fff; border-left: 2px solid #fff;
}
.ba-handle span::before{ transform: rotate(-45deg) translateX(3px); margin-right: 6px; }
.ba-handle span::after{ transform: rotate(135deg) translateX(-3px); margin-left: 6px; }

  /* Layout */
.contact-wrap{
  display: grid;
  gap: 12px;
}
@media (min-width: 900px){
  .contact-wrap{
    grid-template-columns: 1fr 1.2fr;
    gap: 14px;
  }
}

/* Cartes modernes */
.card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  background: linear-gradient(180deg,#fff,#fafafa);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  overflow: clip;
}
.card .content{ padding: 1rem 1.1rem; }
.card h3{ margin: 0 0 .6rem; }

/* Coordonnées + icônes */
.info-list{ list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .4rem; }
.info{ display:flex; align-items: center; gap: .5rem; color:#2d2f31; }
.info a{ color: inherit; text-decoration: none; }
.info a:hover{ text-decoration: underline; }
.ico{
  width: 34px; height: 34px; border-radius: 10px;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg,#fff,#f5f5f5);
  border: 1px solid rgba(0,0,0,.06);
  color: var(--gray-900,#222);
}
.ico svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Réseaux */
.socials{ display:flex; gap:.5rem; flex-wrap: wrap; }
.socials .pill{
  display:inline-flex; align-items:center; gap:.45rem;
  border-radius: 999px; padding:.4rem .8rem;
  background: linear-gradient(180deg,#fff,#f5f5f5);
  border: 1px solid rgba(0,0,0,.06);
  color:#222; text-decoration:none; font-weight:600;
}
.socials .pill svg{ width:18px; height:18px; }

/* ==== Formulaire minimal ==== */
.form--minimal .row{ display:grid; gap:.8rem; }
@media (min-width: 640px){ .form--minimal .row{ grid-template-columns: 1fr 1fr; } }
.form--minimal label{ display:block; font-weight:600; margin: .2rem 0 .25rem; }
.form--minimal .req{ color:#E10917; }

.form--minimal input, .form--minimal textarea, .form--minimal select{
  width:100%; border:none; border-bottom:1.5px solid #ddd; border-radius:0;
  padding:.65rem 0; background:transparent; color:#222;
  transition: border-color .2s ease;
}
.form--minimal input::placeholder, .form--minimal textarea::placeholder{ color:#9aa0a6; }
.form--minimal input:focus, .form--minimal textarea:focus, .form--minimal select:focus{
  outline:none; border-bottom-color:#E10917;
  box-shadow: 0 1px 0 0 #E10917;
}
.form--minimal .checkbox{ display:flex; align-items:center; gap:.5rem; margin:.8rem 0; }

.submit{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:999px; padding:.6rem 1rem; background:#E10917; color:#fff; border:none; font-weight:700;
  box-shadow: 0 10px 22px rgba(225,9,23,.24); cursor:pointer;
}
.submit:disabled{ filter:saturate(.7); cursor:progress; }
.submit .spinner{
  width:16px; height:16px; border-radius:999px; border:2px solid rgba(255,255,255,.6); border-top-color:#fff;
  visibility:hidden; animation: spin .9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg);} }

.form-status{ margin-top:.6rem; min-height:1.2em; }
.form-status.ok{ color:#0a7a45; }
.form-status.err{ color:#b00020; }


/* Statut */
.form-status{ margin-top:.6rem; min-height: 1.2em; }
.form-status.ok{ color:#007a3d; }
.form-status.err{ color:#b00020; }

/* Carte Google Maps */
.map-embed{ border-radius: 16px; overflow:hidden; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.map-embed iframe{ width:100%; aspect-ratio: 16/9; border:0; }

/* Médaillon de l'icône en haut-gauche (propre et cohérent) */
.trust-item .trust-icon{
    width:44px;height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:999px;
    background:linear-gradient(180deg,#fff,var(--gray-100));
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    color:var(--gray-800);
    margin-bottom:.5rem;
  }
  .trust-item .trust-icon svg{
    width:22px;height:22px;
    stroke:currentColor; fill:none; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
  }
  
  /* Variation de teinte par carte (optionnel) */
  .trust-item.is-accent { color: var(--red-600); }
  .trust-item.is-wood  { color: var(--wood-500); }
  
  /* Icône de fond (filigrane)  déjà ajouté précédemment */
  .trust-item { position:relative; overflow:hidden; isolation:isolate; }
  .trust-item .bg-icon{
    position:absolute; right:-14px; bottom:-14px;
    opacity:.08; pointer-events:none; z-index:0; transform:rotate(-10deg);
  }
  .trust-item .bg-icon svg{
    width:170px;height:170px; display:block;
    stroke:currentColor; fill:none; stroke-width:2;
  }
  .trust-item .trust-icon, .trust-item h4, .trust-item p{ position:relative; z-index:1; }
  

/* === réalisations (v2) : 2 colonnes, image zoom only, bouton en bas === */
.svc-grid{
  display:grid;
  gap: clamp(12px,2vw,18px);
  grid-template-columns: 1fr;            /* mobile */
}
@media (min-width: 720px){
  .svc-grid{ grid-template-columns: 1fr 1fr; }  /* 2 par 2 */
}

.svc-card{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius,16px); overflow:hidden;
  box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,.08));
  text-decoration:none; color:inherit;
  /* on supprime l’animation de la carte pour éviter le “saut” */
  transition: box-shadow .2s ease;
}
.svc-card:hover{ box-shadow: 0 16px 42px rgba(0,0,0,.10); }

.svc-media{
  position:relative; overflow:hidden;
  aspect-ratio: 16/11; background:#f1f1f1;
}
.svc-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1); transition: transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* --- Prestations : variante cartes texte (icône + titre + meta) --- */
.svc-card--text .svc-content{
  padding: 1rem 1rem 3.1rem;
  gap: .5rem;
}
.svc-head{
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:.2rem;
}
.svc-icon{
  width:40px; height:40px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg,#fff,#f6f6f6);
  border:1px solid rgba(0,0,0,.06);
  color: var(--red-600);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  flex:0 0 auto;
}
.svc-icon svg{
  width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; 
  stroke-linecap:round; stroke-linejoin:round;
}
.svc-card--text h3{
  margin:0; font-weight:800; letter-spacing:.2px;
}
.svc-card--text p.meta{
  margin:.1rem 0 0;
  font-size:.95rem; color:#636a6d;
}
/* Soulignement tricolore sous le mot "Millet" */
.fr-flag-underline{
  position: relative;
  font-weight: 800;
  padding-bottom: 4px;                /* espace pour le liseré */
}
.fr-flag-underline::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg,#0055A4 0 33%, #ffffff 33% 66%, #EF4135 66% 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.06) inset;
}
/* Le zoom ne concerne que l'image */
.svc-card:hover .svc-media img{ transform: scale(1.06); }

.svc-content{
  position:relative;
  flex:1;                               /* occupe la hauteur disponible */
  display:flex; flex-direction:column; gap:.45rem;
  padding: .95rem 1rem 3.1rem;          /* on réserve de la place pour l’icône */
}
.svc-content h3{ margin:0; font-weight:800; letter-spacing:.2px; }
.svc-content p{ margin:0; color:#2f3437; line-height:1.55; }

/* Icône de redirection, fixée en bas-droite du bloc texte */
.svc-go{
  position:absolute; right:.85rem; bottom:.85rem;
  width:38px; height:38px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg,#fff,#f6f6f6);
  color: var(--red-600, #E10917);
  box-shadow: 0 6px 16px rgba(0,0,0,.07);
  transition: transform .15s ease, background .15s ease;
}
.svc-go svg{
  width:18px; height:18px; stroke: currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.svc-card:hover .svc-go{ transform: translateY(-1px); background:#fff; }

/* ===================== RÉALISATIONS  Responsive solide ===================== */

/* ===== Réalisations : grilles par thème ===== */

/* Conteneur des blocs "Charpente", "Maisons normandes", etc. */
.reals-grid{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Carte par thème */
.reals-block{
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  
  padding:1.1rem 1.2rem 1.3rem;
}
/* ≥ 640px → 3 colonnes */
@media (min-width: 640px){
  .reals-block{
    padding:100px;
  }
}
.reals-block__head{
  margin-bottom: .9rem;
}

.reals-block__head h3{
  margin:0;
  font-size:clamp(1.1rem,1.6vw,1.3rem);
}

/* === Grille d’images : max 4 par ligne === */
.reals-gallery{
  display:grid;
  gap:8px;
  grid-template-columns: repeat(2, 1fr);  /* mobile : 2 */
}

/* ≥ 640px → 3 colonnes */
@media (min-width: 640px){
  .reals-gallery{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ≥ 960px → 4 colonnes max */
@media (min-width: 960px){
  .reals-gallery{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Images : aucune déformation, juste redimensionnées */
.reals-gallery img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  object-fit:contain;   /* on respecte le format de la photo */
  background:#f3f3f3;   /* petite couleur de fond si l'image n'est pas très haute */
}

/* Petit hover propre */
.reals-gallery img:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}





/* --- PATCH: faire réapparaître les miniatures sous l'image --- */

/* Le conteneur ne clippe plus la bande de miniatures */
.ri-media{
  overflow: visible;           /* avant: hidden */
  background: transparent;     /* décoratif seulement */
  border-radius: 0;            /* on met l'arrondi sur l'image */
}

/* L’image principale gère le ratio + l'arrondi + la hauteur max */
.ri-main{
  display:block;
  width: 100%;
  height: auto;                /* laisse le ratio faire le job */
  aspect-ratio: 16 / 10;       /* desktop */
  max-height: min(60vh, 520px);
  object-fit: cover;
  border-radius: 14px;         /* arrondi ici */
}

/* Bande des miniatures visible sous l'image */
.ri-strip{
  margin-top: 8px;             /* petit espace avec la grande image */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* Hauteur bornée et sans débordement des miniatures (desktop) */
.ri-strip img, .ri-thumb{
  width: 100%;
  height: clamp(64px, 9vw, 92px);
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Mobile: ratio 4/3, carrousel horizontal doux, pas de dépassement */
@media (max-width: 760px){
  .ri-main{
    aspect-ratio: 4 / 3;       /* plus haut en mobile */
    max-height: min(52vh, 440px);
  }
  .ri-strip{
    display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .ri-strip img, .ri-thumb{
    flex: 0 0 62%; max-width: 62%;
    height: auto; aspect-ratio: 4 / 3;   /* pas de débordement */
    scroll-snap-align: start;
  }
}

.ri-thumb{ cursor:pointer; outline:none; }
.ri-thumb.is-active{ box-shadow: 0 0 0 2px var(--red-600); }
.ri-thumb:focus-visible{ outline:2px solid var(--red-600); outline-offset:2px; }
.ri-strip img:hover{ transform: translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.10); }

/* Corps */
.ri-body{ padding: clamp(1rem, 2.4vw, 1.4rem); }
.ri-body h3{ margin:0 0 .35rem; font-size: clamp(1.15rem,1.6vw,1.35rem); }
.ri-body p{ margin:0 0 .6rem; color:#4b4f52; }
.ri-points{ margin:0; padding-left:1.1rem; display:grid; gap:.25rem; }
.ri-points li{ list-style:disc; color:#2b2e30; }

/* ===== Mobile & tablettes : pile verticale, image toujours au-dessus ===== */
@media (max-width: 1024px){
  .reals-item{ grid-template-columns: 1fr; }
  /* force l’image en premier même pour les blocs alternés */
  .reals-item .ri-media{ order:-1 !important; }
  .reals-item .ri-body{  order: 0 !important; }
}

/* Miniatures en carrousel horizontal doux sur petits écrans */
@media (max-width: 760px){
  .ri-strip{
    display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .ri-strip img, .ri-thumb{
    flex: 0 0 62%; max-width:62%;
    height: auto; aspect-ratio: 4 / 3;   /* garde la forme, pas de débordement */
    scroll-snap-align:start;
  }
}

/* Vidéo responsive (inchangé, pour mémoire) */
.card-plain{ border-radius:14px; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,.06); background:#000; }
.video-16x9{ position:relative; }
.video-16x9::before{ content:""; display:block; padding-top:56.25%; }
.video-16x9 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }


/* Bandeau rouge (déjà présent, légère simplification) */
.band--red{ background: #d4121e; color:#fff; }
.band-flex{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; align-items:center; }
.chip-adv{
  display:inline-flex; align-items:center; gap:.45rem; font-weight:700;
  padding:.55rem .9rem; border-radius:999px;
  background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
}
.chip-adv .ico{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; }
.chip-adv svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Footer – espacements confort + structure */
.site-footer{
  color:#2d2f31;
  background: linear-gradient(180deg,#ffffff,#f7f7f7);
  border-top:1px solid #ececec;
}

.site-footer .container{
  padding-left: clamp(16px,4vw,32px);
  padding-right: clamp(16px,4vw,32px);
}

.footer-grid{
  display:grid;
  gap: clamp(16px,2.5vw,24px);
  padding: clamp(22px,3vw,36px) 0; /* ↑ plus d'air */
  grid-template-columns: 1fr;
}

@media (min-width: 860px){
  .footer-grid{ grid-template-columns: 1.2fr .8fr .8fr .9fr; }
}

/* Colonnes */
.footer-col h4{
  margin:0 0 .6rem;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#111;
  opacity:.9;
}
.footer-col ul{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.45rem;
}
.footer-col a{ color:inherit; text-decoration:none; }
.footer-col a:hover{ text-decoration:underline; }

/* Bloc marque */
.footer-brand .brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; }
.footer-brand .wordmark .name{ font-weight:800; letter-spacing:.5px; color:#E10917; }
.footer-brand .wordmark .sub{ font-weight:600; color:#4a4f52; margin-left:.3rem; }
.footer-brand .tagline{ margin:.5rem 0 1rem; color:#555; }
.footer-cta{
  display:inline-block; border-radius:999px; padding:.55rem 1rem;
  background:#E10917; color:#fff; font-weight:700; text-decoration:none;
  box-shadow:0 8px 18px rgba(225,9,23,.22);
}
.footer-cta:hover{ filter:brightness(.96); }

/* Contact + réseaux */
.footer-contact ul li{ color:#444; }
.footer-social{ display:flex; gap:.6rem; margin-top:.7rem; }
.footer-social a{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid rgba(0,0,0,.08);
  background:linear-gradient(180deg,#fff,#f5f5f5); color:#333;
}
.footer-social svg{ width:20px; height:20px; }

/* Subfooter */
.subfooter{
  border-top:1px solid #e8e8e8; background:#fff;
}
.subfooter .container{
  padding-top: clamp(10px,1.8vw,14px);
  padding-bottom: clamp(10px,1.8vw,14px);
}

/* Disposition tri-colonnes : gauche / centre / droite */
.subflex.subflex--tri{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.subflex.subflex--tri .sub-left  { justify-self: start; }
.subflex.subflex--tri .sub-center{ justify-self: center; white-space: nowrap; }
.subflex.subflex--tri .sub-right { justify-self: end; }

/* Lien “Propulsé par” */
.footer-signature__link{
  font-weight: 700;
  color: #E10917;
  text-decoration: none;
  border-bottom: 1px solid rgba(225,9,23,.25);
}
.footer-signature__link:hover{
  color: #c30c18;
  border-bottom-color: currentColor;
}

/* Mobile : empilement centré */
@media (max-width: 640px){
  .subflex.subflex--tri{
    grid-template-columns: 1fr;
    text-align: center;
    gap: .35rem;
  }
  .subflex.subflex--tri .sub-left,
  .subflex.subflex--tri .sub-center,
  .subflex.subflex--tri .sub-right{
    justify-self: center;
  }
}



/* --- Nav d’ancrages (style site) --- */
.reals-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
  margin-top:.8rem;
}
.pill-link{
  --b: rgba(0,0,0,.08);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:999px; font-weight:800;
  border:1px solid var(--b);
  background: linear-gradient(180deg,#fff,#f7f7f7);
  color:#1D1D1C; text-decoration:none;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.pill-link .dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--red-600);
  box-shadow: 0 0 0 3px rgba(225,9,23,.12);
}
.pill-link:hover{ transform: translateY(-1px); background:#fff; box-shadow:0 12px 24px rgba(0,0,0,.09); }
.pill-link:active{ transform: translateY(0); }

/* Focus clavier très visible */
.pill-link:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(225,9,23,.22), 0 8px 18px rgba(0,0,0,.08);
}