/* ============================================================
   REPASY — PASSE FINALE COMPLÈTE 03/09/2026
   Cette feuille est chargée APRES style.css et prend priorité.
   ============================================================ */

:root{
  --repasy-header-h:118px;
  --repasy-strip-h:112px;
  --repasy-nav-right:38px;
}

/* ---------- ENTÊTE COMMUN DES PAGES INTÉRIEURES ---------- */
@media (min-width:981px){
  body:not(.home-shell) .header{
    height:var(--repasy-header-h)!important;
    min-height:var(--repasy-header-h)!important;
    background:#03070d!important;
    border-bottom:1px solid #1b2736!important;
    overflow:visible!important;
  }
  body:not(.home-shell) .navbar{
    position:relative!important;
    width:100%!important;
    max-width:1440px!important;
    height:var(--repasy-header-h)!important;
    min-height:var(--repasy-header-h)!important;
    margin:0 auto!important;
    padding:0 28px!important;
    background:#03070d!important;
    overflow:visible!important;
  }

  /* REPASY seul : logo agrandi, la ligne Dépannage/Entretien/Petits Travaux et le slogan sont masqués par recadrage CSS. */
  body:not(.home-shell) .brand{
    position:absolute!important;
    left:28px!important;
    top:10px!important;
    width:300px!important;
    height:92px!important;
    overflow:hidden!important;
    display:block!important;
    z-index:5!important;
  }
  body:not(.home-shell) .brand img{
    position:absolute!important;
    width:300px!important;
    max-width:none!important;
    height:auto!important;
    left:0!important;
    top:0!important;
    transform:none!important;
    object-fit:initial!important;
  }

  /* La navigation garde EXACTEMENT la même référence droite sur toutes les pages. */
  .navbar .navlinks,
  body:not(.home-shell) .navbar .navlinks{
    position:absolute!important;
    right:var(--repasy-nav-right)!important;
    left:auto!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:clamp(18px,1.65vw,31px)!important;
    white-space:nowrap!important;
    z-index:10!important;
    font-size:clamp(14px,1.0vw,16px)!important;
  }
  .navbar .navlinks a{
    padding:13px 0!important;
  }
  .navbar .navlinks a[href="contact.html"]{
    padding:11px 14px!important;
    background:#0b63f6!important;
    color:#fff!important;
    border-radius:5px!important;
    font-weight:900!important;
  }

  /* ---------- HERO COMMUN : 1/3 TEXTE + 2/3 PHOTO ---------- */
  .dep-hero,.ent-hero,.pt-hero,.about-hero{
    display:grid!important;
    grid-template-columns:35% 65%!important;
    min-height:calc(100svh - var(--repasy-header-h) - var(--repasy-strip-h))!important;
    height:auto!important;
    background:#071426!important;
  }
  .dep-copy,.ent-copy,.pt-copy,.about-copy{
    padding:clamp(30px,3.2vw,52px)!important;
  }
  .dep-copy h1,.ent-copy h1,.pt-copy h1,.about-copy h1{
    font-size:clamp(39px,3.25vw,58px)!important;
  }

  /* Photos : surface plus grande. */
  .dep-image,.ent-image,.pt-image,.about-image{
    min-height:100%!important;
    background-size:cover!important;
    background-position:center!important;
  }

  /* Disqueuse réelle demandée. */
  .pt-image,.about-image{
    background-image:url('action-disqueuse-wide.jpg')!important;
    background-position:center 48%!important;
  }

  /* ---------- BANDES BLANCHES DES 3 SERVICES ---------- */
  .dep-strip,.ent-strip,.pt-strip{
    position:relative!important;
    min-height:var(--repasy-strip-h)!important;
    height:var(--repasy-strip-h)!important;
    display:grid!important;
    grid-template-columns:repeat(6,1fr)!important;
    align-items:start!important;
    background:#fff!important;
    border-bottom:0!important;
    padding-bottom:25px!important;
  }
  .dep-strip>div,.ent-strip>div,.pt-strip>div{
    position:relative!important;
    border-right:0!important;
    padding:18px 10px 28px!important;
    text-align:center!important;
  }
  /* Les traits verticaux deviennent des flèches vers le bas : indication évidente que la page continue. */
  .dep-strip>div::after,.ent-strip>div::after,.pt-strip>div::after{
    content:"↓"!important;
    position:absolute!important;
    left:50%!important;
    bottom:4px!important;
    transform:translateX(-50%)!important;
    color:#0b63f6!important;
    font-size:20px!important;
    font-weight:900!important;
    line-height:1!important;
  }
  .dep-strip>div span,.ent-strip>div span,.pt-strip>div span{
    margin-bottom:3px!important;
  }

  /* Le titre de la section suivante reste SOUS le premier écran, avec seulement le signal de défilement. */
  .dep-services,.ent-services,.pt-services{
    padding-top:54px!important;
  }

  /* Cue central supplémentaire, discret et cliquable. */
  .scroll-cue{
    position:absolute!important;
    left:50%!important;
    bottom:4px!important;
    transform:translateX(-50%)!important;
    z-index:20!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    padding:4px 10px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.92)!important;
    color:#0b3d96!important;
    font-size:12px!important;
    font-weight:800!important;
    box-shadow:0 4px 14px rgba(0,0,0,.08)!important;
  }
  .scroll-cue span{font-size:18px!important;line-height:1!important;}

  /* ---------- NOS RÉALISATIONS : GRANDE CUISINE PLEIN PREMIER ÉCRAN ---------- */
  .real-hero{
    position:relative!important;
    min-height:calc(100svh - var(--repasy-header-h))!important;
    display:flex!important;
    align-items:center!important;
    background:
      linear-gradient(90deg,rgba(2,8,16,.98) 0%,rgba(2,8,16,.88) 34%,rgba(2,8,16,.35) 58%,rgba(2,8,16,.08) 100%),
      url('real-cuisine-grise.jpg') 63% center/cover no-repeat!important;
  }
  .real-hero .inner{
    max-width:1440px!important;
    padding:clamp(48px,6vh,78px) 46px 95px!important;
  }
  .real-hero h1{font-size:clamp(54px,5vw,78px)!important;}
  .real-main{scroll-margin-top:var(--repasy-header-h)!important;}

  /* ---------- À PROPOS : premier écran complet avant la suite ---------- */
  .about-hero{
    position:relative!important;
    min-height:calc(100svh - var(--repasy-header-h))!important;
    grid-template-columns:35% 65%!important;
  }
  .about-main{scroll-margin-top:var(--repasy-header-h)!important;}

  .hero-scroll{
    bottom:18px!important;
    background:rgba(3,7,13,.78)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.25)!important;
  }
}

/* ---------- ACCUEIL : BARRE NOIRE À DROITE, GRAND R ENTIÈREMENT LIBRE ---------- */
@media (min-width:981px){
  .home-shell .header{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:96px!important;
    min-height:96px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    overflow:visible!important;
    z-index:100!important;
  }
  .home-shell .navbar{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    height:96px!important;
    min-height:96px!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    overflow:visible!important;
  }

  /* La partie noire commence APRES le grand R : elle ne peut plus le couvrir. */
  .home-shell .navbar::before{
    content:""!important;
    position:absolute!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:31%!important;
    background:rgba(3,7,13,.97)!important;
    z-index:0!important;
  }
  .home-shell .navlinks{
    position:absolute!important;
    right:var(--repasy-nav-right)!important;
    left:auto!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    margin:0!important;
    z-index:5!important;
    display:flex!important;
    align-items:center!important;
    gap:clamp(18px,1.65vw,31px)!important;
    font-size:clamp(14px,1vw,16px)!important;
    white-space:nowrap!important;
  }

  /* Le visuel démarre tout en haut derrière l'entête transparent. */
  .home-shell main{position:relative!important;}
  .home-shell .home-hero-final{
    position:relative!important;
    margin:0!important;
    height:calc(100svh - 82px)!important;
    min-height:620px!important;
    overflow:hidden!important;
    z-index:1!important;
  }
  .home-shell .home-hero-visual{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center top!important;
    transform:none!important;
  }

  /* Barre coordonnées juste sous le premier écran. */
  .home-shell .home-contact{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    min-height:82px!important;
    height:82px!important;
    margin:0!important;
    transform:none!important;
    border-radius:0!important;
  }
  .home-shell .home-contact>div{
    min-height:82px!important;
    height:82px!important;
  }
  .home-shell .home-contact .round{
    width:46px!important;
    height:46px!important;
    flex:0 0 46px!important;
    font-size:21px!important;
  }
  .home-shell .home-contact strong{font-size:17px!important;}
  .home-shell .home-contact small{font-size:11px!important;}

  .home-shell .home-projects{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    margin:0!important;
    transform:none!important;
  }

  /* Footer complet identique aux pages intérieures. */
  .home-full-footer{
    margin-top:0!important;
  }
}

/* ---------- ÉCRANS INTERMÉDIAIRES / PORTABLES ---------- */
@media (max-width:1180px) and (min-width:981px){
  :root{--repasy-header-h:104px;--repasy-strip-h:104px;--repasy-nav-right:22px;}
  body:not(.home-shell) .brand{left:18px!important;width:220px!important;height:76px!important;top:12px!important;}
  body:not(.home-shell) .brand img{width:220px!important;}
  .navbar .navlinks{gap:14px!important;font-size:13px!important;}
  .navbar .navlinks a[href="contact.html"]{padding:9px 10px!important;}
  .dep-copy,.ent-copy,.pt-copy,.about-copy{padding:28px!important;}
  .dep-copy h1,.ent-copy h1,.pt-copy h1,.about-copy h1{font-size:40px!important;}
  .home-shell .navbar::before{left:32%!important;}
}

