/* ===========================================================
   Renova Swiss — accessibilite commune (toutes les pages)
   A charger en fin de <body>, juste apres contact-popup.js :
   <link rel="stylesheet" href="assets/a11y.css">   (../assets/ dans pages/)
   =========================================================== */

/* 1. Lien d'evitement (premier element du <body>) */
.skip-link{position:fixed;left:12px;top:12px;z-index:10000;transform:translateY(-200%);
  background:#1A1A1A;color:#fff;font:600 15px/1.2 'Inter',sans-serif;padding:14px 18px;border-radius:12px;
  text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .15s}
.skip-link:focus{transform:none}
#contenu:focus{outline:none;box-shadow:none}

/* 2. Ancres : en-tete fixe = 80 px (16 + barre 64), 72 px en .scrolled ;
      barre d'action du bas = 68-73 px + 12-18 px de marge */
html{scroll-padding-top:88px;scroll-padding-bottom:100px}
.svc-pane{scroll-margin-top:61px}   /* etait 148/150 px : la marge s'ajoute desormais au scroll-padding */

/* 3. Focus clavier : anneau double (blanc contre l'element, noir autour), lisible sur tout fond */
html body :focus-visible{outline:3px solid #1A1A1A;outline-offset:2px;box-shadow:0 0 0 5px #fff}
[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}   /* cible d'ancre ou de lien d'evitement : pas de cadre autour de la section */
.ba-knob:focus-visible{outline:3px solid #1A1A1A;outline-offset:3px;box-shadow:0 0 0 6px #fff,0 8px 26px rgba(0,0,0,.4)}
.ttile:focus-visible{outline:3px solid #1A1A1A;outline-offset:2px}

/* 4. Barre d'action du bas : masquee = hors du parcours clavier */
.sticky-cta:not(.show){visibility:hidden}
.sticky-cta{transition:transform .45s cubic-bezier(.2,.9,.3,1),opacity .35s,visibility .35s}

/* 5. Cibles tactiles */
@media(max-width:960px){
  #hdr .h-tel{padding:7px!important;margin:-7px -7px -7px 0}   /* rond de 30 px conserve, zone de 44 px */
  #hdr .h-burger2{min-width:44px;min-height:44px;justify-content:center;align-items:center;padding:12px;margin-right:-4px}
  #mmenu .mm-close{width:44px;height:44px}
  #mmenu a.mm-nav{min-height:44px}
  .ba-arw{width:44px!important;height:44px!important}
}
.ba-dot,.svc-dot,.svl-dot{position:relative}
.ba-dot::before,.svc-dot::before,.svl-dot::before{content:"";position:absolute;left:50%;top:50%;width:24px;height:44px;transform:translate(-50%,-50%)}

/* 6. Contrastes (ratios sur fond reel) */
footer .foot-col h4,footer .foot-col .foot-h,footer .foot-tagline,footer .foot-copy,footer .foot-legal a{color:rgba(255,255,255,.66)} /* 7,9:1 sur #1a1a1a */
footer .foot-legal a:hover{color:#fff}
.ada .ex-foot{color:#6f6f78}                                    /* 4,98:1 */
.ada .ex-foot svg{stroke:#6f6f78}
#contact .lead-opt{color:#6f6f78}
section.ada,#budget.ada,#simulateur,#estimateur{--green:#15803d}                                    /* 5,02:1 au lieu de 3,30:1 */
#simulateur,#estimateur{--gray2:#6f6f78}
#simulateur .sctr,#estimateur .sctr{color:#6f6f78}
#simulateur .flbl,#estimateur .flbl{color:#5f5f66}
.h-mch{color:#6f6f78}
.h-promo .ph{color:#a2a2aa}
#mmenu .mm-lbl{color:#6f6f78}

/* 7. Mouvement reduit */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .logos-track{animation:none!important}
  #orchestre .m-brk,#orchestre .m-link-dot,#orchestre .m-pls{animation:none!important}
  #processus .item:not(.on) .card{filter:none!important;opacity:1!important}
}
.logos-slider:hover .logos-track{animation-play-state:paused}

/* 8. Utilitaires et bouton pause du diaporama d'accueil */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 9. Champs a 16 px sur ecran tactile (sinon zoom automatique d'iOS a la saisie) */
@media (hover:none) and (pointer:coarse){
  #contact .lead-input,#contact .lead-textarea,.ex-form input,
  #simulateur input[type=text],#simulateur input[type=email],#simulateur input[type=tel],#simulateur select,#simulateur textarea,
  #estimateur input[type=text],#estimateur input[type=email],#estimateur input[type=tel],#estimateur select,#estimateur textarea{font-size:16px}
}

/* 10. Estimateur : niveaux atteignables au clavier (au lieu de .ni{display:none}) */
.ni{display:block!important;position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ni:focus-visible+.nl{outline:3px solid #1A1A1A;outline-offset:2px;box-shadow:0 0 0 5px #fff}

/* 11. Bouton pause du diaporama du hero */
.cine-pause{position:absolute;right:20px;bottom:10px;z-index:5;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;cursor:pointer}
.cine-pause svg{width:15px;height:15px;fill:currentColor}
.cine-pause .i-play,.cine-pause.is-paused .i-pause{display:none}
.cine-pause.is-paused .i-play{display:block}
@media(max-width:768px){.cine-pause{right:12px;bottom:4px}}

/* 12. Estimateur : suggestions de NPA lisibles (le texte heritait du noir sur fond noir) */
#simulateur .npa-dd,#estimateur .npa-dd,.npa-dd{--white:#fff}

/* 13. Revue du 11.10.2026, lot 11 */
/* Pastilles d'initiales des avis : blanc sur les couleurs de Google (2,8 a 4,5:1). Voile sombre a l'interieur de
   la pastille, quelle que soit la couleur ecrite dans la page : 4,6:1 au moins. */
.rev-av{box-shadow:inset 0 0 0 100px rgba(0,0,0,.34)}
/* A propos, onglets Avant / Pendant / Apres : texte des onglets inactifs et numeros sans transparence */
#perimetre .pe-tab{color:#5c5c63}
#perimetre .pe-tab.on{color:#fff}
#perimetre .pe-tab small{opacity:1}
/* Zones tactiles : agrandies par un pseudo-element, sans changer le dessin ; jamais plus larges que l'ecart entre
   deux voisins (points des carrousels espaces de 16 px : hauteur seule, les fleches restent l'acces equivalent) */
.h-logo,.cine-gbadge,.fisc-feat-tog,.lead-ch,footer a{position:relative}
.h-logo::after,.cine-gbadge::after,.fisc-feat-tog::after,.orc-opt::after,.lead-ch::after{content:'';position:absolute;left:50%;top:50%;width:max(100%,40px);height:max(100%,40px);transform:translate(-50%,-50%)}
.cine-dot::after,.svc-dot::after,.ba-dot::after,.svl-dot::after{content:'';position:absolute;left:0;right:0;top:50%;height:40px;transform:translateY(-50%)}
footer a:not(.foot-logo)::after{content:'';position:absolute;left:0;right:0;top:50%;height:max(100%,32px);transform:translateY(-50%)}
/* Textes de 12 px au moins au telephone et a la tablette (le hero est regle dans le <head> de chaque page) */
@media (max-width:1023px){
  .foot-col h3,.foot-col h4,.foot-gb-sub,.proj-chip,.lead-opt,#bacat,.ba-badge,.eyebrow,.ex-tag,.kick,.sv-badge,.cmp2-h.crit,
  .cmp2-badge,.sv-trust-i,.intro-chip-lb,.stag,.mf-k,.pan-n,.re-l,.pe-tab small,.pe-num,.co-k{font-size:12px!important}
}
/* Telephone tenu a l'horizontale : la barre d'action du bas prenait plus d'un tiers de l'ecran */
@media (max-height:500px) and (orientation:landscape){#sticky-cta{display:none!important}}
/* Pied de page : titres de colonnes gris sur noir (3,2:1) */
.foot-col h3{color:rgba(255,255,255,.58)}