/* ════════════════════════════════════════════════════════════════════
   MENU DU SITE PUBLIC — sous-menus « Nos solutions », « Aides &
   Financement », « Ressources » (17/10/2026)
   Chargée par toutes les pages qui portent le menu, APRÈS leur feuille,
   avec assets/menu-site.js (qui pose la classe .menu-js sur #nav).

   Pourquoi : la règle « téléphone » du sous-menu était écrite AVANT la
   règle de base dans assets/styles.css → la règle de base gagnait : au
   téléphone le sous-menu restait une bulle invisible qui ne s'ouvrait
   qu'au :hover. Au doigt (Android surtout), « Ressources » suivait le lien
   blog.html ou laissait une bulle collée par-dessus « SAV » / « Contact ».

   Désormais : l'ouverture ne dépend JAMAIS du :hover ni du focus — seule
   la classe .open (posée par menu-site.js : toucher, clic, Entrée/Espace,
   ou survol d'une vraie souris) ouvre un sous-menu. Le sélecteur #nav
   passe devant les anciennes règles (y compris les copies en ligne).
   ════════════════════════════════════════════════════════════════════ */

/* ── Bureau : bulle sous l'intitulé ── */
#nav.menu-js .nav-dropdown .nav-dropdown-menu { opacity:0; visibility:hidden; transform:translateX(-50%) translateY(10px); }
#nav.menu-js .nav-dropdown.open .nav-dropdown-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
#nav.menu-js .nav-dropdown .chevron { transform:none; }
#nav.menu-js .nav-dropdown.open .chevron { transform:rotate(180deg); }
#nav .nav-dropdown-toggle { cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
#nav .nav-dropdown-menu a { min-height:44px; display:flex; align-items:center; touch-action:manipulation; }
/* la page « vue d'ensemble » d'un sous-menu reste atteignable (l'intitulé n'est plus un lien) */
#nav .nav-hub-link { display:flex !important; }

/* ── Téléphone / tablette portrait : accordéon dans le panneau du burger ── */
@media (max-width:900px){
  /* le panneau défile au doigt s'il dépasse l'écran (il est en position fixe) */
  nav.open { max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  #nav .nav-dropdown { flex-direction:column; align-items:stretch; width:100%; }
  #nav .nav-dropdown-toggle { justify-content:center; align-items:center; width:100%; min-height:48px; padding:12px 16px !important; border-radius:8px !important; box-sizing:border-box; }
  #nav .nav-dropdown .chevron { font-size:1rem; margin-left:6px; }
  #nav.menu-js .nav-dropdown-menu {
    position:static !important; transform:none !important; box-shadow:none !important;
    min-width:0 !important; background:transparent !important; padding:2px 0 8px 12px !important;
    opacity:1 !important; visibility:visible !important; display:none !important; transition:none !important;
  }
  #nav.menu-js .nav-dropdown.open .nav-dropdown-menu { display:flex !important; }
  #nav.menu-js .nav-dropdown-menu::before, #nav.menu-js .nav-dropdown::after { display:none !important; }
  #nav .nav-dropdown-menu a { min-height:48px; }
}

/* ════════════════════════════════════════════════════════════════════
   EN-TÊTE ET FORMULAIRES — audit du site, points 🔴 1 à 4 (17/10/2026)
   Cette feuille est la seule chargée par toutes les pages du site
   public après leur propre style : on y pose les minimums communs.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1-2. Champs de formulaire en 16 px au moins ──
   Sous 16 px, Safari iPhone agrandit la page à chaque toucher dans un
   champ. Le champ du conseiller (chatbot) a son propre style : hors sujet
   ici. Le code postal du simulateur (plus grand, 1,05rem) garde sa taille. */