/* ---------- TABLETTE / MOBILE ---------- */
@media (max-width:980px){
  .header{height:auto!important;min-height:82px!important;}
  .navbar{height:auto!important;min-height:82px!important;padding:8px 18px!important;}
  .brand{position:relative!important;left:auto!important;top:auto!important;width:180px!important;height:60px!important;overflow:hidden!important;}
  .brand img{position:absolute!important;width:180px!important;max-width:none!important;top:0!important;left:0!important;}
  .menu{display:block!important;}
  .navlinks{
    top:82px!important;
    left:0!important;
    right:0!important;
    transform:none!important;
    background:#03070d!important;
    padding:18px!important;
    gap:8px!important;
  }
  .home-shell .header{position:relative!important;background:#03070d!important;}
  .home-shell .navbar::before{display:none!important;}
  .home-shell .home-hero-final{height:auto!important;min-height:0!important;}
  .home-shell .home-hero-visual{height:auto!important;object-fit:contain!important;}
  .home-shell .home-contact{height:auto!important;min-height:0!important;}
  .home-shell .home-contact>div{height:auto!important;min-height:72px!important;}
  .home-shell .home-projects{grid-template-columns:1fr 1fr!important;}
  .dep-hero,.ent-hero,.pt-hero,.about-hero{grid-template-columns:1fr!important;min-height:auto!important;}
  .dep-image,.ent-image,.pt-image,.about-image{min-height:330px!important;}
  .dep-strip,.ent-strip,.pt-strip{grid-template-columns:repeat(2,1fr)!important;height:auto!important;min-height:0!important;padding-bottom:34px!important;}
  .real-hero{min-height:650px!important;background-position:68% center!important;}
  .scroll-cue{bottom:6px!important;}
}
@media (max-width:620px){
  .home-shell .home-projects{grid-template-columns:1fr!important;}
}


/* ============================================================
   CORRECTION CIBLÉE — ENTÊTE / FOOTER / DÉPANNAGE
   ============================================================ */
@media (min-width:981px){
  /* NAVIGATION : plus haute et réellement centrée dans la barre noire. */
  .home-shell .navlinks,
  body:not(.home-shell) .navbar .navlinks{
    top:43% !important;
    transform:translateY(-50%) !important;
  }

  /* Pages intérieures : vrai logo REPASY seul, plus gros et centré. */
  body:not(.home-shell) .brand{
    left:24px !important;
    top:12px !important;
    width:305px !important;
    height:88px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
  }
  body:not(.home-shell) .brand img{
    position:static !important;
    width:278px !important;
    height:auto !important;
    max-width:278px !important;
    object-fit:contain !important;
  }

  /* DÉPANNAGE : la bande Électricité/Plomberie... doit être visible dès le premier écran. */
  body.page-depannage .dep-hero{
    min-height:clamp(500px, calc(100svh - 248px), 610px) !important;
  }
  body.page-depannage .dep-strip{
    min-height:106px !important;
    height:106px !important;
  }
  body.page-depannage .dep-strip>div{
    padding-top:13px !important;
    padding-bottom:27px !important;
  }
}

/* Pied de page : moins de noir vide avant les colonnes Navigation / Informations / Légal. */
.footer{
  padding-top:24px !important;
}
.footgrid{
  align-items:start !important;
}
.footer-logo{
  width:170px !important;
  height:58px !important;
}
.footer p{
  margin-top:4px !important;
  margin-bottom:0 !important;
}
.fine{
  margin-top:18px !important;
  padding-top:14px !important;
}


/* ===== AJUSTEMENT ACCUEIL — NAVIGATION + BAS DE PAGE ===== */
@media (min-width:981px){
  /* Accueil : remonter encore les libellés pour qu'ils soient visuellement centrés dans la bande noire. */
  .home-shell .navlinks{
    top:36% !important;
    transform:translateY(-50%) !important;
  }

  /* Réduire la zone noire vide avant les mentions/lien du pied de page. */
  .home-shell .home-full-footer{
    margin-top:0 !important;
    padding-top:10px !important;
  }
  .home-shell .home-full-footer .footgrid{
    padding-top:0 !important;
    margin-top:0 !important;
  }
  .home-shell .home-full-footer .fine{
    margin-top:10px !important;
    padding-top:10px !important;
  }

  /* Éviter qu'une bande noire supplémentaire reste sous la dernière photo avant le footer. */
  .home-shell .home-projects{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }
  .home-shell .home-projects + .home-full-footer{
    margin-top:0 !important;
  }
}


/* ============================================================
   RÉFÉRENCE DÉPANNAGE — NAVIGATION IDENTIQUE PARTOUT
   + REPASY / BLOC TEXTE / BANDE PRESTATIONS
   ============================================================ */
@media (min-width:981px){
  /* La position validée sur Dépannage devient la référence commune. */
  .home-shell .navlinks,
  body:not(.home-shell) .navbar .navlinks{
    top:43% !important;
    right:38px !important;
    transform:translateY(-50%) !important;
  }

  /* Accueil : même position verticale/horizontale que Dépannage. */
  .home-shell .navlinks{
    top:43% !important;
  }

  /* REPASY pages intérieures : encore un peu plus grand. */
  body:not(.home-shell) .brand{
    width:325px !important;
    height:94px !important;
    left:22px !important;
    top:9px !important;
  }
  body:not(.home-shell) .brand img{
    width:300px !important;
    max-width:300px !important;
  }

  /* Dépannage : bloc texte réélargi, sans revenir à 50/50.
     On passe d'environ 35/65 à 40/60. */
  body.page-depannage .dep-hero{
    grid-template-columns:40% 60% !important;
    min-height:calc(100svh - 118px - 104px) !important;
  }
  body.page-depannage .dep-copy{
    padding-left:clamp(38px,4vw,62px) !important;
    padding-right:clamp(34px,3.5vw,56px) !important;
  }

  /* Les deux boutons restent côte à côte. */
  body.page-depannage .hero-actions,
  body.page-depannage .dep-actions,
  body.page-depannage .actions{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:14px !important;
    flex-wrap:nowrap !important;
  }

  /* Bande Électricité / Plomberie... directement au pied de la photo,
     visible sur le premier écran. */
  body.page-depannage .dep-strip{
    margin-top:0 !important;
    transform:none !important;
    min-height:104px !important;
    height:104px !important;
    position:relative !important;
    z-index:4 !important;
  }
  body.page-depannage .dep-strip>div{
    padding-top:10px !important;
  }
  body.page-depannage .dep-services{
    padding-top:44px !important;
    scroll-margin-top:118px !important;
  }
}
@media (max-width:1180px) and (min-width:981px){
  .home-shell .navlinks,
  body:not(.home-shell) .navbar .navlinks{
    right:22px !important;
    top:43% !important;
  }
  body:not(.home-shell) .brand{
    width:240px !important;
    height:80px !important;
  }
  body:not(.home-shell) .brand img{
    width:225px !important;
    max-width:225px !important;
  }
  body.page-depannage .dep-hero{
    grid-template-columns:41% 59% !important;
  }
}


/* ===== ACCUEIL — correction ciblée ===== */
@media (min-width:981px){
  /* Remonter les écritures pour les centrer visuellement dans la barre noire. */
  .home-shell .navlinks{
    top:36% !important;
    transform:translateY(-50%) !important;
  }

  /* Remettre une respiration BLANCHE entre les réalisations et le pied légal. */
  .home-shell .home-projects{
    margin-bottom:0 !important;
    padding-bottom:38px !important;
    background:#fff !important;
  }
  .home-shell .home-full-footer{
    margin-top:0 !important;
    border-top:0 !important;
  }
}

/* Ajustement demandé : remonter encore légèrement les écritures de navigation sur toutes les pages. */
@media (min-width:981px){
  .home-shell .navlinks,
  body:not(.home-shell) .navbar .navlinks{
    top:32% !important;
    transform:translateY(-50%) !important;
  }
}

/* Pages intérieures uniquement : navigation recentrée verticalement dans la barre noire.
   L'Accueil validé reste inchangé. */
@media (min-width:981px){
  body:not(.home-shell) .navbar .navlinks{
    top:50% !important;
    transform:translateY(-50%) !important;
  }
}

/* Suppression des petites flèches décoratives des bandes de prestations.
   Le bouton "Nos interventions" suffit pour indiquer la suite. */
.dep-strip a::after,
.ent-strip a::after,
.pt-strip a::after,
.service-strip a::after,
.dep-strip .strip-item::after,
.ent-strip .strip-item::after,
.pt-strip .strip-item::after,
.service-strip .strip-item::after,
.dep-strip::after,
.ent-strip::after,
.pt-strip::after,
.service-strip::after,
.scroll-cue,
.strip-scroll-cue{
  display:none !important;
  content:none !important;
}

/* Correction précise : les flèches sont portées par chaque DIV de la bande,
   pas par des liens. Suppression sur Dépannage / Entretien / Petits travaux. */
.dep-strip > div::after,
.ent-strip > div::after,
.pt-strip > div::after{
  content:none !important;
  display:none !important;
}

/* ==========================================================
   BARRE DES PAGES : UNE SEULE RÉFÉRENCE SUR TOUT LE SITE
   Même hauteur, même position et même alignement des liens.
   ========================================================== */
@media (min-width:981px){
  body:not(.home-shell) .navbar{
    height:118px !important;
    min-height:118px !important;
  }

  body:not(.home-shell) .navbar .navlinks{
    top:50% !important;
    right:38px !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
    align-items:center !important;
  }

  body:not(.home-shell) .navbar .navlinks a{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }
}

@media (max-width:1180px) and (min-width:981px){
  body:not(.home-shell) .navbar .navlinks{
    right:22px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
  }
}


/* ============================================================
   DÉPANNAGE — reprise visuelle validée le 04/09/2026
   ============================================================ */
@media (min-width:1181px){
  /* Navigation : même calage à droite que l'Accueil, ~1 cm du bord. */
  body.page-depannage .navbar .navlinks{
    right:38px !important;
  }

  /* REPASY centré sur l'axe du bloc bleu situé dessous. */
  body.page-depannage .brand{
    left:calc(20% - 150px) !important;
    width:300px !important;
    height:94px !important;
    top:9px !important;
  }
  body.page-depannage .brand img{
    width:300px !important;
    max-width:300px !important;
  }

  /* Le premier écran contient toujours : en-tête + visuel + bande prestations. */
  body.page-depannage .dep-hero{
    grid-template-columns:40% 60% !important;
    height:calc(100svh - 118px - 104px) !important;
    min-height:0 !important;
    max-height:none !important;
  }

  /* Même texte, uniquement redisposé pour mieux occuper la hauteur. */
  body.page-depannage .dep-copy{
    box-sizing:border-box !important;
    min-height:0 !important;
    padding:clamp(24px,3.1vh,42px) clamp(34px,3.6vw,58px) 38px !important;
    justify-content:flex-start !important;
  }
  body.page-depannage .dep-copy .kicker{
    margin:0 0 clamp(8px,1.3vh,16px) !important;
  }
  body.page-depannage .dep-copy h1{
    margin:0 auto clamp(20px,3vh,34px) !important;
    width:100% !important;
    text-align:center !important;
    font-size:clamp(43px,4.1vw,60px) !important;
  }
  body.page-depannage .dep-copy p{
    margin:0 !important;
    font-size:clamp(17px,1.45vw,20px) !important;
    line-height:1.5 !important;
  }
  body.page-depannage .checks{
    margin-top:clamp(15px,2.2vh,26px) !important;
  }

  /* Groupe de boutons centré et descendu à ~1 cm du bas du carré bleu. */
  body.page-depannage .dep-actions{
    width:100% !important;
    margin-top:auto !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:clamp(18px,2vw,30px) !important;
    flex-wrap:nowrap !important;
  }
  body.page-depannage .dep-actions .btn{
    min-width:0 !important;
    flex:0 1 235px !important;
    text-align:center !important;
  }

  /* Bande au pied exact de la photo et incluse dans le premier écran. */
  body.page-depannage .dep-strip{
    height:104px !important;
    min-height:104px !important;
    margin:0 !important;
  }
  body.page-depannage .dep-strip > div{
    box-sizing:border-box !important;
    height:104px !important;
    padding:10px 8px 8px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

/* Écrans de bureau plus étroits : même principe, dimensions resserrées pour
   préserver la bande Électricité / Plomberie dans le premier écran. */
@media (min-width:981px) and (max-width:1180px){
  body.page-depannage .navbar .navlinks{right:38px !important;}
  body.page-depannage .brand{
    left:calc(20.5% - 112px) !important;
    width:224px !important;
  }
  body.page-depannage .brand img{
    width:224px !important;
    max-width:224px !important;
  }
  body.page-depannage .dep-hero{
    grid-template-columns:41% 59% !important;
    height:calc(100svh - 118px - 96px) !important;
    min-height:0 !important;
  }
  body.page-depannage .dep-copy{
    padding:20px 28px 38px !important;
    justify-content:flex-start !important;
  }
  body.page-depannage .dep-copy h1{
    text-align:center !important;
    font-size:clamp(38px,4.6vw,50px) !important;
    margin:0 auto 18px !important;
  }
  body.page-depannage .dep-copy p{
    font-size:16px !important;
    line-height:1.4 !important;
  }
  body.page-depannage .checks{margin-top:12px !important;}
  body.page-depannage .dep-actions{
    margin-top:auto !important;
    justify-content:center !important;
    gap:12px !important;
    flex-wrap:nowrap !important;
  }
  body.page-depannage .dep-actions .btn{
    min-width:0 !important;
    padding-left:14px !important;
    padding-right:14px !important;
    font-size:14px !important;
  }
  body.page-depannage .dep-strip,
  body.page-depannage .dep-strip > div{
    height:96px !important;
    min-height:96px !important;
  }
  body.page-depannage .dep-strip > div{padding:8px 5px !important;}
  body.page-depannage .dep-strip span{font-size:24px !important;margin-bottom:3px !important;}
}


/* ============================================================
   DÉPANNAGE — AJUSTEMENT 02 — 04/09/2026
   ============================================================ */
@media (min-width:981px){
  /* Barre pleine largeur : Contact à ~1 cm du bord droit de l'écran,
     comme sur l'accueil. Suppression du max-width qui la recentrait. */
  body.page-depannage .navbar{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  body.page-depannage .navbar .navlinks{
    right:38px !important;
    left:auto !important;
  }

  /* Le centre VISUEL de REPASY est exactement sur le centre du bloc bleu.
     Le bloc bleu fait 40% de la largeur : son axe est donc à 20vw. */
  body.page-depannage .brand{
    left:20vw !important;
    transform:translateX(-50%) !important;
    width:300px !important;
  }
  body.page-depannage .brand img{
    width:300px !important;
    max-width:300px !important;
  }

  /* On réserve volontairement un peu plus que la hauteur de la bande blanche :
     elle reste ainsi visible même sur un écran moins haut. */
  body.page-depannage .dep-hero{
    grid-template-columns:40% 60% !important;
    height:calc(100dvh - 118px - 124px) !important;
    min-height:0 !important;
  }

  /* Même texte, mais étalé verticalement dans le carré bleu. */
  body.page-depannage .dep-copy{
    min-height:0 !important;
    padding-top:clamp(25px,3.2vh,40px) !important;
    padding-bottom:38px !important;
  }
  body.page-depannage .dep-copy h1{
    margin-bottom:clamp(34px,5vh,58px) !important;
  }
  body.page-depannage .dep-copy p{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }
  body.page-depannage .checks{
    margin-top:clamp(34px,5vh,58px) !important;
  }

  /* Les boutons restent dans la position validée, au bas du carré. */
  body.page-depannage .dep-actions{
    margin-top:auto !important;
  }

  body.page-depannage .dep-strip{
    height:104px !important;
    min-height:104px !important;
  }
}

/* Écrans moins hauts : on conserve impérativement la bande prestations
   dans le premier écran tout en gardant le texte lisible. */
@media (min-width:981px) and (max-height:800px){
  body.page-depannage .dep-hero{
    height:calc(100dvh - 118px - 116px) !important;
  }
  body.page-depannage .dep-copy{
    padding-top:18px !important;
    padding-bottom:30px !important;
  }
  body.page-depannage .dep-copy .kicker{
    margin-bottom:6px !important;
  }
  body.page-depannage .dep-copy h1{
    font-size:clamp(35px,3.5vw,48px) !important;
    line-height:1.02 !important;
    margin-bottom:24px !important;
  }
  body.page-depannage .dep-copy p{
    font-size:15px !important;
    line-height:1.35 !important;
  }
  body.page-depannage .checks{
    margin-top:24px !important;
  }
  body.page-depannage .dep-strip,
  body.page-depannage .dep-strip > div{
    height:96px !important;
    min-height:96px !important;
  }
}

/* Bureau intermédiaire : même axe géométrique, toujours calculé sur le bloc bleu. */
@media (min-width:981px) and (max-width:1180px){
  body.page-depannage .brand{
    left:20.5vw !important;
    transform:translateX(-50%) !important;
  }
  body.page-depannage .navbar .navlinks{
    right:38px !important;
  }
}


/* ============================================================
   DÉPANNAGE — AJUSTEMENT 03 — composition + écrans moins hauts
   ============================================================ */
@media (min-width:981px){
  /* Le premier écran est piloté par la hauteur disponible :
     hero + bande prestations restent dans le viewport. */
  body.page-depannage .dep-hero{
    height:calc(100svh - 118px - 98px) !important;
    min-height:0 !important;
    max-height:none !important;
  }
  body.page-depannage .dep-strip{
    height:98px !important;
    min-height:98px !important;
  }

  /* On utilise toute la hauteur du panneau sans changer les textes. */
  body.page-depannage .dep-copy{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    padding-top:clamp(18px,2.8vh,34px) !important;
    padding-bottom:clamp(18px,2.5vh,30px) !important;
  }

  /* "Une panne ?" puis une vraie respiration avant "On s'en charge." */
  body.page-depannage .dep-copy h1{
    line-height:1.08 !important;
    margin:0 0 clamp(30px,4.8vh,54px) !important;
  }
  body.page-depannage .dep-copy h1 br{
    display:block !important;
    content:"" !important;
    margin-bottom:clamp(14px,2.1vh,24px) !important;
  }

  /* Le paragraphe descend davantage sous le titre. */
  body.page-depannage .dep-copy p{
    margin:0 !important;
  }

  /* Les trois engagements sont franchement détachés du paragraphe,
     mais gardent 2–3 cm visuels avant les boutons. */
  body.page-depannage .checks{
    margin-top:clamp(38px,6vh,68px) !important;
    margin-bottom:clamp(20px,3vh,32px) !important;
  }

  body.page-depannage .dep-actions{
    margin-top:auto !important;
    margin-bottom:0 !important;
  }
}

/* Écran de bureau moins haut : on compresse uniquement les espaces
   nécessaires afin que les boutons ET la bande prestations restent visibles. */
@media (min-width:981px) and (max-height:760px){
  body.page-depannage .dep-hero{
    height:calc(100svh - 108px - 88px) !important;
  }
  body.page-depannage .navbar{
    height:108px !important;
    min-height:108px !important;
  }
  body.page-depannage .brand{
    top:7px !important;
    height:86px !important;
  }
  body.page-depannage .brand img{
    width:278px !important;
    max-width:278px !important;
  }
  body.page-depannage .dep-copy{
    padding-top:12px !important;
    padding-bottom:14px !important;
  }
  body.page-depannage .dep-copy .kicker{
    margin-bottom:4px !important;
  }
  body.page-depannage .dep-copy h1{
    font-size:clamp(30px,3.1vw,42px) !important;
    line-height:1 !important;
    margin-bottom:17px !important;
  }
  body.page-depannage .dep-copy h1 br{
    margin-bottom:10px !important;
  }
  body.page-depannage .dep-copy p{
    font-size:14px !important;
    line-height:1.28 !important;
  }
  body.page-depannage .checks{
    margin-top:20px !important;
    margin-bottom:13px !important;
    gap:6px !important;
  }
  body.page-depannage .dep-actions{
    gap:10px !important;
  }
  body.page-depannage .dep-actions a{
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
  body.page-depannage .dep-strip,
  body.page-depannage .dep-strip > div{
    height:88px !important;
    min-height:88px !important;
  }
}

/* Très faible hauteur de bureau : priorité absolue au premier écran complet. */
@media (min-width:981px) and (max-height:650px){
  body.page-depannage .navbar{
    height:94px !important;
    min-height:94px !important;
  }
  body.page-depannage .brand{
    top:4px !important;
    height:76px !important;
  }
  body.page-depannage .brand img{
    width:250px !important;
    max-width:250px !important;
  }
  body.page-depannage .dep-hero{
    height:calc(100svh - 94px - 78px) !important;
  }
  body.page-depannage .dep-copy{
    padding-top:8px !important;
    padding-bottom:9px !important;
  }
  body.page-depannage .dep-copy h1{
    font-size:30px !important;
    margin-bottom:10px !important;
  }
  body.page-depannage .dep-copy h1 br{
    margin-bottom:6px !important;
  }
  body.page-depannage .dep-copy p{
    font-size:13px !important;
    line-height:1.2 !important;
  }
  body.page-depannage .checks{
    margin-top:11px !important;
    margin-bottom:8px !important;
    font-size:12px !important;
  }
  body.page-depannage .dep-actions a{
    padding:8px 11px !important;
    font-size:12px !important;
  }
  body.page-depannage .dep-strip,
  body.page-depannage .dep-strip > div{
    height:78px !important;
    min-height:78px !important;
  }
}


/* ============================================================
   DÉPANNAGE — CARRÉ BLEU : correction structurelle
   Le texte reste identique ; seule sa composition change.
   ============================================================ */
@media (min-width:981px){
  body.page-depannage .dep-copy{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-rows:auto auto auto 1fr auto auto !important;
    align-content:stretch !important;
    justify-items:center !important;
    text-align:center !important;
    padding:clamp(16px,2.3vh,28px) clamp(28px,3.2vw,52px) clamp(14px,2vh,24px) !important;
    overflow:hidden !important;
  }

  body.page-depannage .dep-copy .kicker{
    justify-self:start !important;
    text-align:left !important;
    width:100% !important;
    margin:0 0 clamp(8px,1.2vh,14px) !important;
  }

  body.page-depannage .dep-copy h1{
    width:100% !important;
    margin:0 !important;
    text-align:center !important;
    line-height:1 !important;
  }
  body.page-depannage .dep-title-line{
    display:block !important;
  }
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:clamp(18px,2.8vh,30px) !important;
  }

  /* REPASY intervient... descend franchement sous le titre. */
  body.page-depannage .dep-copy > p{
    align-self:start !important;
    max-width:620px !important;
    margin:clamp(30px,4.5vh,52px) auto 0 !important;
    text-align:center !important;
  }

  /* L'espace flexible absorbe les différences de hauteur d'écran.
     Les engagements restent ainsi bas dans le carré. */
  body.page-depannage .checks{
    grid-row:5 !important;
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:clamp(16px,2vw,30px) !important;
    margin:0 0 clamp(22px,3.2vh,34px) !important;
    text-align:center !important;
  }

  body.page-depannage .dep-actions{
    grid-row:6 !important;
    justify-self:center !important;
    align-self:end !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:14px !important;
    margin:0 !important;
    padding:0 !important;
  }
}

/* Hauteur de bureau réduite :
   on garde les boutons ENTIERS et visibles, sans rogner leur texte. */
@media (min-width:981px) and (max-height:760px){
  body.page-depannage .dep-copy{
    padding:9px 24px 10px !important;
  }
  body.page-depannage .dep-copy .kicker{
    font-size:12px !important;
    margin-bottom:4px !important;
  }
  body.page-depannage .dep-copy h1{
    font-size:clamp(27px,2.8vw,38px) !important;
  }
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:10px !important;
  }
  body.page-depannage .dep-copy > p{
    font-size:13px !important;
    line-height:1.25 !important;
    margin-top:14px !important;
  }
  body.page-depannage .checks{
    gap:12px !important;
    margin-bottom:10px !important;
    font-size:12px !important;
    line-height:1.15 !important;
  }
  body.page-depannage .dep-actions{
    gap:9px !important;
  }
  body.page-depannage .dep-actions .btn{
    min-width:0 !important;
    padding:9px 13px !important;
    font-size:12px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
  }
}

/* Très petit écran de bureau : le contenu se compacte, mais ne se coupe pas. */
@media (min-width:981px) and (max-height:650px){
  body.page-depannage .dep-copy{
    padding:6px 20px 7px !important;
  }
  body.page-depannage .dep-copy h1{
    font-size:26px !important;
  }
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:7px !important;
  }
  body.page-depannage .dep-copy > p{
    font-size:12px !important;
    line-height:1.16 !important;
    margin-top:9px !important;
  }
  body.page-depannage .checks{
    font-size:11px !important;
    gap:9px !important;
    margin-bottom:7px !important;
  }
  body.page-depannage .dep-actions .btn{
    padding:7px 10px !important;
    font-size:11px !important;
  }
}


/* ============================================================
   DÉPANNAGE — AJUSTEMENT 05
   Répartition verticale + correction écrans de bureau bas
   ============================================================ */
@media (min-width:981px){
  body.page-depannage .dep-copy{
    /* On garde le contenu centré, mais on décale le groupe titre vers le bas. */
    padding-top:clamp(25px,3.5vh,40px) !important;
  }

  body.page-depannage .dep-copy h1{
    transform:translateY(10px) !important;
  }

  /* Phrase centrale légèrement renforcée et placée entre titre et engagements. */
  body.page-depannage .dep-copy > p{
    font-size:clamp(16px,1.18vw,18px) !important;
    line-height:1.48 !important;
    transform:translateY(8px) !important;
  }

  /* Remonter légèrement les 3 engagements. */
  body.page-depannage .checks{
    transform:translateY(-10px) !important;
  }
}

/* IMPORTANT :
   sur un écran de bureau peu haut, on ne cherche plus à faire entrer la bande
   prestations dans le viewport en écrasant le hero. On donne au carré bleu
   une hauteur minimale suffisante pour que les boutons soient TOUJOURS entiers.
   La bande Électricité/Plomberie peut alors apparaître juste sous le pli. */
@media (min-width:981px) and (max-height:800px){
  body.page-depannage .navbar{
    height:104px !important;
    min-height:104px !important;
  }
  body.page-depannage .dep-hero{
    height:auto !important;
    min-height:535px !important;
  }
  body.page-depannage .dep-copy{
    min-height:535px !important;
    overflow:visible !important;
    padding:18px 28px 18px !important;
  }
  body.page-depannage .dep-copy h1{
    transform:translateY(8px) !important;
    font-size:clamp(31px,3.2vw,43px) !important;
  }
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:14px !important;
  }
  body.page-depannage .dep-copy > p{
    font-size:15px !important;
    line-height:1.38 !important;
    margin-top:30px !important;
    transform:none !important;
  }
  body.page-depannage .checks{
    font-size:13px !important;
    line-height:1.2 !important;
    transform:translateY(-8px) !important;
    margin-bottom:22px !important;
  }
  body.page-depannage .dep-actions{
    margin-top:0 !important;
  }
  body.page-depannage .dep-actions .btn{
    padding:12px 16px !important;
    font-size:13px !important;
    line-height:1.2 !important;
  }
  body.page-depannage .dep-strip,
  body.page-depannage .dep-strip > div{
    height:96px !important;
    min-height:96px !important;
  }
}

/* Très faible hauteur : même principe, jamais de boutons rognés. */
@media (min-width:981px) and (max-height:650px){
  body.page-depannage .dep-hero,
  body.page-depannage .dep-copy{
    min-height:510px !important;
  }
  body.page-depannage .dep-copy{
    padding:14px 24px 16px !important;
  }
  body.page-depannage .dep-copy h1{
    font-size:30px !important;
  }
  body.page-depannage .dep-copy > p{
    font-size:14px !important;
    margin-top:24px !important;
  }
  body.page-depannage .checks{
    font-size:12px !important;
    margin-bottom:18px !important;
  }
  body.page-depannage .dep-actions .btn{
    padding:11px 14px !important;
    font-size:12px !important;
  }
}


/* ============================================================
   DÉPANNAGE — AJUSTEMENT 06
   Même logique responsive que l'accueil : le premier écran
   se calcule sur la hauteur réellement disponible.
   ============================================================ */
@media (min-width:981px){
  body.page-depannage .navbar{
    height:118px !important;
    min-height:118px !important;
  }

  /* Header + hero + bande prestations = hauteur visible de l'écran. */
  body.page-depannage .dep-hero{
    height:calc(100svh - 118px - 104px) !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
  }
  body.page-depannage .dep-copy{
    height:100% !important;
    min-height:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-rows:auto auto auto 1fr auto auto !important;
    justify-items:center !important;
    text-align:center !important;
    padding:clamp(14px,2.6vh,30px) clamp(24px,3vw,48px) clamp(12px,2vh,24px) !important;
  }

  body.page-depannage .dep-copy .kicker{
    justify-self:start !important;
    width:100% !important;
    text-align:left !important;
    margin:0 0 clamp(6px,1vh,12px) !important;
  }

  /* Titre légèrement plus bas. */
  body.page-depannage .dep-copy h1{
    margin:clamp(6px,1.2vh,14px) 0 0 !important;
    transform:none !important;
    text-align:center !important;
  }
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:clamp(16px,2.5vh,28px) !important;
  }

  /* Phrase centrale : descendue d'une ligne et légèrement agrandie. */
  body.page-depannage .dep-copy > p{
    align-self:start !important;
    max-width:620px !important;
    margin:clamp(28px,4.8vh,52px) auto 0 !important;
    transform:none !important;
    font-size:clamp(17px,1.25vw,19px) !important;
    line-height:1.45 !important;
    text-align:center !important;
  }

  /* Engagements bas dans le panneau, juste au-dessus des boutons. */
  body.page-depannage .checks{
    grid-row:5 !important;
    align-self:end !important;
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
    margin:0 0 clamp(18px,2.7vh,30px) !important;
    transform:none !important;
    font-size:clamp(13px,.95vw,15px) !important;
  }

  body.page-depannage .dep-actions{
    grid-row:6 !important;
    align-self:end !important;
    justify-self:center !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.page-depannage .dep-strip,
  body.page-depannage .dep-strip > div{
    height:104px !important;
    min-height:104px !important;
  }
}

/* ÉCRANS DE BUREAU MOINS HAUTS :
   contrairement à la version précédente, aucune hauteur minimale ne pousse
   les boutons sous le viewport. Tout se réduit proportionnellement. */
@media (min-width:981px) and (max-height:800px){
  body.page-depannage .navbar{
    height:96px !important;
    min-height:96px !important;
  }
  body.page-depannage .brand{
    top:4px !important;
    height:84px !important;
  }
  body.page-depannage .brand img{
    width:265px !important;
    max-width:265px !important;
  }
  body.page-depannage .dep-hero{
    height:calc(100svh - 96px - 86px) !important;
    min-height:0 !important;
  }
  body.page-depannage .dep-copy{
    min-height:0 !important;
    height:100% !important;
    padding:8px 22px 9px !important;
  }
  body.page-depannage .dep-copy .kicker{
    font-size:11px !important;
    margin-bottom:2px !important;
  }
  body.page-depannage .dep-copy h1{
    font-size:clamp(27px,3vw,38px) !important;
    line-height:1 !important;
    margin-top:2px !important;
  }
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:8px !important;
  }
  body.page-depannage .dep-copy > p{
    margin-top:12px !important;
    font-size:13px !important;
    line-height:1.22 !important;
  }
  body.page-depannage .checks{
    margin-bottom:8px !important;
    gap:10px !important;
    font-size:11px !important;
    line-height:1.1 !important;
  }
  body.page-depannage .dep-actions{
    gap:8px !important;
  }
  body.page-depannage .dep-actions .btn{
    padding:8px 11px !important;
    font-size:11px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }
  body.page-depannage .dep-strip,
  body.page-depannage .dep-strip > div{
    height:86px !important;
    min-height:86px !important;
  }
  body.page-depannage .dep-strip > div{
    padding:5px 3px !important;
    font-size:12px !important;
  }
  body.page-depannage .dep-strip span{
    font-size:21px !important;
    margin-bottom:2px !important;
  }
}

