/* Label Rénovation — accueil (source : Drive, Gabarit hubs/home.css). Chargé uniquement sur l'accueil et les 5 hubs. */
/* Accueil — système graphique propre à la page d'accueil, volontairement
   distinct des pages hub : blocs arrondis flottants, titres en deux graisses,
   fond sombre dominant, chevron du logo en motif de marque, animations au
   défilement. Préfixe `lrh-` pour ne rien partager avec le gabarit des hubs. */

.lrh{
  --n:#00303f;        /* navy profond */
  --n2:#004e6a;       /* bleu de marque */
  --v:#afca0b;        /* lime */
  --v2:#c8e40e;
  --encre:#1b2830;
  --gris:#5b6a74;
  --clair:#eef3f5;
  --blanc:#fff;
  --r:30px;           /* rayon des blocs */
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  color:var(--encre);line-height:1.6;font-size:16px;
  background:var(--clair);
  padding:14px 14px 0;box-sizing:border-box;
}
.lrh *,.lrh *::before,.lrh *::after{box-sizing:inherit}
.lrh img{max-width:100%;height:auto;display:block;margin:0}
.lrh svg{display:block}
.lrh a{text-decoration:none}
.lrh p{margin:0 0 14px!important;font-size:16.5px}
.lrh p:last-child{margin-bottom:0!important}
.lrh ul{margin:0;padding:0;list-style:none}