form input:not([type=checkbox],[type=radio],[type=range],[type=hidden],[type=submit],[type=button],[type=image],[type=reset],[type=file],[type=color],.sim-cp-input),
form select:not([hidden]), form textarea:not([hidden]),
#rzDep, #mtMq, #ziQ, #ziDep { font-size:16px; }   /* listes et recherches hors formulaire : Réalisations, Médiathèque, Zones */

/* ── 3. Bouton « Devis gratuit » du haut ──
   Décision d'Ylan du 17/10 au soir, sur visuel : « Je préfère B on
   change ». Fond bleu RENOVIA #1B3C8F, texte blanc : 10:1 (remplace le
   fond orange #F47920 + texte bleu marine #122870 retenu plus tôt le même
   jour). Survol / appui : fond #122870, texte blanc, plus l'ombre et le
   léger soulèvement d'origine. Même règle pour TOUS les boutons pleins du
   site (styles.css, simulateurs, cartes Aides & Financement, encadrés des
   articles, formulaires, chatbot…) ; sur une bande bleu foncé, où un
   bouton bleu ne se détacherait pas (< 3:1), le bouton devient blanc à
   texte #1B3C8F (survol #e8eeff) ; le bouton secondaire en contour
   translucide reste tel quel. L'orange reste au logo, aux traits et
   soulignés, au surlignage des mots de titre, aux étoiles, aux pictos et
   aux fonds non cliquables. Banc : outils-dev/cq-site-boutons.mjs. */