/* Très faible hauteur : priorité à la visibilité complète des boutons
   et de la bande de prestations. */
@media (min-width:981px) and (max-height:650px){
  body.page-depannage .navbar{
    height:82px !important;
    min-height:82px !important;
  }
  body.page-depannage .brand{
    height:72px !important;
    top:2px !important;
  }
  body.page-depannage .brand img{
    width:230px !important;
    max-width:230px !important;
  }
  body.page-depannage .dep-hero{
    height:calc(100svh - 82px - 74px) !important;
  }
  body.page-depannage .dep-copy{
    padding:5px 18px 6px !important;
  }
  body.page-depannage .dep-copy h1{
    font-size:24px !important;
  }
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:5px !important;
  }
  body.page-depannage .dep-copy > p{
    margin-top:7px !important;
    font-size:11px !important;
    line-height:1.12 !important;
  }
  body.page-depannage .checks{
    margin-bottom:5px !important;
    font-size:10px !important;
    gap:7px !important;
  }
  body.page-depannage .dep-actions .btn{
    padding:6px 9px !important;
    font-size:10px !important;
  }
  body.page-depannage .dep-strip,
  body.page-depannage .dep-strip > div{
    height:74px !important;
    min-height:74px !important;
  }
}


/* ============================================================
   DÉPANNAGE — FORMAT DU PREMIER ÉCRAN ALIGNÉ SUR L'ACCUEIL
   ============================================================ */
