/* ==========================================================================
   Bat Opti — feuille de style commune
   Refonte photo-first : on montre, on ne raconte pas.
   Trois couleurs : lin #f5f3ee · ardoise #15191f · ocre #e0a82e
   ========================================================================== */

:root{
  --lin:#f5f3ee;
  --ink:#15191f;
  --ocre:#e0a82e;
  --white:#fff;

  --ink-70:rgba(21,25,31,.70);
  --ink-55:rgba(21,25,31,.55);
  --ink-40:rgba(21,25,31,.40);
  --hair:rgba(21,25,31,.10);
  --hair-2:rgba(21,25,31,.16);
  --ocre-ink:#8a6408;            /* ocre lisible sur fond clair */

  --r:12px;
  --ease:cubic-bezier(.32,.72,.3,1);
  --shadow:0 1px 2px rgba(21,25,31,.04);
  --shadow-up:0 6px 22px rgba(21,25,31,.08);
  --h:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --b:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --wrap:1220px;
  --head:64px;
  --bar:66px;                    /* barre d'appel mobile */
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--lin); color:var(--ink);
  font-family:var(--b); font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
[hidden]{display:none!important}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--h); font-weight:600; letter-spacing:-.015em; margin:0; text-wrap:balance}
h1{font-size:clamp(26px,3.2vw,36px); line-height:1.22}
h2{font-size:clamp(20px,2.2vw,25px); line-height:1.3}
h3{font-size:17px; line-height:1.35}
p{margin:0}
:focus-visible{outline:2px solid var(--ocre-ink); outline-offset:3px; border-radius:4px}
[id]{scroll-margin-top:calc(var(--head) + 20px)}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.section{padding-block:clamp(44px,5.5vw,72px)}

/* petit surtitre ocre */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:11px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ocre-ink);
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--ocre); flex:none}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--b); font-size:15px; font-weight:600; line-height:1;
  padding:15px 24px; border-radius:10px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn svg{flex:none}
.btn-ocre{background:var(--ocre); color:var(--ink)}
.btn-ocre:hover{box-shadow:0 8px 20px rgba(224,168,46,.34)}
.btn-tel{background:var(--ink); color:var(--lin); font-variant-numeric:tabular-nums}
.btn-tel:hover{box-shadow:0 8px 20px rgba(21,25,31,.24)}
.btn-tel svg{color:var(--ocre)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--hair-2)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:11px 18px; font-size:14px; border-radius:9px}

/* ==========================================================================
   EN-TÊTE — le téléphone ne quitte jamais l'écran
   ========================================================================== */
.header{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--head);
  background:rgba(245,243,238,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
}
.header .in{display:flex; align-items:center; gap:14px; height:100%}
.logo{
  font-family:var(--h); font-weight:600; font-size:19px; letter-spacing:.01em;
  margin-right:auto; display:inline-flex; align-items:center;
}
.logo span{color:var(--ocre-ink)}
.logo img{height:30px; width:auto}

.nav{display:none; gap:24px; font-size:14px; color:var(--ink-55); margin-right:6px}
.nav a{transition:color .25s var(--ease)}
.nav a:hover{color:var(--ink)}

/* ==========================================================================
   HAUT DE PAGE — 3 lignes de texte, puis les photos
   ========================================================================== */
