/* ------------------------------------------------------------------
   JC ELEC — feuille de style
   Structure et composants décalqués de somervilles.co.uk
   Charte : rouge du logo JC ELEC, crème, encre
------------------------------------------------------------------ */

:root{
  --ff-main:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;

  --cream-500:#fffcf5;
  --cream-700:#eceae0;
  --white:#fff;
  --encre:#1e1c1c;
  --encre-300:#383434;
  --grey-500:#4a4645;
  --grey-300:#a4a09e;
  --red:#ea0d18;
  --red-700:#c20a14;

  --border-sm:10px;
  --border-lg:20px;

  --container:1180px;
  --gutter:clamp(1.25rem,5vw,4rem);
  --gap:clamp(1.5rem,3vw,2.75rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream-500);
  color:var(--encre);
  font-family:var(--ff-main);
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{max-width:100%;display:block}

h1,h2,h3,h4{
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.028em;
  margin:0 0 1rem;
  text-wrap:balance;
}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.75rem);line-height:1.12}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.2;letter-spacing:-.018em}
p{margin:0 0 1.15rem;max-width:66ch}
a{color:inherit}

.container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.padding_y--lg{padding-block:clamp(4.5rem,9vw,8rem)}

.bg--cream{background:var(--cream-500);color:var(--encre)}
.bg--dark{background:var(--encre);color:var(--cream-500)}
.bg--dark p{color:#d9d4cd}

.border-top--rad{border-top-left-radius:var(--border-lg);border-top-right-radius:var(--border-lg)}
.border-bot--rad{border-bottom-left-radius:var(--border-lg);border-bottom-right-radius:var(--border-lg)}

.visuallyhidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.skip{
  position:absolute;top:-100px;left:1rem;z-index:200;
  background:var(--encre);color:var(--cream-500);
  padding:.75rem 1.1rem;border-radius:var(--border-sm);
}
.skip:focus{top:1rem}

/* ---------------- boutons ---------------- */

.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.95rem;font-weight:500;letter-spacing:-.01em;
  padding:.85rem 1.5rem;border-radius:999px;
  text-decoration:none;border:1px solid transparent;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn--dark{background:var(--encre);color:var(--cream-500)}
.btn--dark:hover{background:var(--red)}
.btn--light{background:var(--cream-500);color:var(--encre)}
.btn--light:hover{background:var(--red);color:var(--cream-500)}
.btn--ghost{border-color:currentColor;background:transparent}
.btn--ghost:hover{background:var(--encre);color:var(--cream-500);border-color:var(--encre)}

/* texte qui roule au survol */
.btn__label{display:inline-block;position:relative;overflow:hidden;vertical-align:middle}
.btn__label span{display:block;transition:transform .45s var(--ease)}
.btn__label span::after{
  content:attr(data-text);
  position:absolute;left:0;top:100%;width:100%;
}
.btn:hover .btn__label span,
.btn:focus-visible .btn__label span{transform:translateY(-100%)}

.btn__arrow{
  width:15px;height:11px;flex:0 0 15px;position:relative;overflow:hidden;
}
.btn__arrow::before,.btn__arrow::after{
  content:"";position:absolute;top:0;left:0;width:15px;height:11px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Cpath d='M9.4.3 8.6 1.1l3.3 3.3H0v1.2h11.9l-3.3 3.3.8.8L14.5 5z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Cpath d='M9.4.3 8.6 1.1l3.3 3.3H0v1.2h11.9l-3.3 3.3.8.8L14.5 5z'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .45s var(--ease);
}
.btn__arrow::after{transform:translateX(-120%)}
.btn:hover .btn__arrow::before{transform:translateX(120%)}
.btn:hover .btn__arrow::after{transform:translateX(0)}

/* soulignement progressif */
.underline-link{
  text-decoration:none;position:relative;display:inline-block;
}
.underline-link::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.underline-link:hover::after,.underline-link:focus-visible::after{transform:scaleX(1)}

/* ---------------- loader ---------------- */

.loader{
  position:fixed;inset:0;z-index:300;
  background:var(--cream-500);
  display:grid;place-items:center;
  transition:opacity .6s var(--ease),visibility .6s var(--ease);
}
.loader__mark{width:min(230px,52vw)}
.loader__mark img{width:100%}
.loader__bar{
  width:min(230px,52vw);height:2px;margin-top:1.25rem;
  background:rgba(30,28,28,.12);overflow:hidden;
}
.loader__bar i{
  display:block;height:100%;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:left;
  animation:load 1.1s var(--ease) forwards;
}
@keyframes load{to{transform:scaleX(1)}}
body.is-loaded .loader{opacity:0;visibility:hidden}

/* ---------------- en-tête ---------------- */

.site-header{
  position:absolute;top:0;left:0;right:0;z-index:100;
  padding-block:clamp(1rem,2vw,1.6rem);
  transition:background .5s var(--ease),padding .5s var(--ease);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.site-logo{
  display:block;background:var(--white);
  padding:.6rem .9rem;border-radius:var(--border-sm);
  line-height:0;
  box-shadow:0 2px 14px rgba(0,0,0,.08);
}
.site-logo img{width:clamp(148px,17vw,206px);height:auto}

.main-nav{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.1rem)}
.main-nav a{
  text-decoration:none;font-size:.95rem;font-weight:400;
  color:var(--cream-500);
}
.header--solid .main-nav a{color:var(--encre)}
.header--solid{background:var(--cream-500);position:fixed;box-shadow:0 1px 0 rgba(30,28,28,.08)}
.header--solid .site-logo{box-shadow:none;background:transparent;padding-left:0}

.header-tel{
  display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;font-size:.95rem;color:var(--cream-500);
}
.header--solid .header-tel{color:var(--encre)}

.burger{
  display:none;width:44px;height:44px;border:0;background:transparent;
  padding:0;cursor:pointer;color:var(--cream-500);
}
.header--solid .burger{color:var(--encre)}
.burger span{display:block;width:24px;height:1.5px;background:currentColor;margin:5px auto;transition:transform .4s var(--ease),opacity .3s}
.burger.is-active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-active span:nth-child(2){opacity:0}
.burger.is-active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:95;background:var(--cream-500);
  padding:7rem var(--gutter) 3rem;
  transform:translateY(-100%);transition:transform .6s var(--ease);
  overflow-y:auto;
}
.mobile-nav.is-open{transform:translateY(0)}
.mobile-nav ul{list-style:none;margin:0;padding:0}
.mobile-nav li{border-bottom:1px solid rgba(30,28,28,.1)}
.mobile-nav a{display:block;padding:1.05rem 0;font-size:1.3rem;text-decoration:none}
.mobile-nav__contact{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}

@media (max-width:960px){
  .main-nav,.header-tel{display:none}
  .burger{display:block}
}

/* ---------------- bannière ---------------- */