@media (min-width:981px){
  /* Même logique que l'accueil : le bloc principal occupe l'écran disponible,
     mais les boutons restent toujours dans la zone visible. */
  body.page-depannage .dep-hero{
    height:calc(100svh - 118px - 104px) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body.page-depannage .dep-copy{
    height:100% !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    box-sizing:border-box !important;
    padding:clamp(18px,2.8vh,30px) clamp(28px,3vw,48px) clamp(18px,2.8vh,28px) !important;
  }

  body.page-depannage .dep-copy > p{
    margin-top:clamp(28px,4.5vh,48px) !important;
    font-size:clamp(17px,1.25vw,19px) !important;
  }

  /* Les engagements restent juste au-dessus des boutons. */
  body.page-depannage .checks{
    margin-top:auto !important;
    margin-bottom:clamp(18px,2.6vh,28px) !important;
  }

  /* Boutons mêmes proportions visuelles que ceux de l'accueil. */
  body.page-depannage .dep-actions{
    margin-top:0 !important;
    display:flex !important;
    gap:16px !important;
  }

  body.page-depannage .dep-actions .btn{
    min-height:44px !important;
    padding:12px 20px !important;
    font-size:14px !important;
    line-height:1.2 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
  }
}

/* Petit écran de bureau :
   on réduit les espaces, mais jamais la hauteur des boutons. */
@media (min-width:981px) and (max-height:800px){
  body.page-depannage .dep-hero{
    height:calc(100svh - 96px - 86px) !important;
  }

  body.page-depannage .dep-copy{
    padding:10px 24px 14px !important;
  }

  body.page-depannage .dep-copy > p{
    margin-top:18px !important;
    font-size:14px !important;
    line-height:1.28 !important;
  }

  body.page-depannage .checks{
    margin-bottom:14px !important;
    font-size:12px !important;
  }

  body.page-depannage .dep-actions .btn{
    min-height:42px !important;
    padding:10px 16px !important;
    font-size:13px !important;
  }
}

/* Très faible hauteur :
   priorité absolue à l'affichage COMPLET des boutons. */
@media (min-width:981px) and (max-height:650px){
  body.page-depannage .dep-hero{
    height:calc(100svh - 82px - 74px) !important;
  }

  body.page-depannage .dep-copy{
    padding:8px 20px 12px !important;
  }

  body.page-depannage .dep-copy > p{
    margin-top:12px !important;
    font-size:12px !important;
  }

  body.page-depannage .checks{
    margin-bottom:10px !important;
    font-size:11px !important;
  }

  body.page-depannage .dep-actions .btn{
    min-height:40px !important;
    padding:9px 14px !important;
    font-size:12px !important;
  }
}


/* ============================================================
   DÉPANNAGE — AJUSTEMENT 08
   On abandonne les calculs basés sur la HAUTEUR d'écran.
   Comme l'accueil, le premier visuel garde ses proportions
   en fonction de la LARGEUR : même composition d'un écran à l'autre.
   ============================================================ */
@media (min-width:981px){
  body.page-depannage .navbar{
    height:118px !important;
    min-height:118px !important;
  }

  /* 1536x1024 = ratio 3:2, comme le visuel d'accueil.
     La hauteur dépend donc de la largeur, pas de la hauteur du moniteur. */
  body.page-depannage .dep-hero{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:3 / 1.16 !important;
    grid-template-columns:40% 60% !important;
    overflow:hidden !important;
  }

  body.page-depannage .dep-copy{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:center !important;
    text-align:center !important;
    padding:clamp(22px,2.2vw,40px) clamp(30px,3vw,54px) clamp(20px,2vw,36px) !important;
  }

  body.page-depannage .dep-copy .kicker{
    align-self:flex-start !important;
    width:100% !important;
    text-align:left !important;
    margin:0 0 clamp(10px,1vw,16px) !important;
  }

  body.page-depannage .dep-copy h1{
    margin:clamp(8px,.7vw,14px) 0 0 !important;
    transform:none !important;
    text-align:center !important;
    font-size:clamp(42px,3.7vw,60px) !important;
  }
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:clamp(18px,1.7vw,28px) !important;
  }

  body.page-depannage .dep-copy > p{
    max-width:620px !important;
    margin:clamp(34px,3vw,52px) auto 0 !important;
    transform:none !important;
    font-size:clamp(17px,1.25vw,20px) !important;
    line-height:1.45 !important;
    text-align:center !important;
  }

  /* Le bas du carré est construit comme un bloc fixe :
     engagements puis vrais boutons complets. */
  body.page-depannage .checks{
    margin:auto 0 clamp(24px,1.8vw,32px) !important;
    transform:none !important;
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    gap:clamp(18px,2vw,32px) !important;
    font-size:clamp(13px,1vw,15px) !important;
    text-align:center !important;
  }

  body.page-depannage .dep-actions{
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:16px !important;
    flex-shrink:0 !important;
  }

  body.page-depannage .dep-actions .btn{
    min-height:48px !important;
    padding:13px 20px !important;
    font-size:14px !important;
    line-height:1.2 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    flex-shrink:0 !important;
  }

  body.page-depannage .dep-strip,
  body.page-depannage .dep-strip > div{
    height:104px !important;
    min-height:104px !important;
  }
}

