/* V62 mobile — remplace les anciennes règles mobiles des éléments ci-dessous.
   Chargé uniquement jusqu'à 800px : aucun effet sur l'affichage PC.
   Les !important répondent aux anciennes finitions V55–V61 !important conservées sur PC. */
.wrap { width:calc(100% - 32px); max-width:600px; margin-inline:auto; }
.reno-mobile-header[hidden], #reno-mobile-menu[hidden] { display:none; }
.reno-mobile-header { display:block; position:relative; z-index:20; background:#181917; border-bottom:1px solid rgba(197,166,74,.28); }
.reno-mobile-bar { min-height:64px; max-width:600px; margin:auto; padding:10px 16px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.reno-mobile-bar > a { font:20px Georgia,serif; color:#E4CA79; }
.reno-mobile-toggle { min-height:44px; padding:8px 14px; background:transparent; border:1px solid #C5A64A; border-radius:7px; color:#E4CA79; cursor:pointer; }
#reno-mobile-menu { padding:0 16px 16px; }
.reno-mobile-header .side-nav { display:flex; position:static; flex-direction:column; align-items:stretch; width:100%; max-width:600px; margin:auto; padding:0!important; gap:4px!important; border:0; background:none; box-shadow:none; }
.reno-mobile-header .side-nav > a,
.reno-mobile-header .side-nav > .reno-nav-dropdown > summary { display:block; width:100%!important; max-width:100%!important; box-sizing:border-box!important; min-height:44px; padding:12px 24px 12px 0!important; font:700 13px/1.5 Georgia,serif!important; letter-spacing:.6px!important; white-space:normal!important; }
.reno-mobile-header .side-nav > .reno-nav-dropdown { width:100%!important; align-self:stretch!important; }
.reno-mobile-header .side-nav .reno-subnav { position:static; width:100%; min-width:0; margin:4px 0 10px; padding:4px 12px; box-shadow:none; }
.reno-mobile-header .side-nav .reno-subnav a { min-height:44px; white-space:normal!important; }
.hero, .hero-redesign { padding:24px 0 36px; min-height:0; }
.hero-layout, .hub .hero-layout, .hero-redesign-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:26px; }
.hero-brand { min-width:0; text-align:center; }
.hero-logo { display:block; width:min(100%,260px); height:auto; margin:0 auto; }
.hero-redesign .hero-logo { width:min(100%,280px); margin:-28px auto -24px; }
.hero-brand .eyebrow { font-size:10px; letter-spacing:1.5px; white-space:normal; }
.hero-brand .brand-kicker { font-size:10px; letter-spacing:1.5px; margin:0 0 12px; }
.hero-brand p, .hero-lead { font-size:17px; line-height:1.5; max-width:490px; margin:12px auto 18px; }
.hero-brand .hero-desc { font-size:14px; max-width:460px; margin:0 auto 20px; }
.hero-actions, .hero-brand .actions { display:flex; flex-direction:column; flex-wrap:wrap; justify-content:center; gap:12px; width:100%; }
.hero-actions .btn, .hero-brand .actions .cta { width:100%; min-height:48px; padding:13px 16px; font-size:13px; line-height:1.4; white-space:normal; }
.hero-brand .google { justify-content:center; margin-top:20px; }
.hero-brand .google-premium { min-height:72px; }
.hero-title { margin:0 0 14px; }
.hero-title h1, .hub .hero-title h1 { font-size:clamp(28px,8vw,36px); line-height:1.15; }
.hero-title .eyebrow { font-size:10px; letter-spacing:1.5px; }
.hero-redesign .hero-image, .hero-photo-frame { width:100%; max-width:none; height:auto; aspect-ratio:4/3; margin:0; }
.hero-image:after { display:none; }
.hero-slideshow .slide-vignette { min-height:55px; padding:20px 16px 16px; font-size:11px; }
.section { padding:40px 0; }
.heading { margin-bottom:26px; }
.heading h2, .split h2, h2 { font-size:clamp(28px,8vw,34px); line-height:1.18; }
.services, .service-grid, .cards { grid-template-columns:minmax(0,1fr); gap:18px; }
.feature { min-height:0; }
/* Même cadre et même zone de titre/bouton pour les neuf prestations. */
#prestations .service { height:auto!important; }
#prestations .service > img,
#prestations .service:nth-child(n+7) > img { position:relative!important; width:100%!important; height:auto!important; aspect-ratio:4/3; object-fit:cover!important; object-position:center!important; }
/* La photo de serrurerie inclut une bande sombre dans le fichier lui-même.
   On masque cette bordure par le cadrage CSS, sans retoucher la photo originale. */
#prestations .service:nth-child(5) > img { aspect-ratio:6/5; clip-path:inset(0 0 10% 0); margin-bottom:-8.333333%; }
#prestations .service > div { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:90px!important; margin-top:0!important; padding:14px 12px!important; }
#prestations .v55-icon { position:static; transform:none; width:36px; height:36px; font-size:24px; }
#prestations .service h3 { font-size:18px!important; line-height:1.22!important; }
#prestations .v56-discover { display:inline-flex; justify-content:center; min-height:44px; padding:10px; font-size:10px; gap:5px; }
.service-card img { height:auto; aspect-ratio:4/3; }
.gallery-head { display:block; margin-bottom:24px; }
.gallery-head h2 { font-size:32px; }
.gallery-head .cta { margin-top:18px; }
.gallery { gap:10px; }
/* Galeries des prestations : les photos restent lisibles et non étirées. */
.gallery a { aspect-ratio:1.1; }
.gallery-agencement { grid-template-columns:repeat(2,minmax(0,1fr)); }
#realisations .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; }
#realisations .gallery img { height:180px; min-width:0; }
#realisations .gallery .tall { grid-row:auto; grid-column:1/-1; height:260px; }
.contact-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
.cta-section { padding:40px 16px; }
.about-title h1 { font-size:34px; }
.about-panels, .about-cta { padding:40px 16px; }
.about-panels h2, .about-cta h2 { font-size:32px; }
.about-panel { padding:22px; }
.about-portrait { margin:0; }
.lock-diagram { grid-template-columns:minmax(0,1fr); gap:20px; }
.contact-info .detail a { overflow-wrap:anywhere; }
/* Le pied de page reste dans le flux, sans hériter de la navigation du haut. */
.footer-v4 { padding:24px 0 20px; }
.footer-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; justify-items:center; text-align:center; }
.footer-left { display:flex; flex-direction:column; align-items:center; gap:4px; }
.footer-identity { flex:auto; }
.footer-identity img { width:200px; height:120px; }
.footer-description strong { font-size:16px; }
.footer-menu { width:100%; padding:0; justify-self:center; }
.footer-menu .footer-nav { display:grid; position:static; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:0; background:none; box-shadow:none; max-width:none; }
.footer-menu .footer-nav a { min-height:44px; font-size:11px; white-space:normal; }
.footer-inner { justify-content:center; text-align:center; }
@media (min-width:651px) {
  .services, .service-grid, .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:360px) {
  #prestations .service > div { grid-template-columns:32px minmax(0,1fr); }
  #prestations .v56-discover { grid-column:2; justify-self:start; }
}