.banner{
  position:relative;overflow:hidden;
  min-height:clamp(480px,74vh,680px);
  display:flex;align-items:flex-end;
  padding-block:clamp(7rem,12vw,9rem) clamp(2.5rem,5vw,4rem);
  color:var(--cream-500);
  background:var(--encre);
}
.banner__media{position:absolute;inset:0;overflow:hidden}
.banner__media img{
  width:100%;height:118%;object-fit:cover;
  position:absolute;top:-9%;left:0;
}
.banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,18,.58) 0%,rgba(20,18,18,.3) 34%,rgba(20,18,18,.72) 68%,rgba(20,18,18,.9) 100%);
}
.banner .container{position:relative;z-index:2}
.banner__title{max-width:17ch;margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.banner__lead{
  border-top:1px solid rgba(255,252,245,.3);
  padding-top:1.4rem;
  display:grid;grid-template-columns:1fr;gap:1.25rem;
}
.banner__lead p{margin:0;max-width:52ch;font-size:1.0625rem;color:#efe9e0}
@media (min-width:860px){
  .banner__lead{grid-template-columns:1fr auto;align-items:end}
}

/* ---------------- titres animés ---------------- */

.splitTitle .word{
  display:inline-block;vertical-align:top;overflow:hidden;
  /* la boite est agrandie puis retiree en marge : le masque reste serre au
     pixel pres pour l'animation, mais les accents des capitales et les
     jambages du g, du y et du p ne sont plus rognes */
  padding:.14em .04em .2em;margin:-.14em -.04em -.2em;
}
.splitTitle .word > span{display:inline-block;will-change:transform,opacity,filter}
/* aucun masquage en CSS : si l'animation ne part pas, le texte reste lisible */

/* ---------------- services ---------------- */

.services__intro{max-width:20ch}
.services__grid{
  display:grid;gap:var(--gap);margin-top:clamp(2.5rem,5vw,4rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.services__block a{text-decoration:none;display:block}
.services__media{
  position:relative;overflow:hidden;border-radius:var(--border-sm);
  aspect-ratio:4/3;margin-bottom:1.25rem;
}
.services__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease);
}
.services__block a:hover .services__media img{transform:scale(1.045)}
.services__block a:hover{transform:translateY(-4px)}
.services__block a{transition:transform .5s var(--ease)}
.services__plus{
  position:absolute;right:1rem;bottom:1rem;width:46px;height:46px;
  border-radius:50%;background:var(--cream-500);color:var(--red);
  display:grid;place-items:center;font-size:1.5rem;line-height:1;
  transition:background .45s var(--ease),color .45s var(--ease);
}
.services__block a:hover .services__plus{background:var(--red);color:var(--cream-500)}
.services__block h3{margin-bottom:.6rem}
.services__block p{color:var(--grey-500);font-size:.98rem;margin:0}

/* ---------------- bloc atouts ---------------- */

.usp__head{max-width:46ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.usp__head .btn{margin-top:.5rem}
.usp__grid{display:grid;gap:var(--gap);grid-template-columns:repeat(3,minmax(0,1fr))}
.usp__media{
  border-radius:var(--border-sm);overflow:hidden;aspect-ratio:3/4;margin-bottom:1.35rem;
}
.usp__media img{width:100%;height:100%;object-fit:cover}
.usp__item h3{margin-bottom:.55rem}
.usp__item p{margin:0;font-size:.98rem}

/* ---------------- bloc texte ---------------- */

.textBlock .container{
  display:grid;gap:var(--gap);grid-template-columns:1fr;
}
.textBlock h2{margin:0}
.textBlock__body p:last-of-type{margin-bottom:1.6rem}
@media (min-width:860px){
  .textBlock .container{grid-template-columns:5fr 6fr;column-gap:clamp(2rem,6vw,5rem)}
}

/* ---------------- chantiers ---------------- */

.projects__grid{display:grid;gap:var(--gap);grid-template-columns:repeat(3,minmax(0,1fr))}
.projects__intro{display:flex;flex-direction:column;justify-content:flex-start}
.projects__intro h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.projects__intro .btn{margin-top:auto;align-self:flex-start}
.projects__item{display:block;text-decoration:none;transition:transform .5s var(--ease)}
.projects__item:hover{transform:translateY(-4px)}
.projects__media{
  position:relative;overflow:hidden;border-radius:var(--border-sm);
  aspect-ratio:16/10;margin-bottom:1.1rem;
}
.projects__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.projects__item:hover .projects__media img{transform:scale(1.045)}
.projects__item h3{font-size:1.1rem;margin-bottom:.5rem}
.projects__meta{list-style:none;margin:0;padding:0;font-size:.9rem;color:var(--grey-300)}
.projects__meta li+li{margin-top:.15rem}

/* ---------------- média pleine largeur ---------------- */

.full-media{position:relative;overflow:hidden;border-radius:var(--border-lg);min-height:clamp(380px,56vw,560px);display:flex;align-items:flex-end}
.full-media__wrap{padding-inline:var(--gutter)}
.full-media img{
  position:absolute;top:-9%;left:0;width:100%;height:118%;object-fit:cover;
}
.full-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,18,.15) 0%,rgba(20,18,18,.72) 100%);
}
.full-media .container{position:relative;z-index:2;padding-block:clamp(2.5rem,5vw,4rem)}
.full-media h2{color:var(--cream-500);max-width:17ch}

/* ---------------- texte + média ---------------- */

.text-media .container{
  display:grid;gap:var(--gap);grid-template-columns:1fr;align-items:center;
}
.text-media__media{border-radius:var(--border-lg);overflow:hidden;aspect-ratio:1/1}
.text-media__media img{width:100%;height:100%;object-fit:cover}
@media (min-width:860px){
  .text-media .container{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,6vw,4.5rem)}
}

/* ---------------- zone d'intervention ---------------- */

.zone__grid{
  display:grid;gap:var(--gap);grid-template-columns:1fr;margin-top:2.5rem;
}
.zone__col h3{font-size:1.05rem;margin-bottom:.75rem}
.zone__col ul{list-style:none;margin:0;padding:0;columns:2;column-gap:1.5rem}
.zone__col li{padding:.3rem 0;font-size:.98rem;color:var(--grey-500)}
@media (min-width:860px){
  .zone__grid{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,6vw,5rem)}
}

/* ---------------- FAQ ---------------- */