/* Seule la LARGEUR déclenche une adaptation, exactement comme un responsive
   classique. Plus aucun max-height : changer de moniteur ne tasse plus le contenu. */
@media (min-width:981px) and (max-width:1280px){
  body.page-depannage .dep-hero{
    aspect-ratio:3 / 1.22 !important;
  }
  body.page-depannage .dep-copy{
    padding:18px 28px 20px !important;
  }
  body.page-depannage .dep-copy h1{
    font-size:clamp(36px,3.6vw,48px) !important;
  }
  body.page-depannage .dep-copy > p{
    margin-top:24px !important;
    font-size:16px !important;
  }
  body.page-depannage .checks{
    margin-bottom:18px !important;
    gap:14px !important;
    font-size:12px !important;
  }
  body.page-depannage .dep-actions .btn{
    min-height:44px !important;
    padding:11px 16px !important;
    font-size:13px !important;
  }
}


/* ============================================================
   DÉPANNAGE — AJUSTEMENT 09
   Le gabarit du premier écran reprend le comportement de l'accueil :
   tout le premier ensemble tient dans 100svh, bande blanche comprise.
   ============================================================ */
@media (min-width:981px){
  body.page-depannage{
    --dep-header:118px;
    --dep-strip:92px;
  }

  body.page-depannage .navbar{
    height:var(--dep-header) !important;
    min-height:var(--dep-header) !important;
  }

  /* Le bloc bleu + la photo sont volontairement moins hauts. */
  body.page-depannage .dep-hero{
    width:100% !important;
    height:calc(100svh - var(--dep-header) - var(--dep-strip)) !important;
    min-height:430px !important;
    max-height:650px !important;
    aspect-ratio:auto !important;
    grid-template-columns:40% 60% !important;
    overflow:hidden !important;
  }

  /* Photo légèrement "dézoomée" et recentrée. */
  body.page-depannage .dep-image{
    background-size:cover !important;
    background-position:center 48% !important;
  }
  body.page-depannage .dep-image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 48% !important;
    transform:scale(.94) !important;
  }

  body.page-depannage .dep-copy{
    height:100% !important;
    min-height:0 !important;
    padding:clamp(18px,2vh,28px) clamp(28px,3vw,48px) clamp(14px,1.7vh,22px) !important;
  }

  body.page-depannage .dep-copy h1{
    font-size:clamp(38px,3.4vw,55px) !important;
  }

  body.page-depannage .dep-copy > p{
    margin-top:clamp(24px,3vh,38px) !important;
    font-size:clamp(16px,1.15vw,18px) !important;
  }

  body.page-depannage .checks{
    margin-top:auto !important;
    margin-bottom:clamp(15px,2vh,24px) !important;
  }

  body.page-depannage .dep-actions{
    flex-shrink:0 !important;
  }
  body.page-depannage .dep-actions .btn{
    min-height:46px !important;
    padding:12px 18px !important;
    font-size:14px !important;
  }

  /* Les boutons blancs de prestations font partie du premier écran. */
  body.page-depannage .dep-strip,
  body.page-depannage .dep-strip > div{
    height:var(--dep-strip) !important;
    min-height:var(--dep-strip) !important;
  }
}