.header-cta .btn-devis { background:#1B3C8F; color:#fff; }
.header-cta .btn-devis:hover, .header-cta .btn-devis:active { background:#122870; color:#fff; }
/* bande bleu foncé des pages produit (« cta-band ») : le bouton principal passe en blanc */
.cta-band .btn-primary { background:#fff; color:#1B3C8F; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.cta-band .btn-primary:hover, .cta-band .btn-primary:active { background:#e8eeff; color:#1B3C8F; }
@media (max-width:900px){
  /* 44 px de haut au téléphone (Apple) ; la largeur ne change pas */
  .header-cta .btn-devis { display:inline-flex; align-items:center; justify-content:center; min-height:44px; box-sizing:border-box; line-height:1.1; }
}

/* ── 4. Burger : zone tactile 44 × 44 ──
   Le dessin (3 traits de 24 px) ne bouge pas : les marges négatives
   rendent les 12 px gagnés à l'en-tête, rien ne se décale. */
@media (max-width:900px){
  #burger.burger { box-sizing:border-box; min-width:44px; min-height:44px; padding:0; margin:0 -6px; justify-content:center; align-items:center; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
}

/* ════════════════════════════════════════════════════════════════════
   CIBLES, BANDEAU COOKIES, CONTOUR DU CHAMP ACTIF — audit du site,
   points 🟠 8, 10 et 11 (17/10/2026). Aucune couleur de texte changée.
   (Point 7, carrousel d'avis : avis.css ; point 9, chatbot : conseiller.js)
   ════════════════════════════════════════════════════════════════════ */

/* ── 8. Fil d'Ariane et pied de page : cibles de 44 px au téléphone ──
   Fil d'Ariane : la zone tactile grandit, la marge négative rend la
   hauteur gagnée → le texte ne bouge pas. Pied : les listes de liens
   passent sur deux colonnes (lignes de 44 px, pied PLUS court qu'avant),
   téléphone / e-mail / réseaux sociaux en cibles de 44 px. Les liens
   pris dans une phrase (© … Mentions légales) restent tels quels
   (exception WCAG 2.5.8 « dans le texte »). Bureau : rien ne change. */
@media (max-width:640px){
  .breadcrumb a, .rvh-bc a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; margin-top:-13px; margin-bottom:-13px; box-sizing:border-box; touch-action:manipulation; }
  footer .footer-col ul li { margin-bottom:0; }
  footer .footer-col ul li a { display:flex; align-items:center; min-height:44px; line-height:1.3; touch-action:manipulation; }
  footer .footer-col h4 { margin-bottom:4px; }
  footer .footer-contact-item { min-height:44px; margin-bottom:0; }
  footer .footer-contact-item a { display:inline-flex; align-items:center; min-height:44px; touch-action:manipulation; }
  footer .footer-social { gap:2px; margin-left:-11px; margin-top:8px; }
  footer .footer-social a { width:44px; height:44px; align-items:center; justify-content:center; touch-action:manipulation; }
  footer .trustpilot-widget > a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; box-sizing:border-box; }
}
@media (max-width:600px){
  footer .footer-col ul { display:grid; grid-template-columns:1fr 1fr; column-gap:16px; }
}

/* ── 10. Bandeau cookies : compact au téléphone ──
   146 px → moins de 100 px : le titre « Votre vie privée » n'est plus
   affiché (il reste lu par les lecteurs d'écran, la fenêtre garde son
   nom « Gestion des cookies »), le 🍪 passe devant la phrase, le texte et
   le lien « En savoir plus » vers la politique de confidentialité ne
   changent pas ; trois boutons côte à côte de 44 px de haut. Le panneau
   « Choisir » s'ouvre comme avant. */
@media (max-width:640px){
  body #cookieBanner { padding:8px 12px; border-radius:16px; }
  #cookieBanner .cookie-text h4 { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  #cookieBanner .cookie-text p { font-size:.78rem; line-height:1.3; margin:0 0 6px; }
  #cookieBanner .cookie-text p::before { content:"\1F36A  "; }
  #cookieBanner .cookie-btns button { min-height:44px; padding:6px 4px; box-sizing:border-box; touch-action:manipulation; }
  #cookieBanner #cookiePanel { margin-top:10px; }
  #cookieBanner .ck-save { min-height:44px; }
}

/* ── 11. Champ actif : contour bien visible (WCAG 2.4.7) ──
   Plusieurs feuilles du site retirent le contour du navigateur
   (outline:none) et ne laissent qu'une ombre bleue à 8-12 % : invisible.
   Contour plein 2 px bleu RENOVIA #1B3C8F, décalé de 2 px (9,6:1 sur
   blanc ; sur le bleu marine du pied, contour blanc). Le chatbot a son
   propre style (conseiller.js). */
:where(input, select, textarea):not(:where(#rvIn, #rvMsgs *)):focus-visible { outline:2px solid #1B3C8F !important; outline-offset:2px !important; }
footer :is(input, select, textarea):focus-visible { outline-color:#fff !important; }
/* Médiathèque : la recherche (champ blanc) est posée sur le bandeau bleu marine → on garde son contour orange d'origine, 3 px (≈ 4,8:1 sur le marine) */
.mt-search input:focus-visible { outline:3px solid #F47920 !important; }

/* ════════════════════════════════════════════════════════════════════
   BADGE AVIS, TABLEAUX QUI DÉFILENT, SOMMAIRE — audit du site, points
   🟢 12 à 14 (17/10/2026). Banc : outils-dev/cq-site-verts.mjs
   ════════════════════════════════════════════════════════════════════ */

/* ── 12. Badge Trustpilot de l'en-tête ──
   Les étoiles gardent le vert de marque Trustpilot #00B67A (graphique).
   Le MOT « Excellent » passe en vert foncé #00754E (5,7:1 sur blanc, au
   lieu de 2,6:1), la note reste #191919, « /5 » en gris #5F6675 (5,8:1).
   Au téléphone le texte passe de 9,6 px à 11 px (minimum Apple) ; sous
   381 px, « Excellent » s'efface (déjà le cas avant), les étoiles et
   « 4,8/5 » restent, le lien garde son nom complet (aria-label).
   Zone tactile de 44 px : pseudo-élément invisible (charte §5), le
   badge ne grandit pas et l'en-tête ne bouge pas. */
.tp-mini { position:relative; }
.tp-mini .tpm-meta .ex { color:#00754E; }
.tp-mini .tpm-meta .sl { color:#5F6675; }
@media (max-width:600px){
  .tp-mini .tpm-meta { font-size:11px; letter-spacing:0; }
}
@media (max-width:380px){
  .tp-mini .tpm-meta .ex { display:none; }
}
@media (max-width:640px){
  .tp-mini { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  .tp-mini::after { content:""; position:absolute; left:-4px; right:-4px; top:calc(50% - 22px); bottom:calc(50% - 22px); }
}

/* ── 13. Tableaux plus larges que l'écran ──
   assets/menu-site.js entoure chaque zone de défilement d'un tableau
   d'un cadre .defile-cadre : petite mention « Faites glisser → » au-dessus
   et ombre sur le bord droit, seulement quand le tableau déborde
   (.deborde) ; l'ombre s'efface en fin de défilement (.fin). La zone
   défilante devient focusable (tabindex=0, role=region, aria-label). */
.defile-cadre { display:grid; grid-template-columns:minmax(0,1fr); }
.defile-cadre > .defile-zone { grid-row:2; grid-column:1; margin-top:0 !important; margin-bottom:0 !important; }
.defile-cadre > .defile-indice { grid-row:1; grid-column:1; display:none; justify-self:end; margin:0 0 6px; font-size:13px; line-height:1.3; font-weight:600; color:#5F6675; }
.defile-cadre.deborde > .defile-indice { display:block; }
.defile-cadre::after { content:""; grid-row:2; grid-column:1; justify-self:end; align-self:stretch; width:28px; pointer-events:none;
  border-radius:0 var(--defile-rayon,0) var(--defile-rayon,0) 0;
  background:linear-gradient(to right, rgba(17,24,39,0), rgba(17,24,39,.16)); opacity:0; transition:opacity .2s ease; }
.defile-cadre.deborde:not(.fin)::after { opacity:1; }
.defile-zone:focus-visible { outline:2px solid #1B3C8F; outline-offset:2px; }

/* ── 14. Sommaire « Sur cette page » (pages longues) ──
   Liste en carte (style Réglages iPhone) : lignes de 44 px au téléphone,
   filet décalé de 16 px, chevron gris. Les titres visés ne changent pas ;
   scroll-margin-top les garde sous l'en-tête collant (81 px) même quand
   leur bloc « apparaît » (glissement de 24 px). */
.sommaire-page { padding:28px 16px 8px; }
.sommaire-page .sp-inner { max-width:720px; margin:0 auto; }
.sommaire-page .sp-titre { margin:0 0 8px 16px; font-size:13px; font-weight:600; color:#5F6675; letter-spacing:0; text-transform:none; }
.sommaire-page ol { list-style:none; margin:0; padding:0; background:#fff; border-radius:10px; border:1px solid rgba(60,60,67,.14); overflow:hidden; }
.sommaire-page li { margin:0; padding:0; }
.sommaire-page li + li { position:relative; }
.sommaire-page li + li::before { content:""; position:absolute; left:16px; right:0; top:0; height:1px; background:rgba(60,60,67,.18); pointer-events:none; }
.sommaire-page a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 14px 10px 16px; box-sizing:border-box;
  color:#1B3C8F; font-size:16px; line-height:1.3; font-weight:500; text-decoration:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.sommaire-page a:hover { background:#F2F4F8; }
.sommaire-page a:active { background:#E8EEFF; }
.sommaire-page a:focus-visible { outline:2px solid #1B3C8F; outline-offset:-2px; }
.sommaire-page a svg { flex:0 0 auto; width:8px; height:14px; color:#8A8F99; }
.sommaire-cible { scroll-margin-top:112px; }
@media (min-width:901px){
  .sommaire-page { padding-top:40px; }
  .sommaire-page a { min-height:40px; font-size:15px; }
}

/* ── Mouvement réduit : pas de défilement doux ni de fondu ── */
@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto !important; }
  .defile-cadre::after { transition:none; }
}