.faq__list{margin-top:2.5rem;border-top:1px solid rgba(30,28,28,.14)}
.faq__item{border-bottom:1px solid rgba(30,28,28,.14)}
.faq__q{
  width:100%;background:none;border:0;cursor:pointer;
  font:inherit;font-size:clamp(1.02rem,1.7vw,1.2rem);font-weight:500;
  color:inherit;text-align:left;
  padding:1.4rem 3rem 1.4rem 0;position:relative;
  letter-spacing:-.015em;
}
.faq__q::after{
  content:"";position:absolute;right:.35rem;top:50%;width:13px;height:13px;
  margin-top:-6px;
  background:
    linear-gradient(var(--red),var(--red)) center/13px 1.5px no-repeat,
    linear-gradient(var(--red),var(--red)) center/1.5px 13px no-repeat;
  transition:transform .45s var(--ease);
}
.faq__item.is-open .faq__q::after{transform:rotate(135deg)}
.faq__a{overflow:hidden;height:0;transition:height .5s var(--ease)}
.faq__a p{padding-bottom:1.4rem;margin:0;color:var(--grey-500)}

/* ---------------- pied de page ---------------- */

.site-footer{padding-block:clamp(3.5rem,7vw,5.5rem) 2rem}
.site-footer h2{max-width:16ch;margin-bottom:2.5rem}
.site-footer h2 a{color:var(--red);text-decoration:none}
.footer__top{
  display:grid;gap:var(--gap);grid-template-columns:1fr;
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
@media (min-width:860px){
  .footer__top{grid-template-columns:1.25fr 1fr 1fr}
}
.footer__logo{
  display:inline-block;background:var(--white);padding:.6rem .9rem;
  border-radius:var(--border-sm);line-height:0;margin-bottom:1.4rem;
}
.footer__logo img{width:190px}
.footer__col h3{font-size:.82rem;letter-spacing:.1em;text-transform:none;color:var(--grey-300);font-weight:400;margin-bottom:1rem}
.footer__col ul{list-style:none;margin:0;padding:0}
.footer__col li{margin-bottom:.55rem}
.footer__col a{text-decoration:none;font-size:.98rem}
.footer__col address{font-style:normal;font-size:.98rem;color:#d9d4cd;line-height:1.75}

.footer__base{
  border-top:1px solid rgba(255,252,245,.16);
  padding-top:1.75rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;
  font-size:.86rem;color:var(--grey-300);
}
.footer__base a{text-decoration:none}
.footer__base a:hover{color:var(--cream-500)}
.footer__quali{display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:1.5rem;font-size:.86rem;color:var(--grey-300)}

/* ---------------- trait de fin de section ---------------- */

.rule{height:1px;background:rgba(30,28,28,.12);border:0;margin:0}

/* ---------------- responsive ---------------- */

@media (max-width:960px){
  .services__grid,.usp__grid,.projects__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .projects__intro{grid-column:1 / -1}
}
@media (max-width:620px){
  .services__grid,.usp__grid,.projects__grid{grid-template-columns:minmax(0,1fr)}
  .zone__col ul{columns:1}
  .banner{min-height:clamp(440px,78vh,560px)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js-anim .splitTitle .word > span,.js-anim .reveal{opacity:1;transform:none;filter:none}
}

/* ---------------- parallaxe : l'image doit déborder de son cadre ---------------- */
[data-parallax]{position:relative;overflow:hidden}
.text-media__media[data-parallax] img{
  position:absolute;top:-7%;left:0;width:100%;height:114%;object-fit:cover;
}

/* ================================================================
   Téléphone, WhatsApp, galerie : ajouts de la révision du 05/10
================================================================ */

/* ---------------- téléphone et WhatsApp dans l'en-tête ---------------- */

.header-actions{display:flex;align-items:center;gap:.6rem}

.btn-tel{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--red);color:var(--cream-500);
  font-size:1rem;font-weight:500;letter-spacing:-.01em;
  padding:.72rem 1.15rem;border-radius:999px;text-decoration:none;
  white-space:nowrap;
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.btn-tel:hover{background:var(--red-700);transform:translateY(-2px)}

.btn-wa{
  display:inline-grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:#25d366;color:#fff;text-decoration:none;
  transition:transform .4s var(--ease),background .4s var(--ease);
}
.btn-wa:hover{background:#1da851;transform:translateY(-2px)}

.btn--red{background:var(--red);color:var(--cream-500)}
.btn--red:hover{background:var(--red-700);color:var(--cream-500)}
.btn--big{font-size:1.05rem;padding:1rem 1.6rem}

.banner__cta,.full-media__cta,.footer__cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.footer__cta{margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.full-media__cta{margin-top:.5rem}

@media (max-width:1180px){
  .main-nav{gap:1rem}
  .main-nav a{font-size:.9rem}
}
@media (max-width:1060px){
  .main-nav{display:none}
  .burger{display:block}
}
@media (max-width:560px){
  .header-actions .btn-tel{display:none}
}

/* ---------------- barre d'appel permanente sur mobile ---------------- */

.barre-mobile{display:none}
@media (max-width:860px){
  .barre-mobile{
    display:grid;grid-template-columns:1fr 1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:var(--encre);
    box-shadow:0 -2px 18px rgba(0,0,0,.18);
  }
  .barre-mobile a{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:1rem .5rem;text-decoration:none;font-size:1rem;font-weight:500;
  }
  .barre-mobile__tel{background:var(--red);color:var(--cream-500)}
  .barre-mobile__wa{background:#25d366;color:#fff}
  body{padding-bottom:58px}
  .site-footer{padding-bottom:1rem}
}

/* ---------------- galerie des réalisations ---------------- */

.galerie__intro{margin-bottom:clamp(2rem,4vw,3rem)}
.galerie{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.galerie__item{
  padding:0;border:0;background:none;cursor:zoom-in;display:block;
  border-radius:var(--border-sm);overflow:hidden;position:relative;
  aspect-ratio:16/10;
  transition:transform .5s var(--ease);
}
.galerie__item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.galerie__item:hover{transform:translateY(-4px)}
.galerie__item:hover img{transform:scale(1.05)}
.galerie__item:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.galerie__pied{margin-top:clamp(2.5rem,5vw,3.5rem)}

@media (max-width:860px){.galerie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.galerie{grid-template-columns:minmax(0,1fr)}}

/* ---------------- agrandissement au centre de l'écran ---------------- */

.zoom{
  position:fixed;inset:0;z-index:250;
  display:grid;place-items:center;
  background:rgba(18,16,16,.94);
  padding:clamp(1.5rem,5vw,4rem);
  opacity:0;transition:opacity .4s var(--ease);
}
.zoom.is-open{opacity:1}
.zoom[hidden]{display:none}
.zoom__fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}
.zoom__fig img{
  max-width:100%;max-height:78vh;width:auto;height:auto;
  border-radius:var(--border-sm);
  transform:scale(.92);transition:transform .45s var(--ease);
}
.zoom.is-open .zoom__fig img{transform:scale(1)}
.zoom__fig figcaption{color:#d9d4cd;font-size:.95rem;text-align:center;max-width:62ch}
.zoom__fermer{
  position:absolute;top:1.25rem;right:1.25rem;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,252,245,.12);
}
.zoom__fermer::before,.zoom__fermer::after{
  content:"";position:absolute;left:14px;top:22px;width:18px;height:1.5px;background:var(--cream-500);
}
.zoom__fermer::before{transform:rotate(45deg)}
.zoom__fermer::after{transform:rotate(-45deg)}
.zoom__fermer:hover{background:var(--red)}

/* ---------------- animations supplémentaires ---------------- */

/* les paragraphes se dévoilent ligne par ligne, état de départ posé par GSAP */
.lineReveal .ligne{display:block;overflow:hidden;padding:.14em .04em .2em;margin:-.14em -.04em -.2em}
.lineReveal .ligne > span{display:block}

/* ================================================================
   Bannière : structure reprise du hero VAUTRIN Électricité
================================================================ */

.banner{min-height:clamp(540px,80vh,740px)}
.banner__title{max-width:19ch;margin-bottom:1.4rem}
.banner__title .hl{color:var(--red)}

.banner__desc{
  max-width:60ch;margin-bottom:2rem;
  font-size:clamp(1.02rem,1.5vw,1.18rem);
  color:#efe9e0;line-height:1.55;
}

.banner__wa{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--cream-500);text-decoration:none;
  font-size:1rem;padding:.5rem 0;
  transition:color .4s var(--ease);
}
.banner__wa svg{color:#25d366}
.banner__wa:hover{color:#25d366}

.banner__trust{
  list-style:none;margin:2.25rem 0 0;padding:1.4rem 0 0;
  border-top:1px solid rgba(255,252,245,.25);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;
  font-size:.95rem;color:#e2dcd3;
}
.banner__trust li{display:flex;align-items:center;gap:.5rem}
.banner__trust li::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--red);flex:0 0 6px;
}

@media (max-width:620px){
  .banner{min-height:clamp(560px,88vh,720px)}
  .banner__trust{gap:.5rem 1.25rem;font-size:.88rem}
  .banner__cta{width:100%}
  .banner__cta .btn{flex:1 1 auto;justify-content:center}
}

/* le dégradé du hero pèse à gauche, pour garder l'ambiance de la photo à droite */
.banner::after{
  background:
    linear-gradient(100deg,rgba(16,13,12,.9) 0%,rgba(16,13,12,.72) 34%,rgba(16,13,12,.3) 62%,rgba(16,13,12,.12) 100%),
    linear-gradient(180deg,rgba(16,13,12,.5) 0%,rgba(16,13,12,0) 28%,rgba(16,13,12,.45) 100%);
}
@media (max-width:860px){
  .banner::after{
    background:linear-gradient(180deg,rgba(16,13,12,.72) 0%,rgba(16,13,12,.5) 40%,rgba(16,13,12,.86) 100%);
  }
}

/* ================================================================
   Revue d'ergonomie du 05/10 : contraste, affordances, repères
================================================================ */

:root{
  --red-cta:#d40c15;        /* rouge de remplissage, contraste 5,3:1 sur le crème */
  --sable:#f2efe6;
}

/* contraste des boutons rouges porté au niveau AA */
.btn-tel,.btn--red,.barre-mobile__tel{background:var(--red-cta)}
.btn-tel:hover,.btn--red:hover{background:var(--red-700)}

.bg--sable{background:var(--sable);color:var(--encre)}

/* indicateur de défilement sous la bannière */
.banner__scroll{
  position:absolute;left:50%;bottom:1.5rem;z-index:3;
  width:26px;height:42px;margin-left:-13px;
  border:1px solid rgba(255,252,245,.55);border-radius:14px;
  display:grid;place-items:start center;padding-top:7px;
}
.banner__scroll span{
  display:block;width:3px;height:7px;border-radius:2px;background:var(--cream-500);
  animation:descend 1.9s var(--ease) infinite;
}
@keyframes descend{0%{transform:translateY(0);opacity:1}70%{transform:translateY(16px);opacity:0}100%{opacity:0}}
@media (max-width:860px){.banner__scroll{display:none}}

/* loupe sur les photos de la galerie */
.galerie__loupe{
  position:absolute;right:.85rem;bottom:.85rem;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,252,245,.92);color:var(--red-cta);
  display:grid;place-items:center;font-size:1.3rem;line-height:1;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.galerie__item:hover .galerie__loupe,
.galerie__item:focus-visible .galerie__loupe{opacity:1;transform:translateY(0)}

/* cibles tactiles du pied de page */
.footer__base a,.footer__base span{display:inline-flex;align-items:center;min-height:28px}

/* retour en haut */
.haut{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:80;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--encre);color:var(--cream-500);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,background .4s var(--ease);
}
.haut.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.haut:hover{background:var(--red-cta)}
@media (max-width:860px){.haut{bottom:72px}}

/* repère de focus homogène */
a:focus-visible,button:focus-visible{outline:2px solid var(--red-cta);outline-offset:3px;border-radius:4px}
.bg--dark a:focus-visible,.bg--dark button:focus-visible,.banner a:focus-visible{outline-color:var(--cream-500)}

/* la bannière doit tenir sur un petit écran sans devenir un mur */
@media (max-width:620px){
  .banner{min-height:0;padding-block:7.5rem 2.5rem}
  .banner__title{margin-bottom:1rem}
  .banner__desc{font-size:1rem;margin-bottom:1.5rem;line-height:1.5}
  .banner__trust{
    display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1rem;
    margin-top:1.75rem;padding-top:1.1rem;font-size:.82rem;
  }
  .banner__cta{gap:.6rem}
  .banner__cta .btn--big{font-size:1rem;padding:.9rem 1.2rem}
}

/* le bandeau sombre se remplit : titre à gauche, texte à droite */
@media (min-width:900px){
  .usp__head{
    max-width:none;display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(2rem,6vw,5rem);align-items:start;
  }
  .usp__head h2{margin:0;max-width:16ch}
  .usp__head--texte p{margin-bottom:1.6rem}
}

/* bloc borne de recharge : image et texte côte à côte */
.text-media--inverse .text-media__media{aspect-ratio:1/1}
.text-media--inverse .textBlock__body p:last-of-type{margin-bottom:1.6rem}
.text-media--inverse h2{margin-bottom:1.25rem}

/* ================================================================
   Les blocs de couleur deviennent des cartes posées sur le crème :
   coins arrondis sur les quatre angles, marge extérieure, respiration
   entre chaque bloc.
================================================================ */

:root{
  --marge-bloc:clamp(.75rem,1.6vw,1.5rem);
  --espace-bloc:clamp(1.25rem,2.6vw,2.25rem);
}

section.bg--dark,
section.bg--sable,
.full-media,
.site-footer{
  border-radius:var(--border-lg);
  overflow:hidden;
}

section.bg--dark,
section.bg--sable{
  margin-inline:var(--marge-bloc);
  margin-block:var(--espace-bloc);
}

/* le bandeau photo pleine largeur s'aligne sur les autres blocs */
.full-media__wrap{
  padding-inline:var(--marge-bloc);
  margin-block:var(--espace-bloc);
}

.site-footer{
  margin:var(--espace-bloc) var(--marge-bloc);
}

/* la bannière garde le bord haut franc, le logo et le menu sont posés dessus */
.banner{
  margin:0 var(--marge-bloc) var(--espace-bloc);
  border-radius:0 0 var(--border-lg) var(--border-lg);
}

/* les sections claires n'ont plus besoin de leur marge haute en double */
section.bg--cream + section.bg--dark{margin-top:0}

/* la marge basse du pied de page ne doit pas s'échapper du corps */
body{padding-bottom:var(--espace-bloc)}
.site-footer{margin-bottom:0}
@media (max-width:860px){
  body{padding-bottom:calc(58px + var(--espace-bloc))}
}

/* ================================================================
   Orientation des photos : la galerie est en paysage 4/3, les blocs
   d'atouts en portrait 3/4, le portrait en 4/5. Plus aucune photo
   n'est recadrée contre son sens d'origine.
================================================================ */

.galerie__item{aspect-ratio:3/4}
.text-media:not(.text-media--inverse) .text-media__media{aspect-ratio:4/5}
.full-media{min-height:clamp(380px,48vw,620px)}

/* en-tête : le menu tient sur une seule ligne */
.main-nav a{white-space:nowrap}
.site-header .container{gap:clamp(.75rem,1.5vw,1.5rem)}
.main-nav{gap:clamp(.85rem,1.6vw,1.6rem)}
@media (max-width:1320px){
  .main-nav a{font-size:.88rem}
  .site-logo img{width:clamp(140px,13vw,172px)}
  .btn-tel{font-size:.94rem;padding:.65rem 1rem}
}
@media (max-width:1180px){
  .main-nav{display:none}
  .burger{display:block}
}

/* ================================================================
   Pages de prestation : structure reprise de MSR Second Œuvre
================================================================ */

.tete{
  position:relative;overflow:hidden;
  min-height:clamp(440px,62vh,620px);
  display:flex;align-items:flex-end;
  padding-block:clamp(7rem,12vw,9rem) clamp(2.5rem,5vw,4rem);
  color:var(--cream-500);background:var(--encre);
  margin:0 var(--marge-bloc) var(--espace-bloc);
  border-radius:0 0 var(--border-lg) var(--border-lg);
}
.tete__media{position:absolute;inset:0;overflow:hidden}
.tete__media img{width:100%;height:118%;object-fit:cover;position:absolute;top:-9%;left:0}
.tete::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(16,13,12,.9) 0%,rgba(16,13,12,.74) 36%,rgba(16,13,12,.34) 64%,rgba(16,13,12,.16) 100%),
    linear-gradient(180deg,rgba(16,13,12,.5) 0%,rgba(16,13,12,0) 30%,rgba(16,13,12,.5) 100%);
}
.tete .container{position:relative;z-index:2}
.tete__titre{max-width:17ch;margin-bottom:1.4rem}
.tete__titre .hl{color:var(--red)}
.tete__desc{max-width:58ch;margin-bottom:2rem;font-size:clamp(1.02rem,1.5vw,1.15rem);color:#efe9e0;line-height:1.55}

.fil{font-size:.9rem;color:#cfc8bf;margin-bottom:1.5rem}
.fil a{text-decoration:none}
.fil span[aria-hidden]{margin:0 .4rem;opacity:.6}

@media (max-width:620px){
  .tete{min-height:0;padding-block:7.5rem 2.5rem}
}

/* trois ou quatre cartes de texte */
.trio{
  display:grid;gap:var(--gap);margin-top:clamp(2.5rem,5vw,3.5rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.trio--quatre{grid-template-columns:repeat(4,minmax(0,1fr))}
.trio__item{border-top:1px solid rgba(30,28,28,.16);padding-top:1.25rem}
.trio__item h3{margin-bottom:.6rem}
.trio__item p{margin:0;color:var(--grey-500);font-size:.98rem}
.bg--dark .trio__item{border-top-color:rgba(255,252,245,.2)}
@media (max-width:960px){.trio,.trio--quatre{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.trio,.trio--quatre{grid-template-columns:minmax(0,1fr)}}

/* les quatre temps du chantier */
.etapes{
  list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;
  display:grid;gap:var(--gap);grid-template-columns:repeat(4,minmax(0,1fr));
  counter-reset:etape;
}
.etapes li{border-top:1px solid rgba(255,252,245,.2);padding-top:1.25rem}
.etapes h3{margin-bottom:.6rem}
.etapes p{margin:0;font-size:.98rem}
@media (max-width:960px){.etapes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.etapes{grid-template-columns:minmax(0,1fr)}}

/* deux engagements */
.duo{display:grid;gap:var(--gap);grid-template-columns:1fr 1fr;margin-top:clamp(2rem,4vw,3rem)}
.duo h3{margin-bottom:.7rem}
.duo p{margin:0;color:var(--grey-500)}
@media (max-width:760px){.duo{grid-template-columns:minmax(0,1fr)}}

/* galerie à trois photos sur les pages de prestation */
.galerie--trois{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.galerie--trois{grid-template-columns:minmax(0,1fr)}}

/* communes desservies */
.villes{
  list-style:none;margin:2rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;font-size:1rem;color:var(--grey-500);
}
.villes li{display:flex;align-items:center;gap:.5rem}
.villes li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:0 0 6px}

/* les autres prestations */
.suite{display:grid;gap:var(--gap);grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2.5rem}
.suite__item{
  display:block;text-decoration:none;
  border-top:1px solid rgba(30,28,28,.16);padding-top:1.25rem;
  transition:transform .5s var(--ease);
}
.suite__item:hover{transform:translateY(-4px)}
.suite__item h3{margin-bottom:.5rem}
.suite__item p{margin:0 0 .9rem;color:var(--grey-500);font-size:.95rem}
.suite__item .btn__arrow{color:var(--red)}
@media (max-width:760px){.suite{grid-template-columns:minmax(0,1fr)}}

/* bande de devis en bas de page */
.devis p{max-width:56ch;margin-bottom:2rem}

/* tableau comparatif : lisible, et lu proprement par les moteurs */
.table-wrap{overflow-x:auto;margin-top:clamp(2rem,4vw,2.75rem);border:1px solid rgba(30,28,28,.14);border-radius:var(--border-sm)}
.tableau{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
.tableau th{
  text-align:left;font-weight:500;padding:.95rem 1.1rem;
  background:rgba(30,28,28,.05);border-bottom:1px solid rgba(30,28,28,.14);
}
.tableau td{padding:.9rem 1.1rem;border-bottom:1px solid rgba(30,28,28,.1);vertical-align:top}
.tableau tbody tr:last-child td{border-bottom:0}
.tableau td:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums}
.tableau td:nth-child(3){color:var(--grey-500)}

/* listes d'étapes à trois colonnes, et variante sur fond clair */
.etapes--trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.etapes--clair li{border-top-color:rgba(30,28,28,.16)}
.etapes--clair p{color:var(--grey-500)}
@media (max-width:960px){.etapes--trois{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.etapes--trois{grid-template-columns:minmax(0,1fr)}}

/* ================================================================
   Correction : le logo du pied de page était étiré
================================================================ */
.footer__logo img,.loader__mark img{height:auto}

/* ================================================================
   Parcours en étapes : un fil, un repère, une icône.
   Pas de numéro, pas de pastille chiffrée.
================================================================ */

.parcours{
  list-style:none;margin:clamp(2.75rem,5vw,3.75rem) 0 0;padding:0;
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(4,minmax(0,1fr));
  position:relative;
}
.parcours--trois{grid-template-columns:repeat(3,minmax(0,1fr))}

.parcours li{position:relative;padding-top:4.25rem}

/* le fil qui relie les repères */
.parcours li::before{
  content:"";position:absolute;top:26px;left:0;right:calc(-1 * var(--gap));
  height:1px;background:rgba(30,28,28,.18);
}
.parcours li:last-child::before{right:0}
.bg--dark .parcours li::before{background:rgba(255,252,245,.22)}

.parcours__marque{
  position:absolute;top:0;left:0;z-index:1;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--cream-500);color:var(--red-cta);
  border:1px solid rgba(30,28,28,.18);
  transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease);
}
.bg--dark .parcours__marque{
  background:var(--encre);color:var(--red);border-color:rgba(255,252,245,.28);
}
.bg--sable .parcours__marque{background:var(--sable)}

.parcours li:hover .parcours__marque{background:var(--red-cta);color:var(--cream-500);border-color:var(--red-cta);transform:translateY(-3px)}
.bg--dark .parcours li:hover .parcours__marque{background:var(--red);color:var(--cream-500);border-color:var(--red)}

.parcours h3{margin-bottom:.6rem}
.parcours p{margin:0;font-size:.98rem}
.bg--cream .parcours p,.bg--sable .parcours p{color:var(--grey-500)}

@media (max-width:1060px){
  .parcours,.parcours--trois{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .parcours,.parcours--trois{grid-template-columns:minmax(0,1fr);gap:2rem}
  .parcours li{padding-top:0;padding-left:4.5rem;min-height:52px}
  .parcours li::before{
    top:0;bottom:calc(-1 * 2rem);left:26px;right:auto;
    width:1px;height:auto;
  }
  .parcours li:last-child::before{bottom:0;display:none}
}

/* ================================================================
   Contact, formulaire et pages légales
================================================================ */

.contact-grille{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media (min-width:900px){.contact-grille{grid-template-columns:1.35fr 1fr}}

.contact-infos{border-top:1px solid rgba(30,28,28,.16);padding-top:1.75rem}
@media (min-width:900px){.contact-infos{border-top:0;border-left:1px solid rgba(30,28,28,.16);padding:0 0 0 clamp(2rem,4vw,3rem)}}
.contact-infos h2{font-size:clamp(1.3rem,2.2vw,1.6rem)}
.contact-infos h3{font-size:1.05rem;margin-bottom:.5rem}
.contact-infos address{font-style:normal;line-height:1.75;color:var(--grey-500)}
.contact-tel a{font-size:clamp(1.35rem,2.6vw,1.75rem);font-weight:500;letter-spacing:-.02em}

.form{margin-top:2rem;max-width:none}
.form__ligne{display:grid;gap:1rem 1.25rem;grid-template-columns:1fr}
@media (min-width:620px){.form__ligne{grid-template-columns:1fr 1fr}}
.form__champ{margin:0 0 1.25rem}
.form__champ label{display:block;margin-bottom:.45rem;font-size:.95rem}
.form__champ label span{color:var(--red-cta)}
.form input[type=text],.form input[type=tel],.form input[type=email],.form select,.form textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--encre);
  background:var(--white);border:1px solid rgba(30,28,28,.22);
  border-radius:var(--border-sm);padding:.8rem .95rem;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.form input[type=file]{font:inherit;font-size:.95rem}
.form textarea{resize:vertical;min-height:150px}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:0;border-color:var(--red-cta);box-shadow:0 0 0 3px rgba(212,12,21,.14);
}
.form__piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__consentement{margin:0 0 1.75rem}
.form__consentement label{display:flex;gap:.7rem;align-items:flex-start;font-size:.93rem;color:var(--grey-500)}
.form__consentement input{margin-top:.25rem;width:17px;height:17px;accent-color:var(--red-cta);flex:0 0 17px}
.form__envoi{border:0;cursor:pointer;font-family:inherit}
.form__retour{margin:1rem 0 0;font-size:.95rem;min-height:1.4em}
.form__retour.ok{color:#0f7b5a}
.form__retour.ko{color:var(--red-700)}

.texte-legal{max-width:76ch}
.texte-legal h2{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-top:2.75rem}
.texte-legal h2:first-child{margin-top:0}
.texte-legal p{color:var(--grey-500);max-width:none}

/* ================================================================
   Ajouts du 06/10/2026, demande client :
   carte de la zone, partenaires, références, conseils
================================================================ */

/* ---------------- carte de la zone ---------------- */

.zone-carte__grille{
  display:grid;gap:var(--gap);align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
}
@media (max-width:900px){.zone-carte__grille{grid-template-columns:minmax(0,1fr)}}

.carte{position:relative;border-radius:var(--border-lg);overflow:hidden;line-height:0}
.carte img{width:100%;height:auto;display:block}

/* le point EST la coordonnée : largeur nulle, l'étiquette se place autour.
   Sans cela un decalage de l'etiquette deplace aussi la pastille. */
.carte__point{position:absolute;width:0;height:0;text-decoration:none}
.carte__pastille{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:7px;height:7px;border-radius:50%;
  background:var(--cream-500);box-shadow:0 0 0 3px rgba(30,28,28,.55);
  transition:transform .35s var(--ease);
}
.carte__nom{
  position:absolute;white-space:nowrap;line-height:1.2;
  font-size:.82rem;color:var(--cream-500);
  background:rgba(30,28,28,.78);padding:.18rem .45rem;border-radius:5px;
  transition:background .35s var(--ease);
}
.carte__point--droite .carte__nom{left:11px;top:0;transform:translateY(-50%)}
.carte__point--gauche .carte__nom{right:11px;top:0;transform:translateY(-50%)}
.carte__point--haut   .carte__nom{bottom:11px;left:0;transform:translateX(-50%)}
.carte__point--bas    .carte__nom{top:11px;left:0;transform:translateX(-50%)}

a.carte__point:hover .carte__nom{background:var(--red)}
a.carte__point:hover .carte__pastille{transform:translate(-50%,-50%) scale(1.5)}
a.carte__point:focus-visible .carte__nom{outline:2px solid var(--cream-500);outline-offset:2px}

.carte__point--base .carte__pastille{
  width:11px;height:11px;background:var(--red);
  box-shadow:0 0 0 4px rgba(234,13,24,.3);
}
.carte__point--base .carte__nom{background:var(--red);font-weight:500;font-size:.88rem}

/* sous 760 px la carte devient trop petite pour sept etiquettes :
   on garde les pastilles et l'atelier, les communes restent listees dessous */
@media (max-width:760px){
  .carte__nom{display:none}
  .carte__point--base .carte__nom{display:block}
}

.zone-carte__texte .villes{margin-top:1.75rem}

/* ---------------- partenaires et références ---------------- */

.logos{
  list-style:none;margin:2.5rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(2rem,5vw,4.5rem);
}
.logos__item{line-height:0}
/* hauteurs reglees logo par logo : un bloc empile et un mot long n'ont pas
   le meme poids optique a hauteur egale */
.logos__item img{width:auto;display:block;opacity:.88;transition:opacity .4s var(--ease)}
.logos__item img:hover{opacity:1}
.logos__item--schneider img{height:clamp(31px,4.2vw,44px)}
.logos__item--rexel img{height:clamp(24px,3.2vw,34px)}
.logos__item--sonepar img{height:clamp(21px,2.8vw,30px)}
.logos__item--yesss img{height:clamp(29px,3.9vw,42px)}
.logos__item--totalenergies img{height:clamp(24px,3.1vw,33px)}
.partenaires .rule{margin:clamp(2.75rem,5vw,4rem) 0}
.partenaires__sous{
  font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.2;
  letter-spacing:-.018em;margin:0 0 .5rem;
}
.partenaires__ref{
  display:grid;gap:var(--gap);align-items:center;margin-top:1.5rem;
  grid-template-columns:minmax(0,.55fr) minmax(0,1fr);
}
.partenaires__ref p{margin:0;color:var(--grey-500);max-width:62ch}
.logos--ref{margin:0}
.logos--ref .logos__item--totalenergies img{height:clamp(28px,3.8vw,40px)}
@media (max-width:760px){.partenaires__ref{grid-template-columns:minmax(0,1fr)}}

/* ---------------- pied de page, quatrième colonne ---------------- */

@media (min-width:860px){
  .footer__top{grid-template-columns:1.2fr .9fr 1.1fr .9fr}
}
@media (min-width:860px) and (max-width:1100px){
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------------- articles de conseils ---------------- */

.tete__meta{
  font-size:.9rem;color:var(--grey-300);margin:-1rem 0 2rem;
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.article{max-width:74ch}
.article h2{font-size:clamp(1.4rem,2.6vw,1.95rem);margin-top:clamp(2.5rem,4.5vw,3.5rem)}
.article h2:first-child{margin-top:0}
.article p{color:var(--grey-500);max-width:none}
.article__liste{
  list-style:none;margin:1.5rem 0 0;padding:0;
  display:grid;gap:1rem;
}
.article__liste li{
  position:relative;padding-left:1.6rem;color:var(--grey-500);
}
.article__liste li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--red);
}
.article__liste strong{font-weight:500;color:var(--encre)}
.article__liste + p,.article__liste + h2{margin-top:clamp(1.6rem,3vw,2.2rem)}
.article .table-wrap{margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.article__apres{margin-top:1.5rem}

/* ---------------- liste des conseils ---------------- */

.billets{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){.billets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.billets{grid-template-columns:minmax(0,1fr)}}

/* les cartes s'etirent et le lien de bas de carte s'aligne d'une carte a
   l'autre, meme quand les chapos ne font pas le meme nombre de lignes */
.billet{display:flex}
.billet__lien{
  display:flex;flex-direction:column;width:100%;
  text-decoration:none;color:inherit;
  transition:transform .5s var(--ease);
}
.billet__suite{margin-top:auto}
.billet__lien:hover{transform:translateY(-4px)}
.billet__media{
  display:block;position:relative;overflow:hidden;
  border-radius:var(--border-sm);aspect-ratio:4/3;margin-bottom:1.25rem;
}
.billet__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.billet__lien:hover .billet__media img{transform:scale(1.04)}
.billet__meta{
  display:block;font-size:.82rem;color:var(--grey-300);margin-bottom:.5rem;
}
.billet__titre{font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.2;letter-spacing:-.018em;margin:0 0 .6rem}
.billet__chapo{color:var(--grey-500);font-size:.95rem;margin:0 0 1.1rem}
.billet__suite{display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--red)}
.billet__lien:hover .billet__suite{text-decoration:underline;text-underline-offset:4px}

/* ---------------- sceau de la garantie décennale ---------------- */
/* Aucun logo officiel n'existe pour la décennale : ce sceau est dessiné dans
   le langage du site et n'imite aucun organisme certificateur. */
.banner__sceau{
  display:inline-flex;align-items:center;gap:.9rem;
  margin:clamp(1.5rem,3vw,2.25rem) 0 0;padding:.7rem 1.1rem .7rem .8rem;
  border:1px solid rgba(255,252,245,.28);border-radius:var(--border-sm);
  background:rgba(20,18,18,.3);backdrop-filter:blur(2px);
  max-width:34rem;color:var(--cream-500);
}
.sceau__ecu{position:relative;flex:0 0 44px;width:44px;height:48px;display:block;color:var(--red)}
.sceau__ecu svg{display:block}
.sceau__ans{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;
  font-size:1.05rem;font-weight:500;line-height:1;color:var(--cream-500);
  padding-bottom:3px;
}
.sceau__ans small{font-size:.5rem;letter-spacing:.08em;opacity:.85}
.sceau__txt{display:block;font-size:.88rem;line-height:1.45;color:#efe9e0}
.sceau__txt strong{display:block;font-weight:500;color:var(--cream-500);font-size:.96rem}
@media (max-width:620px){
  .banner__sceau{gap:.75rem;padding:.6rem .85rem}
  .sceau__txt{font-size:.82rem}
}


/* ---------------- curseur tournevis ---------------- */
/* Demande John du 09/10. Uniquement sur les pointeurs fins : au doigt le
   curseur n'existe pas, et les champs de saisie gardent le curseur systeme
   pour qu'on sache ou on ecrit. Tout se retire en supprimant ce bloc. */
@media (hover:hover) and (pointer:fine){
  html{cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB/UlEQVR4AcTWzUoCURQH8KMFBb3ClG372ISrgiKfocgg2hQWQa8gKb6F0iqCjHoGRalAcNxobVPnIQpCO/+DV8fJ/JiZqzL/uXe+7vl5dUaDNOOXAFYNY3/FMBKzsAigU/iGEW3OVCEC+LSsfAeBZqoQAaBqgEgQ4fAWxWLnxK+pQOyAJBeVJRY7o1LppQ+C74kc9HnVBeBjwCyUyxUyzYqUMU1TWqxaRDkdiC4ARRggs5DJ3NLV1TUBcxw9pFQqjsOkA9EHsM+CKh6NHtDmxro2RB8Ab1PNAvobm2toJLoQfwCYBd4ZQdV4PEXV2ju6Eh0IriVj962miRgIgGYYolb9wCmSNtGNdFyu/gVgvEGIbPaZHrJPFAot097uDjFgP2QYOZzvJsFRFzkRqvjpyREDtjneECMBANoR2A6tLKOR1BtNad3OxFgAVACiYVkBvk3zheIrFYpvdHf/SPV6ky6+WxI3iLEBQCB1y4ooRLf4FwMQhkyKmBhgR6Bvz4ULhCsAiqqZSC8EKb3YG2ZSRO9KjDph/EB4AsDrFeEZ4BXhC8ALwjeAW4SvgHER9r92vgOGIcI//JjCCbZoAWB8591Rng8Qnhk4hsc6WkQbAIMDwW0ShS+X5ggIbHO6i1YAqvAPWIKLRFSwjf0qvF919bWYchVnFe0AZ0Hn9i8AAAD//zRe5d0AAAAGSURBVAMAZV4+UPYWJWwAAAAASUVORK5CYII=") 2 2, auto}
  html{cursor:image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB/UlEQVR4AcTWzUoCURQH8KMFBb3ClG372ISrgiKfocgg2hQWQa8gKb6F0iqCjHoGRalAcNxobVPnIQpCO/+DV8fJ/JiZqzL/uXe+7vl5dUaDNOOXAFYNY3/FMBKzsAigU/iGEW3OVCEC+LSsfAeBZqoQAaBqgEgQ4fAWxWLnxK+pQOyAJBeVJRY7o1LppQ+C74kc9HnVBeBjwCyUyxUyzYqUMU1TWqxaRDkdiC4ARRggs5DJ3NLV1TUBcxw9pFQqjsOkA9EHsM+CKh6NHtDmxro2RB8Ab1PNAvobm2toJLoQfwCYBd4ZQdV4PEXV2ju6Eh0IriVj962miRgIgGYYolb9wCmSNtGNdFyu/gVgvEGIbPaZHrJPFAot097uDjFgP2QYOZzvJsFRFzkRqvjpyREDtjneECMBANoR2A6tLKOR1BtNad3OxFgAVACiYVkBvk3zheIrFYpvdHf/SPV6ky6+WxI3iLEBQCB1y4ooRLf4FwMQhkyKmBhgR6Bvz4ULhCsAiqqZSC8EKb3YG2ZSRO9KjDph/EB4AsDrFeEZ4BXhC8ALwjeAW4SvgHER9r92vgOGIcI//JjCCbZoAWB8591Rng8Qnhk4hsc6WkQbAIMDwW0ShS+X5ggIbHO6i1YAqvAPWIKLRFSwjf0qvF919bWYchVnFe0AZ0Hn9i8AAAD//zRe5d0AAAAGSURBVAMAZV4+UPYWJWwAAAAASUVORK5CYII=") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAD6UlEQVR4Aeyaz07UQBzHBzTRxFdYWc+Gi+GkCQSeQSMe9KJZ5OArICKv4IFAPOlBjD4DuERNSIAL8ezCPoQmBvx9Sqe0s5392z8zXTb77XSmM535fvrrdNvupBrzzxWAMQ8AlYiAeq22M1WrnYd6Mw5wEgDOlZpXl5/VcQCRADCh1K7q/FQahAlgrdN/VFJJEAkAv9vtXUsURBRkpVIgEgDEnBIAiSjY2HinGo0XbDJVCRAdAMwo2Np6LwCeq/3975JWD0QHAA5zPAoODo7U4eERxQKgOwguo0FFjxapANKiIO6p0bgAMTNzL16suIz6BiEVAK7EzDdSFI8C8oiooJz1uKTdvE8QrABO2u3EL0HmAm0U88vLr3Q2SKen7wYpC58gWAFgRBRdETjaGEem+SeLj9T62xVFKm2Cry8QugJIi4I084uLDwPTpK5DCAYaW3QFENZLREFYFiSYxXSQCRfkKQ+zzk+MPQGYUaCNYRKzOh9PKWe7LnP5dOgJIDQRRQF5JjxMsm4T232A0BcAokB+HEV3isfHv9T29leb96jcBwh9AcBRq91eiEP4tP2lEhD6BlBVCAMBqCKEgQGMCoEJlH0gF64OQwFg8MPMCUycTKC01wLCnVot/ixSbyokHRoAoxsEAuaZOGln6kypnbIgjAQAI/1ASDM/N/uA5pHKgjAyABx0g5Bm/tnTx2pu9r6ofAiZALBBWHm9rsywx3x96jZNBED5EDIDgCMzEswJL26e+ohIqNcvgJBHRZ4OmQJg8CYEyhAm9ZEnr9U6OVWt1qnORmlREDIHgIM0CJhs7v1kcyTMf/j4OcqbK1lAMPdp5nMBQCdAkDRxF9nc+6GaIYQ080t/zxSSdtE3bwi5AcABd5HSwQLrWs0QgnnkMb70RwAgAaHrk+YJQcZHF/mJR+zSSQeEeI/avC4LQBQEQcamu80vTYOgezPNR+UFRUIhADDVDQLb01REJBQGAINpEDZvTKrNm/Zh5A3B3jMjzkGuQSgcAExdglAKAJcglAbAFQilAnABQukAyobgBIAyITgDoCwITgEoA4JzAEaFQHutfu4inQSAgaJ+LDkLIEsI8vJllf2lyWkADDiLSBAA87YXL84DGAXCzD+xzg5EspYaBV4AkPGroSLBeKrEfkx5A4CBDwrh4PoEzbrKKwA4GQQCD1tog+QUiP75Sl7LOwAMvBsEni5x5F/eukbVnvISAK6sEOQRG+aBQL1QazyiD9cTibcAcKEhyJke/YONckNW89TzGgAGgBB7C7UGDC0xt2A78rRFUofEf2EUAUMLOL2cVQZAL6O27VcAbGTGpdz7CBj1QP0HAAD//zqU874AAAAGSURBVAMAo6WPn+qkSF8AAAAASUVORK5CYII=") 2x) 2 2, auto}
  a,button,summary,label,[role="button"],.faq__q,.galerie__item,.carte__point{cursor:pointer}
  input,textarea,select{cursor:auto}
  input[type="text"],input[type="email"],input[type="tel"],input[type="search"],textarea{cursor:text}
}