/* Sur les écrans moins hauts, on réduit le VISUEL et les espaces,
   pas les boutons : la bande blanche reste visible. */
@media (min-width:981px) and (max-height:760px){
  body.page-depannage{
    --dep-header:92px;
    --dep-strip:78px;
  }
  body.page-depannage .brand{
    height:80px !important;
    top:3px !important;
  }
  body.page-depannage .brand img{
    width:250px !important;
    max-width:250px !important;
  }
  body.page-depannage .dep-hero{
    min-height:0 !important;
    max-height:none !important;
  }
  body.page-depannage .dep-copy{
    padding:8px 22px 9px !important;
  }
  body.page-depannage .dep-copy .kicker{
    margin-bottom:2px !important;
    font-size:11px !important;
  }
  body.page-depannage .dep-copy h1{
    font-size:clamp(25px,2.7vw,36px) !important;
    margin-top:1px !important;
  }
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:7px !important;
  }
  body.page-depannage .dep-copy > p{
    margin-top:11px !important;
    font-size:13px !important;
    line-height:1.2 !important;
  }
  body.page-depannage .checks{
    margin-bottom:8px !important;
    font-size:11px !important;
    line-height:1.1 !important;
  }
  body.page-depannage .dep-actions .btn{
    min-height:40px !important;
    padding:9px 13px !important;
    font-size:12px !important;
  }
  body.page-depannage .dep-strip > div{
    padding:4px 2px !important;
    font-size:11px !important;
  }
}


/* ============================================================
   DÉPANNAGE — CALQUE TECHNIQUE DU PREMIER ÉCRAN DE L'ACCUEIL
   Les photos montrent que l'accueil fonctionne avec :
   hero = 100svh - 82px, puis bande = 82px.
   On applique exactement cette enveloppe à Dépannage.
   ============================================================ */
@media (min-width:981px){
  body.page-depannage{
    --dep-head:96px;
    --dep-bottom:82px;
  }

  body.page-depannage .header,
  body.page-depannage .navbar{
    height:var(--dep-head) !important;
    min-height:var(--dep-head) !important;
  }

  /* Exactement la même hauteur globale que le hero Accueil. */
  body.page-depannage .dep-hero{
    height:calc(100svh - var(--dep-bottom)) !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    grid-template-columns:40% 60% !important;
    overflow:hidden !important;
  }

  /* La bande blanche remplace la barre coordonnées de l'accueil : 82 px. */
  body.page-depannage .dep-strip,
  body.page-depannage .dep-strip > div{
    height:var(--dep-bottom) !important;
    min-height:var(--dep-bottom) !important;
  }

  /* Le contenu bleu se répartit réellement sur toute la hauteur disponible. */
  body.page-depannage .dep-copy{
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    padding:clamp(18px,2.4vh,30px) clamp(28px,3vw,48px) clamp(18px,2.4vh,28px) !important;
  }
  body.page-depannage .dep-copy .kicker{
    align-self:flex-start !important;
    width:100% !important;
    text-align:left !important;
    margin-bottom:clamp(8px,1.2vh,14px) !important;
  }
  body.page-depannage .dep-copy h1{
    transform:none !important;
    margin:clamp(8px,1vh,14px) 0 0 !important;
    font-size:clamp(38px,3.4vw,54px) !important;
  }
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:clamp(17px,2.3vh,26px) !important;
  }
  body.page-depannage .dep-copy > p{
    transform:none !important;
    max-width:620px !important;
    margin:clamp(28px,4vh,46px) auto 0 !important;
    font-size:clamp(16px,1.2vw,19px) !important;
    line-height:1.42 !important;
  }
  body.page-depannage .checks{
    transform:none !important;
    margin:auto 0 clamp(20px,2.8vh,30px) !important;
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
  }
  body.page-depannage .dep-actions{
    margin:0 !important;
    flex-shrink:0 !important;
    justify-content:center !important;
  }
  body.page-depannage .dep-actions .btn{
    min-height:46px !important;
    padding:12px 18px !important;
    font-size:14px !important;
    line-height:1.2 !important;
    flex-shrink:0 !important;
  }

  /* Photo : on garde le même cadre, mais on voit un peu plus du sujet. */
  body.page-depannage .dep-image{
    background-size:cover !important;
    background-position:center center !important;
  }
}

/* Sur un portable de bureau, on garde LA MÊME ENVELOPPE.
   On ne change plus les hauteurs selon max-height : c'était la cause
   des différences et des boutons coupés. Seule la typo s'assouplit. */