/* ---- blocs flottants ---- */
.lrh-bloc{border-radius:var(--r);overflow:hidden;position:relative;margin:0 0 14px}
.lrh-bloc--n{background:var(--n);color:#fff}
.lrh-bloc--b{background:var(--blanc)}
.lrh-bloc--c{background:var(--clair)}
.lrh-in{max-width:1180px;margin:0 auto;padding:72px 40px}
.lrh-in--serre{padding:52px 40px}

/* ---- titres en deux graisses ---- */
.lrh h1,.lrh h2,.lrh h3,.lrh h4{
  font-family:inherit!important;margin:0 0 18px!important;
  text-transform:uppercase!important;letter-spacing:-.005em!important;line-height:1.06!important}
.lrh h1{font-size:clamp(34px,5vw,62px)!important;font-weight:700!important;color:#fff!important}
.lrh h2{font-size:clamp(28px,3.9vw,48px)!important;font-weight:700!important;color:var(--n)!important}
.lrh-bloc--n h2{color:#fff!important}
.lrh h3{font-size:clamp(17px,1.7vw,21px)!important;font-weight:700!important;
  color:var(--n)!important;letter-spacing:0!important;line-height:1.3!important}
.lrh-bloc--n h3{color:#fff!important}
.lrh .lrh-fin{display:block;font-weight:300;opacity:.92}
.lrh h2 em,.lrh h1 em{font-style:normal;color:var(--v)}
.lrh-chapo{font-size:17.5px;color:var(--gris);max-width:62ch;margin:0!important}
.lrh-bloc--n .lrh-chapo{color:rgba(255,255,255,.82)}
.lrh-oeil{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--v);margin:0 0 16px}
/* La puce reprend le toit incliné du logo, pas un chevron symétrique. */
.lrh-oeil::before{content:'';width:24px;height:11px;flex:none;background:var(--v);
  clip-path:polygon(7% 0,63% 5%,100% 100%,41% 100%)}

/* ---- boutons ---- */
.lrh-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:999px;font-weight:700;font-size:15.5px;
  text-transform:uppercase;letter-spacing:.04em;border:2px solid transparent;
  transition:transform .18s ease,background .18s ease,color .18s ease;line-height:1}
.lrh-btn--v{background:var(--v);color:#1a2104!important}
.lrh-btn--v:hover{background:var(--v2);transform:translateY(-2px)}
.lrh-btn--f{border-color:rgba(255,255,255,.5);color:#fff!important}
.lrh-btn--f:hover{background:rgba(255,255,255,.14);border-color:#fff;transform:translateY(-2px)}
.lrh-btn--n{background:var(--n);color:#fff!important}
.lrh-btn--n:hover{background:var(--n2);transform:translateY(-2px)}
.lrh-fleche{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;
  color:var(--n2)!important;text-transform:uppercase;letter-spacing:.03em}
.lrh-fleche::after{content:'→';transition:transform .18s}
.lrh-fleche:hover::after{transform:translateX(4px)}

/* ---- motif chevron ---- */
/* Filigrane : le bloc-marque, très grand et très discret. */
.lrh-motif{position:absolute;pointer-events:none;opacity:.055;color:#fff;height:auto}
.lrh-motif--hd{top:-70px;right:-80px;width:400px}
.lrh-motif--bg{bottom:-90px;left:-70px;width:330px}

/* =========== 1 · HÉROS =========== */
.lrh-hero{min-height:clamp(560px,78vh,780px);display:flex;align-items:center}
.lrh-hero__fond{position:absolute;inset:0}
.lrh-hero__fond img{width:100%;height:100%;object-fit:cover}
/* Le voile protège la lisibilité du titre à gauche, mais il doit laisser voir
   la maison à droite : la carte formulaire est opaque, elle n'en a pas besoin. */
.lrh-hero__fond img{object-position:center 42%}
.lrh-hero__fond::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,40,54,.93) 0%,rgba(0,40,54,.80) 34%,
    rgba(0,40,54,.52) 62%,rgba(0,40,54,.26) 100%)}
.lrh-hero .lrh-in{position:relative;width:100%;display:grid;
  grid-template-columns:1fr 392px;gap:56px;align-items:center;padding-top:60px;padding-bottom:60px}
/* Le nom de l'entreprise ouvre le H1 et le domine ; la ligne de
   positionnement, qui porte la requête, suit en plus petit. */
.lrh-hero h1{display:flex;flex-direction:column;gap:14px;max-width:16ch}
.lrh-marque{display:block;font-size:clamp(40px,5.8vw,74px);font-weight:700;line-height:.94;
  letter-spacing:-.02em;position:relative;padding-bottom:16px}
.lrh-marque::after{content:'';position:absolute;left:0;bottom:0;width:78px;height:4px;
  border-radius:2px;background:var(--v)}
.lrh-h1-sous{display:block;font-size:clamp(16.5px,1.5vw,21px);font-weight:400;
  letter-spacing:.005em;line-height:1.35;text-transform:none;color:rgba(255,255,255,.92);
  max-width:30ch}
.lrh-hero__sig{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;
  font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--v)}
.lrh-hero__sig i{width:34px;height:2px;background:var(--v);display:block}
.lrh-hero__accroche{color:rgba(255,255,255,.9)!important;max-width:54ch;font-size:17.5px!important;
  margin:4px 0 30px!important}
.lrh-hero__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.lrh-hero__preuve{display:flex;flex-wrap:wrap;gap:14px 28px;margin:34px 0 0;padding:22px 0 0;
  border-top:1px solid rgba(255,255,255,.2);font-size:14.5px;color:rgba(255,255,255,.9)}
.lrh-hero__preuve span{display:inline-flex;align-items:center;gap:9px}
.lrh-hero__preuve svg{width:18px;height:18px;flex:none;stroke:var(--v);fill:none;stroke-width:2}
.lrh-etoiles{color:var(--v);letter-spacing:1.5px;font-size:13px}

/* carte formulaire */
.lrh-form{background:#fff;border-radius:22px;padding:30px 28px 26px;color:var(--encre);
  box-shadow:0 30px 60px -30px rgba(0,16,24,.85)}
.lrh-form h2{font-size:22px!important;margin:0 0 6px!important;text-transform:none!important;
  letter-spacing:0!important;line-height:1.25!important;color:var(--n)!important}
.lrh-form>p{font-size:14.5px!important;color:var(--gris)!important;margin:0 0 18px!important}
.lrh-form .wpforms-container{margin:0!important}
.lrh-form .wpforms-field{padding:7px 0!important}
.lrh-form .wpforms-field-label{font-size:13.5px!important;margin-bottom:5px!important}
.lrh-form .wpforms-submit{width:100%;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.lrh-form .lr-h-rgpd .wpforms-field-label{position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lrh-form .lr-h-rgpd label{font-size:13px;line-height:1.45;color:var(--gris)}
.lrh-form__pied{display:flex;align-items:flex-start;gap:9px;margin:16px 0 0!important;
  padding-top:14px;border-top:1px solid #e2eaed;font-size:13px!important;color:var(--gris)!important}
.lrh-form__pied svg{width:16px;height:16px;flex:none;margin-top:1px;stroke:var(--v);fill:none;stroke-width:2}

/* =========== 2 · BANDEAU DÉFILANT =========== */
.lrh-ruban{background:var(--v);border-radius:var(--r);overflow:hidden;margin:0 0 14px}
.lrh-ruban__piste{display:flex;gap:0;width:max-content;animation:lrh-defile 38s linear infinite}
.lrh-ruban span{display:inline-flex;align-items:center;gap:22px;padding:18px 22px;
  font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:#1a2104;
  white-space:nowrap}
.lrh-ruban span::after{content:'';width:17px;height:9px;flex:none;background:#1a2104;
  clip-path:polygon(0 100%,50% 0,100% 100%,78% 100%,50% 44%,22% 100%)}
.lrh-ruban:hover .lrh-ruban__piste{animation-play-state:paused}
@keyframes lrh-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========== 3 · MANIFESTE =========== */
.lrh-manif .lrh-in{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.lrh-manif h2{font-size:clamp(34px,5.2vw,64px)!important}
.lrh-piliers{display:grid;gap:14px}
.lrh-pilier{display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:22px 24px;transition:.2s}
.lrh-pilier:hover{background:rgba(255,255,255,.1);transform:translateX(4px)}
.lrh-pilier svg{width:54px;height:54px;padding:13px;border-radius:14px;background:rgba(175,202,11,.18);
  stroke:var(--v);fill:none;stroke-width:1.7}
.lrh-pilier p{color:rgba(255,255,255,.8)!important;font-size:15px!important;margin:0!important}

/* =========== 4 · LES ASSOCIÉS =========== */
.lrh-assoc .lrh-in{display:grid;grid-template-columns:.92fr 1.08fr;gap:58px;align-items:center}
.lrh-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lrh-duo figure{margin:0;position:relative;border-radius:20px;overflow:hidden;
  box-shadow:0 26px 50px -30px rgba(0,30,42,.75)}
/* Décalage en quinconce, fixe. Un glissement au défilement avait été essayé
   puis retiré : il se tenait mal sur mobile, où la barre d'adresse qui se
   rétracte fait varier la hauteur du champ de vision et rend le mouvement
   saccadé. */
.lrh-duo figure:first-child{transform:translateY(-16px)}
.lrh-duo figure:last-child{transform:translateY(16px)}
.lrh-duo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;
  transition:transform .5s ease}
.lrh-duo figure:hover img{transform:scale(1.04)}
.lrh-duo figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  background:linear-gradient(transparent,rgba(0,30,42,.9));color:#fff}
.lrh-duo b{display:block;font-size:15.5px;font-weight:700;line-height:1.2}
.lrh-duo span{font-size:12.5px;color:var(--v);text-transform:uppercase;letter-spacing:.09em}
/* photo à deux : une seule figure, pas de quinconce */
.lrh-duo--un{grid-template-columns:1fr}
.lrh-duo.lrh-duo--un figure:first-child,.lrh-duo.lrh-duo--un figure:last-child{transform:none}
.lrh-duo--un img{aspect-ratio:967/1024;height:auto}
.lrh-cite{margin:0 0 22px;font-size:clamp(19px,2vw,24px);line-height:1.45;font-weight:500;
  color:var(--n);position:relative;padding-left:26px}
.lrh-cite::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:4px;
  border-radius:2px;background:var(--v)}
.lrh-signature{display:flex;align-items:flex-start;gap:13px;margin:26px 0 0;padding-top:20px;
  border-top:1px solid #e2eaed;font-size:14.5px;color:var(--gris)}
.lrh-signature svg{width:22px;height:22px;flex:none;margin-top:2px;
  stroke:var(--v);fill:none;stroke-width:2.6}
.lrh-signature b{color:var(--n)}

/* =========== 5 · CE QUE NOUS APPORTONS =========== */
.lrh-apports{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:38px 0 0}
.lrh-apport{background:var(--clair);border-radius:20px;padding:30px 28px;
  border:1px solid #e2eaed;transition:.2s}
.lrh-apport:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(0,30,42,.5)}
.lrh-apport__n{display:block;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--v);
  margin:0 0 14px}
.lrh-apport p{color:var(--gris);font-size:15.5px;margin:0!important}

/* =========== 6 · MÉTIERS =========== */
.lrh-metiers{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:40px 0 0}
.lrh-metier{position:relative;border-radius:24px;overflow:hidden;min-height:330px;
  display:flex;align-items:flex-end;isolation:isolate;transition:.25s}
.lrh-metier:nth-child(odd){transform:translateY(-14px)}
.lrh-metier:hover{transform:translateY(-20px)}
.lrh-metier:nth-child(even):hover{transform:translateY(-6px)}
.lrh-metier img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .6s ease}
.lrh-metier:hover img{transform:scale(1.06)}
/* Le voile doit commencer tôt : les pastilles se posent parfois sur du ciel. */
.lrh-metier::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(rgba(0,30,42,.12) 0%,rgba(0,30,42,.34) 26%,
    rgba(0,30,42,.78) 58%,rgba(0,30,42,.97) 100%)}
.lrh-metier__c{padding:30px 30px 28px;color:#fff;width:100%}
.lrh-metier h3{color:#fff!important;font-size:24px!important;margin:0 0 12px!important}
.lrh-metier ul{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
/* Pastilles de prestation : elles se posent une à une à l'apparition de la
   carte, puis basculent en blanc en cascade au survol. Le vert est réservé à
   la pastille effectivement survolée. */
.lrh-metier li{font-size:13px;padding:6px 13px;border-radius:999px;color:#fff;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
  opacity:0;transform:translateY(10px) scale(.96);
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,.8,.3,1),
             background .3s ease,color .3s ease,border-color .3s ease;
  transition-delay:calc(var(--i,0) * 75ms + 180ms)}
.lrh-vu .lrh-metier li,.lrh-metier.lrh-vu li{opacity:1;transform:none}
.lrh-metier:hover li{background:#fff;color:#00303f;border-color:#fff;
  transition-delay:calc(var(--i,0) * 55ms)}
.lrh-metier li:hover{background:var(--v)!important;border-color:var(--v)!important;
  color:#1a2104!important;transform:translateY(-2px);transition-delay:0ms!important}
.lrh-metier .lrh-fleche{color:var(--v)!important}

/* =========== 7 · CHIFFRES ANIMÉS =========== */
.lrh-chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:38px 0 0}
.lrh-chiffre{text-align:center;padding:28px 18px;border-radius:20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.lrh-chiffre b{display:block;font-size:clamp(34px,4.4vw,52px);font-weight:700;color:var(--v);
  line-height:1;font-variant-numeric:tabular-nums}
.lrh-chiffre small{display:block;margin-top:10px;font-size:14px;color:rgba(255,255,255,.78);
  line-height:1.4}

/* =========== 8 · RÉALISATIONS =========== */
.lrh-real{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:40px 0 0}
.lrh-real figure{margin:0}
.lrh-real figcaption{margin-top:14px;font-size:14px;color:var(--gris)}
.lrh-real figcaption b{display:block;color:var(--n);font-size:16.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.01em;margin-bottom:3px}

/* =========== 9 · APPEL FINAL =========== */
.lrh-final{background:var(--v);border-radius:var(--r);margin:0 0 14px}
.lrh-final .lrh-in{display:flex;flex-wrap:wrap;gap:26px;align-items:center;
  justify-content:space-between;padding-top:52px;padding-bottom:52px}
.lrh-final h2{color:#1a2104!important;margin:0!important;max-width:18ch}
.lrh-final p{color:#38420f!important;margin:10px 0 0!important}

/* =========== animations =========== */
.lrh-rev{opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.8,.3,1),transform .7s cubic-bezier(.22,.8,.3,1);
  transition-delay:var(--d,0ms)}
.lrh-rev.lrh-vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .lrh-rev{opacity:1;transform:none;transition:none}
  .lrh-ruban__piste{animation:none}
  .lrh-duo figure,.lrh-metier:nth-child(odd){transform:none}
  .lrh-metier li{opacity:1;transform:none;transition:none}
}

/* =========== responsive =========== */
@media (max-width:1100px){
  .lrh-hero .lrh-in,.lrh-manif .lrh-in,.lrh-assoc .lrh-in{grid-template-columns:1fr;gap:38px}
  .lrh-devis-grille{grid-template-columns:1fr!important;gap:36px!important}
  .lrh-real{grid-template-columns:1fr 1fr}
  .lrh-chiffres{grid-template-columns:1fr 1fr}
  .lrh-in{padding:56px 32px}
}
@media (max-width:767px){
  .lrh{padding:8px 8px 0;--r:22px}
  .lrh-in{padding:42px 22px}
  .lrh-metiers,.lrh-apports,.lrh-real{grid-template-columns:1fr}
  .lrh-metier:nth-child(odd),.lrh-metier:hover{transform:none}
  .lrh-duo figure:first-child{transform:translateY(-8px)}
  .lrh-duo figure:last-child{transform:translateY(8px)}
  /* Sur deux colonnes étroites, la légende en surimpression mangeait les deux
     tiers de la photo : « Benoit Westland » et « ASSOCIÉ CO-GÉRANT » passaient
     chacun sur deux lignes, par-dessus les visages. On la passe sous l'image. */
  .lrh-duo figure{border-radius:0;overflow:visible;box-shadow:none}
  .lrh-duo img{border-radius:16px;box-shadow:0 18px 34px -22px rgba(0,30,42,.6)}
  .lrh-duo figcaption{position:static;padding:11px 2px 0;background:none;color:inherit}
  .lrh-duo b{font-size:14.5px;color:var(--n)}
  .lrh-duo span{font-size:11.5px;letter-spacing:.06em;color:var(--gris)}
  .lrh-hero{min-height:0}
  .lrh-hero__actions .lrh-btn{flex:1 1 100%}
  .lrh-final .lrh-in{flex-direction:column;align-items:flex-start}
  .lrh-final .lrh-btn{width:100%}
  .lrh-motif{display:none}
}
.lrh .lr-faq{max-width:900px;margin:0 auto}
.lrh .lr-communes{display:flex;flex-wrap:wrap;gap:9px}
.lrh .lr-communes--guides{justify-content:center}
.lrh .lr-commune{display:inline-block;padding:9px 16px;border-radius:999px;background:#fff;
  border:1px solid #dde6ea;font-size:14.5px;color:var(--encre)!important;transition:.15s}
.lrh .lr-commune:hover{background:var(--n);border-color:var(--n);color:#fff!important}
.lrh .lr-commune--plat{background:transparent;border-style:dashed;color:var(--gris)!important}
.lrh .lr-carte-svg{width:100%;height:auto;border-radius:22px;background:#f6fafb;
  border:1px solid #dde6ea;padding:8px}

/* Gabarit d'en-tête de l'accueil (18, rangée 3ir7876) : il porte encore une
   photo de fond et une vague blanche qui découpe la barre de navigation et
   rogne le logo. Le héros reprend la photo ; on ne garde que la barre. */
body:has(.lrh) .p-3ir7876{background-image:none!important;background-color:#00303f!important}
body:has(.lrh) .p-3ir7876 .pagelayer-row-shape{display:none!important}
/* La pastille flottante « MON DEVIS GRATUIT » fait doublon avec le formulaire
   du héros, le bloc devis et la barre mobile. */
body:has(.lrh) #btnSticky,body:has(.lrh) .div-devis-sticky{display:none!important}
body:has(.lrh) .lr-barre{display:none}
@media (max-width:767px){body:has(.lrh) .lr-barre{display:grid}}

/* En-tête mobile de l'accueil : le gabarit 18 y sert le logo carré à
   195×195 px, soit un en-tête de 210 px qui repousse tout le héros vers le
   bas (les hubs, eux, tiennent en 89 px). */
/* Logo de l'en-tête. Sur ordinateur il était servi à 93×62 — minuscule pour un
   site porté par la marque. Sur mobile, le gabarit sert la version COULEUR,
   dont « RÉNOVATION » est en navy : invisible sur un en-tête navy, et le
   détourage blanc du « EL » se lit comme un fond blanc. On bascule sur la
   version négative, faite pour les fonds sombres. */
body:has(.lrh) .p-sqs3405 img{width:auto!important;height:92px!important;max-width:none!important}
@media (max-width:1024px){
  body:has(.lrh) .p-7ia7920{padding:14px 8px!important}
  body:has(.lrh) .p-i8d7633 img{
    content:url("/wp-content/uploads/2025/10/Label-renovation-logo-neg_cropped.png");
    width:auto!important;height:62px!important;max-width:none!important}
  body:has(.lrh) .p-7ia7920 .pagelayer-col{height:auto!important}
  body:has(.lrh) .p-7ia7920 .fa-bars{font-size:20px!important}
}