.intro{padding-top:calc(var(--head) + 34px); padding-bottom:22px}
.intro h1{margin-top:13px; max-width:20ch}
.intro .act{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.gages{
  display:flex; flex-wrap:wrap; gap:8px 0; margin-top:20px;
  font-size:13.5px; color:var(--ink-70);
}
.gages span{display:inline-flex; align-items:center; gap:7px; padding-right:15px}
.gages span + span{padding-left:15px; border-left:1px solid var(--hair)}
.gages svg{color:var(--ocre); flex:none}

/* ==========================================================================
   MOSAÏQUE — le cœur du site
   Photos en 3/4, jamais recadrées en force.
   ========================================================================== */
/* Mur de photos en colonnes : chaque cliché garde ses proportions,
   portrait comme paysage. Aucun recadrage de force. */
.mosaique{column-count:2; column-gap:9px}
.vue{
  break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:9px;
  position:relative; display:block; width:100%; padding:0; border:0;
  background:var(--white); border-radius:var(--r); overflow:hidden;
  cursor:zoom-in; font:inherit; color:inherit; text-align:left;
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.vue:hover{transform:translateY(-3px); box-shadow:var(--shadow-up)}
.vue img{width:100%; height:auto; transition:transform .6s var(--ease)}
.vue:hover img{transform:scale(1.04)}

/* légende posée sur la photo, lisible sans écraser l'image */
.vue figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:34px 14px 13px;
  background:linear-gradient(to top, rgba(21,25,31,.86), rgba(21,25,31,0));
  color:var(--lin); font-size:13px; line-height:1.45; font-weight:500;
}
.vue .loupe{
  position:absolute; top:11px; right:11px; width:32px; height:32px; border-radius:9px;
  background:rgba(245,243,238,.92); color:var(--ink);
  display:grid; place-items:center; opacity:0; transition:opacity .25s var(--ease);
}
.vue:hover .loupe, .vue:focus-visible .loupe{opacity:1}

/* dernière tuile : invitation au devis, sans réutiliser une photo */
.vue-cta{
  aspect-ratio:4/5; background:var(--ink); color:var(--lin); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; text-align:center; padding:20px;
  border:1px solid var(--ink);
}
.vue-cta svg{color:var(--ocre); transition:transform .3s var(--ease)}
.vue-cta:hover svg{transform:rotate(90deg)}
.vue-cta b{font-family:var(--h); font-weight:600; font-size:16px}
.vue-cta span{font-size:12.5px; color:rgba(245,243,238,.62)}

.mosaique-pied{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  margin-top:14px; font-size:13.5px; color:var(--ink-55);
}
.apreciser{color:var(--ocre-ink); font-weight:600}

/* ==========================================================================
   PRESTATIONS — des noms, pas des paragraphes
   ========================================================================== */
/* étiquette de groupe : Intérieur / Extérieur */
.groupe{
  margin-top:26px; font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-40);
}
.lots{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px}

/* la rénovation globale : transversale, donc sur toute la largeur */
.lot-large{margin-top:10px; padding:18px 20px; gap:14px}
.lot-large b{display:block; font-size:16px}
.lot-large em{display:block; font-family:var(--b); font-style:normal; font-weight:400;
              font-size:13.5px; color:var(--ink-55); margin-top:1px}