@media (min-width:981px) and (max-width:1280px){
  body.page-depannage .dep-copy{
    padding:14px 22px 16px !important;
  }
  body.page-depannage .dep-copy h1{
    font-size:clamp(31px,3.2vw,42px) !important;
  }
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:12px !important;
  }
  body.page-depannage .dep-copy > p{
    margin-top:20px !important;
    font-size:14px !important;
    line-height:1.3 !important;
  }
  body.page-depannage .checks{
    margin-bottom:14px !important;
    gap:12px !important;
    font-size:12px !important;
  }
  body.page-depannage .dep-actions .btn{
    min-height:44px !important;
    padding:11px 15px !important;
    font-size:13px !important;
  }
  body.page-depannage .dep-strip > div{
    padding:5px 3px !important;
    font-size:12px !important;
  }
}

/* Annulation explicite des anciennes règles basées sur la hauteur d'écran. */
@media (min-width:981px) and (max-height:800px),
       (min-width:981px) and (max-height:760px),
       (min-width:981px) and (max-height:650px){
  body.page-depannage .header,
  body.page-depannage .navbar{
    height:96px !important;
    min-height:96px !important;
  }
  body.page-depannage .dep-hero{
    height:calc(100svh - 82px) !important;
    min-height:0 !important;
    max-height:none !important;
  }
  body.page-depannage .dep-strip,
  body.page-depannage .dep-strip > div{
    height:82px !important;
    min-height:82px !important;
  }
  body.page-depannage .dep-actions .btn{
    min-height:44px !important;
  }
}

/* ============================================================
   DÉPANNAGE — GABARIT RESPONSIVE ALIGNÉ SUR L’ACCUEIL (11)
   Le header est hors flux comme sur l’Accueil. Le premier ensemble
   hero + bande prestations occupe exactement 100svh.
   ============================================================ */
@media (min-width:981px){
  body.page-depannage{
    --dep-head:96px;
    --dep-bottom:82px;
  }

  body.page-depannage .header{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:var(--dep-head) !important;
    min-height:var(--dep-head) !important;
    z-index:100 !important;
  }
  body.page-depannage .navbar{
    height:var(--dep-head) !important;
    min-height:var(--dep-head) !important;
  }

  body.page-depannage main{
    position:relative !important;
  }
  body.page-depannage .dep-hero{
    height:calc(100svh - var(--dep-bottom)) !important;
    min-height:0 !important;
    max-height:none !important;
    grid-template-columns:40% 60% !important;
    overflow:hidden !important;
  }

  /* Le contenu commence sous la navigation superposée. */
  body.page-depannage .dep-copy{
    padding-top:calc(var(--dep-head) + clamp(12px,1.8vh,24px)) !important;
    padding-bottom:clamp(14px,2vh,24px) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body.page-depannage .dep-strip,
  body.page-depannage .dep-strip > div{
    height:var(--dep-bottom) !important;
    min-height:var(--dep-bottom) !important;
  }

  body.page-depannage .scroll-cue{display:none !important;}
}

/* Écrans de bureau moins hauts : même enveloppe, contenu seulement assoupli. */
@media (min-width:981px) and (max-height:760px){
  body.page-depannage .dep-copy{
    padding-top:calc(var(--dep-head) + 8px) !important;
    padding-bottom:8px !important;
  }
  body.page-depannage .dep-copy .kicker{margin-bottom:2px !important;}
  body.page-depannage .dep-copy h1{
    margin-top:2px !important;
    font-size:clamp(28px,3vw,40px) !important;
  }
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{margin-top:9px !important;}
  body.page-depannage .dep-copy > p{
    margin-top:14px !important;
    font-size:13px !important;
    line-height:1.25 !important;
  }
  body.page-depannage .checks{
    margin-bottom:10px !important;
    font-size:11px !important;
  }
  body.page-depannage .dep-actions .btn{
    min-height:40px !important;
    padding:9px 13px !important;
    font-size:12px !important;
  }
}

/* ============================================================
   DÉPANNAGE — AJUSTEMENT FINAL DU CONTENU DU CARRÉ BLEU (12)
   IMPORTANT : aucune modification du header, de la photo ou de la
   bande blanche. On ne retouche que les éléments internes .dep-copy.
   ============================================================ */
@media (min-width:981px){
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:clamp(20px,2.7vh,30px) !important;
  }
  body.page-depannage .dep-copy > p{
    margin-top:clamp(36px,5.2vh,58px) !important;
    font-size:clamp(17px,1.28vw,20px) !important;
    line-height:1.45 !important;
  }
  body.page-depannage .checks{
    font-size:clamp(13px,1vw,15px) !important;
    gap:clamp(18px,2vw,30px) !important;
    margin-bottom:clamp(20px,2.8vh,30px) !important;
  }
  body.page-depannage .dep-actions .btn{
    min-height:48px !important;
    padding:13px 20px !important;
    font-size:14px !important;
  }
}

/* Portable / écran moins haut : conserver la respiration demandée
   sans toucher à l'enveloppe responsive validée. */
@media (min-width:981px) and (max-height:760px){
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:14px !important;
  }
  body.page-depannage .dep-copy > p{
    margin-top:27px !important;
    font-size:14.5px !important;
    line-height:1.34 !important;
  }
  body.page-depannage .checks{
    font-size:12.5px !important;
    gap:14px !important;
    margin-bottom:12px !important;
  }
  body.page-depannage .dep-actions .btn{
    min-height:43px !important;
    padding:10px 15px !important;
    font-size:13px !important;
  }
}

/* ============================================================
   DÉPANNAGE — CALAGE SUR ENTRETIEN (13)
   Uniquement l'intérieur du carré bleu :
   - engagements à la taille d'Entretien
   - boutons aux proportions d'Entretien et recentrés
   - suppression du grand vide créé par margin-top:auto
   - titre et paragraphe légèrement descendus
   ============================================================ */
@media (min-width:981px){
  body.page-depannage .dep-copy h1{
    margin-top:clamp(16px,2.2vh,24px) !important;
  }
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:clamp(20px,2.7vh,30px) !important;
  }
  body.page-depannage .dep-copy > p{
    margin-top:clamp(42px,5.8vh,62px) !important;
  }
  body.page-depannage .checks{
    margin-top:27px !important;
    margin-bottom:0 !important;
    gap:28px !important;
    font-size:16px !important;
    font-weight:700 !important;
    flex-shrink:0 !important;
  }
  body.page-depannage .dep-actions{
    margin-top:26px !important;
    margin-bottom:0 !important;
    gap:15px !important;
    justify-content:center !important;
    flex-shrink:0 !important;
  }
  body.page-depannage .dep-actions .btn{
    min-width:235px !important;
    min-height:0 !important;
    padding:14px 22px !important;
    font-size:1.03em !important;
  }
}

@media (min-width:981px) and (max-height:760px){
  body.page-depannage .dep-copy h1{
    margin-top:12px !important;
  }
  body.page-depannage .dep-copy h1 .dep-title-line + .dep-title-line{
    margin-top:14px !important;
  }
  body.page-depannage .dep-copy > p{
    margin-top:36px !important;
    font-size:14.5px !important;
    line-height:1.34 !important;
  }
  body.page-depannage .checks{
    margin-top:22px !important;
    margin-bottom:0 !important;
    gap:18px !important;
    font-size:16px !important;
  }
  body.page-depannage .dep-actions{
    margin-top:22px !important;
    gap:15px !important;
    justify-content:center !important;
  }
  body.page-depannage .dep-actions .btn{
    min-width:210px !important;
    padding:12px 18px !important;
    font-size:15px !important;
  }
}

/* ============================================================
   DÉPANNAGE — CALAGE VERTICAL SUR ENTRETIEN (14)
   Demande : ne toucher qu'au contenu du carré bleu.
   - paragraphe REPASY descendu
   - engagements + boutons descendus ensemble
   - boutons conservés centrés et aux proportions d'Entretien
   ============================================================ */
@media (min-width:981px){
  body.page-depannage .dep-copy > p{
    margin-top:clamp(54px,7.2vh,76px) !important;
  }
  body.page-depannage .checks{
    margin-top:clamp(42px,5.2vh,56px) !important;
    margin-bottom:0 !important;
    font-size:16px !important;
    gap:28px !important;
  }
  body.page-depannage .dep-actions{
    margin-top:26px !important;
    justify-content:center !important;
    gap:15px !important;
  }
  body.page-depannage .dep-actions .btn{
    min-width:235px !important;
    padding:14px 22px !important;
    font-size:1.03em !important;
  }
}

@media (min-width:981px) and (max-height:760px){
  body.page-depannage .dep-copy > p{
    margin-top:44px !important;
  }
  body.page-depannage .checks{
    margin-top:30px !important;
    font-size:16px !important;
    gap:18px !important;
  }
  body.page-depannage .dep-actions{
    margin-top:22px !important;
    justify-content:center !important;
  }
  body.page-depannage .dep-actions .btn{
    min-width:210px !important;
    padding:12px 18px !important;
    font-size:15px !important;
  }
}

/* ============================================================
   DÉPANNAGE — AJUSTEMENT FINAL VERTICAL (15)
   Uniquement l'intérieur du carré bleu.
   Référence visuelle : niveau vertical des engagements/boutons d'Entretien.
   ============================================================ */
@media (min-width:981px){
  /* La phrase REPASY descend encore d'environ 1 à 2 lignes. */
  body.page-depannage .dep-copy > p{
    margin-top:clamp(68px,8.6vh,92px) !important;
  }

  /* Bloc engagements + boutons abaissé sans modifier leur centrage horizontal. */
  body.page-depannage .checks{
    transform:translateY(12px) !important;
    font-size:16px !important;
    gap:28px !important;
    margin-bottom:26px !important;
  }
  body.page-depannage .dep-actions{
    transform:translateY(12px) !important;
    justify-content:center !important;
  }

  /* Proportions des boutons calées sur Entretien. */
  body.page-depannage .dep-actions .btn{
    min-width:235px !important;
    padding:14px 22px !important;
    font-size:1.03em !important;
  }
}

@media (min-width:981px) and (max-height:800px){
  /* Même intention sur écran moins haut, avec déplacement contenu. */
  body.page-depannage .dep-copy > p{
    margin-top:clamp(22px,4.2vh,34px) !important;
  }
  body.page-depannage .checks{
    transform:translateY(7px) !important;
    margin-bottom:10px !important;
    font-size:clamp(12px,1.15vw,16px) !important;
  }
  body.page-depannage .dep-actions{
    transform:translateY(7px) !important;
  }
}

/* ============================================================
   DÉPANNAGE — POSITION BASSE ENGAGEMENTS + BOUTONS (16)
   Uniquement l'intérieur du carré bleu.
   Objectif : environ 2 cm d'air sous les boutons, comme demandé.
   ============================================================ */
@media (min-width:981px){
  body.page-depannage .checks{
    margin-top:auto !important;
    margin-bottom:0 !important;
    transform:none !important;
    font-size:16px !important;
    gap:28px !important;
    flex-shrink:0 !important;
  }
  body.page-depannage .dep-actions{
    margin-top:26px !important;
    margin-bottom:76px !important;
    transform:none !important;
    justify-content:center !important;
    flex-shrink:0 !important;
  }
}
@media (min-width:981px) and (max-height:800px){
  body.page-depannage .checks{
    margin-top:auto !important;
    margin-bottom:0 !important;
    transform:none !important;
  }
  body.page-depannage .dep-actions{
    margin-top:20px !important;
    margin-bottom:58px !important;
    transform:none !important;
  }
}

/* 17 — ENTRETIEN reprend strictement le gabarit maître DÉPANNAGE.
   Seuls le contenu, la photo et les libellés propres à Entretien changent. */
body.page-entretien .ent-master-image{
  background-image:url('hero-entretien-v8.jpg') !important;
}

/* 19 — Toutes les pages principales reprennent exactement le gabarit maître Dépannage. */
body.page-petits-travaux .master-page-image{background-image:url('action-disqueuse-wide.jpg') !important; background-position:center center !important;}
body.page-realisations .master-page-image{background-image:url('real-douche-finie.jpg') !important; background-position:center center !important;}
body.page-a-propos .master-page-image{background-image:url('hero-a-propos-v11.jpg') !important;}
body.page-contact .master-page-image{background-image:url('hero-artisan-placeholder.jpg') !important;}
/* v21 — choix photos demandé : le gabarit maître reste inchangé */
body.page-petits-travaux .master-page-image{
  background-image:url('action-disqueuse-wide.jpg') !important;
  background-position:center 48% !important;
  background-size:cover !important;
}
body.page-realisations .master-page-image{
  background-image:url('galerie-cuisine-3.jpg') !important;
  background-position:center center !important;
  background-size:cover !important;
}
/* v22 — contenu prestations aligné sur la synthèse des activités */
.home-smallworks{padding:56px 20px;background:#f5f8fc}.home-smallworks .section-head{text-align:center;max-width:900px;margin:0 auto 28px}.home-smallworks .dep-grid{max-width:1100px;margin:0 auto;grid-template-columns:repeat(3,1fr)}
@media(max-width:800px){.home-smallworks .dep-grid{grid-template-columns:1fr}.home-smallworks{padding:36px 16px}}

/* V23 - ajustements demandés */
body.page-a-propos .master-page-image{background-image:url('action-mesure.jpg') !important;background-position:center 42% !important;}
body.page-contact .master-page-image{background-image:url('realisation-05.jpg') !important;background-position:center center !important;}
.pt-example img[src*="real-etagere-siporex"]{object-position:center 48% !important;}
/* Sans kicker, conserver la respiration du gabarit maître */
.dep-copy>h1:first-child{margin-top:clamp(18px,3vh,42px);}
/* v24 — atelier photos et réalisations extensibles */
.real-editor{padding:22px 0 50px;background:#f4f7fb}.real-editor details{background:#fff;border:1px solid #dce5ef;border-radius:14px;padding:18px}.real-editor summary{font-weight:800;font-size:1.08rem;cursor:pointer;color:#123a6a}.editor-help{max-width:900px;color:#536274}.editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.editor-grid label{font-weight:700;color:#23384f}.editor-grid input,.editor-grid select{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #cbd6e2;border-radius:8px;background:#fff}.editor-grid .btn{align-self:end}.editor-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}@media(max-width:700px){.editor-grid{grid-template-columns:1fr}}

/* V26 — édition photo directement dans le vrai site */
.repasy-photo-editable{position:relative;outline-offset:-4px;transition:outline .15s,filter .15s;cursor:copy}
.repasy-photo-editable.repasy-dragover{outline:4px dashed #fff!important;filter:brightness(.82)}
.repasy-photo-editable.repasy-dragover::after{content:'Déposez la photo ici';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,31,58,.58);color:#fff;font-weight:900;font-size:clamp(16px,2vw,26px);z-index:20;pointer-events:none}
img.repasy-photo-editable.repasy-dragover{outline:4px dashed #123a6a!important}
.repasy-photo-toolbar{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;gap:8px;flex-wrap:wrap;max-width:min(520px,calc(100vw - 32px));padding:9px;background:rgba(7,25,45,.94);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.repasy-photo-toolbar button{border:0;border-radius:8px;padding:9px 12px;font:700 13px/1.1 Arial,sans-serif;cursor:pointer;background:#fff;color:#123a6a}.repasy-photo-toolbar button.primary{background:#1673c9;color:#fff}
.repasy-photo-hint{position:fixed;left:16px;bottom:16px;z-index:9998;background:rgba(7,25,45,.92);color:#fff;padding:9px 12px;border-radius:9px;font:600 12px/1.3 Arial,sans-serif;max-width:390px}
.real-add-simple{display:flex;justify-content:center;padding:28px 15px 46px;background:#f4f7fb}.real-add-simple button{font-size:16px}
.real-card.user-added .drop-placeholder{height:240px;display:flex;align-items:center;justify-content:center;text-align:center;background:#e8eef5;color:#123a6a;font-weight:800;padding:20px}
.real-card.user-added [contenteditable=true]{outline:1px dashed transparent}.real-card.user-added [contenteditable=true]:focus{outline-color:#1673c9;background:#f7fbff}
@media(max-width:700px){.repasy-photo-hint{display:none}.repasy-photo-toolbar{right:8px;bottom:8px}.repasy-photo-toolbar button{padding:8px 9px;font-size:12px}}
/* V28 — galerie reconstruite d'après les captures utilisateur */
.real-grid .real-card{display:flex;flex-direction:column;min-height:0!important;height:auto!important}
.real-grid .real-card img,.real-grid .real-card .drop-placeholder{width:100%!important;height:280px!important;min-height:280px!important;max-height:280px!important;object-fit:cover!important;display:block!important}
.real-grid .real-card .cap{padding:17px 18px!important;min-height:82px!important;height:82px!important;box-sizing:border-box!important;overflow:hidden!important}
.real-grid .real-card .cap h3{font-size:20px!important;line-height:1.15!important;margin:0 0 5px!important}
.real-grid .real-card .cap p{font-size:14px!important;line-height:1.25!important;margin:0!important}
body.page-realisations .master-page-image{background-image:url('galerie-cuisine-1.jpg')!important;background-position:center center!important}


/* v29 — corrections finales dictées */
body.page-entretien .ent-master-image{
  filter: brightness(1.045) contrast(.95) saturate(.92);
}
body.page-entretien .action-card img.brush-photo{
  filter: brightness(1.045) contrast(.95) saturate(.92);
  object-position:center 54%;
}
body.page-realisations .real-grid{align-items:stretch;}
body.page-realisations .real-card{display:flex;flex-direction:column;height:100%;}
body.page-realisations .real-card>img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
body.page-realisations .real-card .cap{flex:1;}
body.page-petits-travaux .pt-gallery .pt-example:first-child img{object-position:center center;}

/* V30 — corrections vocales : retour au cadrage naturel Entretien, sans traitement du pinceau. */
body.page-entretien .ent-master-image{filter:none!important;background-position:center center!important;}
body.page-entretien .action-card img.brush-photo{filter:none!important;object-position:center center!important;}

/* v32 — photos principales choisies par le client */
body.page-a-propos .master-page-image{
  background-image:url('hero-a-propos-action-bois.jpg') !important;
  background-position:center 48% !important;
  background-size:cover !important;
}
body.page-contact .master-page-image{
  background-image:url('hero-contact-terrasse.jpg') !important;
  background-position:center 43% !important;
  background-size:cover !important;
}

/* v33 — utiliser les vraies photos sources, pas les captures d’écran */
body.page-a-propos .master-page-image{
  background-image:url('action-bois.jpg') !important;
  background-position:center 48% !important;
  background-size:cover !important;
}
body.page-contact .master-page-image{
  background-image:url('galerie-terrasse-2.jpg') !important;
  background-position:center 48% !important;
  background-size:cover !important;
}

/* V34 — photo principale À propos validée */
body.page-a-propos .master-page-image{
  background-image:url('action-bois.jpg') !important;
  background-position:center center !important;
  background-size:cover !important;
}