.lot{
  display:flex; align-items:center; gap:12px;
  background:var(--white); border:1px solid var(--hair); border-radius:var(--r);
  padding:15px 16px; box-shadow:var(--shadow);
  font-family:var(--h); font-weight:600; font-size:15px;
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.lot:hover{transform:translateY(-2px); border-color:rgba(224,168,46,.65); box-shadow:var(--shadow-up)}
.lot .ico{color:var(--ocre-ink); flex:none; display:grid; place-items:center}
.lot .fleche{margin-left:auto; color:var(--ink-40); flex:none; transition:transform .25s var(--ease)}
.lot:hover .fleche{transform:translateX(3px)}

/* ==========================================================================
   DÉROULÉ — quatre lignes, pas une de plus
   ========================================================================== */
.etapes{list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:2px 0}
.pas{display:flex; gap:13px; align-items:baseline; padding:15px 20px 15px 0; border-top:1px solid var(--hair)}
.pas b{font-family:var(--h); font-size:12px; letter-spacing:.14em; color:var(--ocre-ink); flex:none}
.pas span{font-size:15px}

/* ==========================================================================
   APPEL — gros, impossible à rater
   ========================================================================== */
.appel{
  background:var(--ink); color:var(--lin); border-radius:var(--r);
  padding:clamp(26px,4vw,40px); text-align:center;
}
.appel .eyebrow{justify-content:center; color:var(--ocre)}
.appel .eyebrow::before{background:var(--ocre)}
.appel .num{
  display:inline-flex; align-items:center; gap:13px; margin-top:14px;
  font-family:var(--h); font-weight:600; font-variant-numeric:tabular-nums;
  font-size:clamp(28px,4.4vw,40px); letter-spacing:-.01em; color:var(--lin);
  transition:color .25s var(--ease);
}
.appel .num:hover{color:var(--ocre)}
.appel .num svg{color:var(--ocre); flex:none}
.appel p{margin-top:8px; color:rgba(245,243,238,.6); font-size:14px}

/* ==========================================================================
   FORMULAIRE — quatre champs, pas davantage
   ========================================================================== */
.devis{background:var(--white); border:1px solid var(--hair); border-radius:var(--r);
       padding:clamp(22px,3.4vw,34px); box-shadow:var(--shadow); max-width:720px; margin-inline:auto}
.devis h2{text-align:center}
.devis > p.intro-f{text-align:center; color:var(--ink-55); font-size:14px; margin-top:8px}
.champs{margin-top:22px}
.duo{display:grid; grid-template-columns:1fr; gap:0}
.champ{margin-bottom:14px}
.champ label{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
.champ input,.champ select,.champ textarea{
  width:100%; padding:13px 14px; font:inherit; font-size:15px;
  background:var(--lin); border:1px solid var(--hair-2); border-radius:9px; color:var(--ink);
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.champ textarea{min-height:92px; resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{background:var(--white); border-color:var(--ocre)}
.champ [aria-invalid="true"]{border-color:#b3261e; background:#fdf1f0}
/* piège à robots : hors écran plutôt que display:none, que certains robots repèrent */
.piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* mention d information sur les donnees, sous le bouton */
.mention-donnees{margin-top:14px; font-size:12.5px; line-height:1.5;
                 color:var(--ink-40); text-align:center}
.mention-donnees a{color:var(--ink-55); text-decoration:underline}
.mention-donnees a:hover{color:var(--ocre-ink)}
.msg{margin-top:14px; padding:13px 15px; border-radius:9px; font-size:14px; line-height:1.55}
.msg.ok{background:#eef6ec; border:1px solid #cfe4c9}
.msg.ko{background:#fdf1f0; border:1px solid #f0cfcc}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.footer{border-top:1px solid var(--hair); margin-top:clamp(40px,5vw,66px); padding-block:32px 0;
        font-size:14px; color:var(--ink-55)}
.footer .cols{display:grid; grid-template-columns:1fr; gap:24px; padding-bottom:26px}
.footer h4{font-family:var(--b); font-size:11px; font-weight:500; letter-spacing:.16em;
           text-transform:uppercase; color:var(--ink); margin:0 0 11px}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.footer a:hover{color:var(--ocre-ink)}
.footer .bar{border-top:1px solid var(--hair); padding-block:15px; font-size:12.5px; color:var(--ink-40)}

/* ==========================================================================
   BARRE D'APPEL MOBILE — toujours là
   ========================================================================== */
.rappel{
  position:fixed; inset:auto 0 0 0; z-index:70; display:grid; grid-template-columns:1fr 1fr;
  gap:8px; padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
  background:rgba(245,243,238,.97); backdrop-filter:blur(12px);
  border-top:1px solid var(--hair);
}
.rappel .btn{padding:14px 10px; font-size:15px}

/* ==========================================================================
   VISIONNEUSE
   ========================================================================== */
.lb{position:fixed; inset:0; z-index:100; display:none; background:rgba(21,25,31,.95);
    align-items:center; justify-content:center; padding:18px}
.lb[open]{display:flex}
.lb figure{margin:0; display:flex; flex-direction:column; align-items:center}
.lb img{max-width:min(880px,92vw); max-height:76vh; width:auto; border-radius:10px}
.lb figcaption{margin-top:13px; color:var(--lin); font-size:14px; text-align:center; max-width:56ch;
               line-height:1.55}
.lb button{position:absolute; background:rgba(245,243,238,.13); color:var(--lin);
  border:1px solid rgba(245,243,238,.24); width:44px; height:44px; border-radius:50%;
  cursor:pointer; display:grid; place-items:center; transition:background-color .2s var(--ease)}
.lb button:hover{background:rgba(245,243,238,.28)}
.lb .x{top:16px; right:16px}
.lb .p{left:12px; top:50%; transform:translateY(-50%)}
.lb .n{right:12px; top:50%; transform:translateY(-50%)}

/* ==========================================================================
   ÉCRANS LARGES
   ========================================================================== */
@media (min-width:760px){
  .mosaique{column-count:3; column-gap:12px}
  .vue{margin-bottom:12px}
  .duo{grid-template-columns:1fr 1fr; gap:0 14px}
  .lots{grid-template-columns:repeat(4,1fr)}
  .footer .cols{grid-template-columns:1.6fr 1fr 1fr 1fr}
}
@media (min-width:1040px){
  /* les 5 lots extérieurs tiennent sur une seule ligne */
  .lots-ext{grid-template-columns:repeat(5,1fr)}
}
@media (min-width:900px){
  .nav{display:flex}
  .rappel{display:none}
  body{padding-bottom:0}
  .etapes{grid-template-columns:repeat(4,1fr)}
  .pas{padding-right:24px}
}
@media (max-width:899px){
  body{padding-bottom:var(--bar)}
}
@media (max-width:640px){
  .eyebrow{align-items:flex-start; font-size:10.5px; letter-spacing:.13em}
  .eyebrow::before{margin-top:8px}
  .vue figcaption{font-size:11.5px; padding:26px 10px 10px}
  .lots{grid-template-columns:1fr}
  .etapes{grid-template-columns:1fr}
  .intro .act .btn{flex:1 1 100%}
  .header .nav{display:none}
}
/* ==========================================================================
   BOUTON D'APPEL DE L'EN-TETE — il sonne et il bouge

   Trois choses en meme temps, toutes les quatre secondes :
     le bouton se secoue lateralement, l icone tourne, un halo ocre s ouvre.
   L ensemble dure sept dixiemes de seconde, puis plus rien pendant trois.

   Une animation permanente fatigue et fait bon marche. Rare, elle surprend
   a chaque fois.

   Au survol tout s arrete : le visiteur a vu, il est en train de cliquer.
   La regle prefers-reduced-motion ci-dessous la neutralise pour les
   personnes que le mouvement gene.
   ========================================================================== */
@keyframes secousse{
  0%, 68%, 100%{ transform:translateX(0) }
  71%{ transform:translateX(-4px) }
  74%{ transform:translateX(4px) }
  77%{ transform:translateX(-3px) }
  80%{ transform:translateX(3px) }
  83%{ transform:translateX(-2px) }
  86%{ transform:translateX(0) }
}

@keyframes sonnerie{
  0%, 68%, 100%{ transform:rotate(0) }
  71%{ transform:rotate(-18deg) }
  74%{ transform:rotate(16deg) }
  77%{ transform:rotate(-13deg) }
  80%{ transform:rotate(10deg) }
  83%{ transform:rotate(-6deg) }
  86%{ transform:rotate(0) }
}

@keyframes halo{
  0%, 66%, 100%{ box-shadow:0 0 0 0 rgba(224,168,46,0) }
  72%{ box-shadow:0 0 0 6px rgba(224,168,46,.40) }
  90%{ box-shadow:0 0 0 16px rgba(224,168,46,0) }
}

.header .btn-tel{
  animation:secousse 4s ease-in-out infinite, halo 4s ease-out infinite;
  will-change:transform;
}
.header .btn-tel svg{
  animation:sonnerie 4s ease-in-out infinite;
  transform-origin:50% 60%;
}
.header .btn-tel:hover,
.header .btn-tel:hover svg,
.header .btn-tel:focus-visible,
.header .btn-tel:focus-visible svg{ animation:none }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition-duration:.001ms!important}
}

/* ==========================================================================
   PAGES CHANTIERS — chapo, etat vide, liens vers les autres metiers
   ========================================================================== */
.chapo{margin-top:12px; color:var(--ink-70); font-size:15px; max-width:62ch}

/* quand un metier n a pas encore de photo : on le dit, on ne bricole pas */
.vide{
  background:var(--white); border:1px solid var(--hair); border-radius:var(--r);
  padding:clamp(26px,4vw,44px); text-align:center; box-shadow:var(--shadow);
}
.vide h2{margin-bottom:10px}
.vide p{color:var(--ink-55); max-width:58ch; margin-inline:auto}
.vide .btn{margin-top:4px}

.autres{padding-bottom:clamp(30px,4vw,48px)}
.autres ul{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.autres a{
  display:inline-block; background:var(--white); border:1px solid var(--hair);
  border-radius:999px; padding:8px 16px; font-size:13.5px;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.autres a:hover{border-color:var(--ocre); transform:translateY(-2px)}

/* le bloc d appel sert aussi de bas de page sur les pages chantiers */
.appel .btn-ocre{margin-top:4px}

/* ==========================================================================
   PAGES DE TEXTE — mentions legales, confidentialite
   ========================================================================== */
.texte{max-width:820px; margin-inline:auto}
.texte .bloc{
  background:var(--white); border:1px solid var(--hair); border-radius:var(--r);
  padding:clamp(20px,3vw,30px); box-shadow:var(--shadow); margin-top:20px;
}
.texte .bloc h2{font-size:19px; margin:30px 0 10px}
.texte .bloc h2:first-child{margin-top:0}
.texte .bloc p{margin:0 0 13px}
.texte dl{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:0 0 13px; font-size:14.5px}
.texte dt{color:var(--ink-55); white-space:nowrap}
.texte dd{margin:0}
.texte .maj{color:var(--ink-40); font-size:13px; margin-top:10px}
.texte a{text-decoration:underline}
.todo{background:#fdf5e4; border-left:3px solid var(--ocre); padding:2px 7px;
      font-weight:600; color:#6b5300}
.note{border-left:3px solid var(--hair-2); padding-left:16px; color:var(--ink-55);
      font-size:14px; margin:18px 0 0}

@media (max-width:600px){
  .texte dl{grid-template-columns:1fr; gap:2px}
  .texte dt{margin-top:8px}
}