/* ANCIEN VISUEL (v1) : le <style> recopie dans index.php, pack.php, allville.php,
   details.php et qrplaque.php, reuni ici (regle 7), plus les style="" des pages. */

:root {
    --v1-bleu: #1e4892;
    --v1-fond: #f2f2f2;
    --v1-texte: #212529;
    --v1-titre: #555;
    --v1-discret: #6b6b6b;
    --v1-filet: rgba(0, 0, 0, .125);
    --v1-blanc: #fff;
}

.clrbleu { color: var(--v1-bleu); }
.bgrbleu { background-color: var(--v1-bleu); }
.qrbody { background-color: var(--v1-fond); font-family: 'lato', sans-serif; line-height: 1.5; font-size: 14px; }

/* #888 d'origine porte 3,3:1 sur blanc : assombri pour le contraste AA */
.qrsmall { font-family: 'oswald'; font-size: 10px !important; text-transform: uppercase; font-weight: 400; color: var(--v1-discret); letter-spacing: 2px; padding-inline-start: 2px; }
.qrtitre { font-family: 'oswald'; text-transform: uppercase; font-weight: 400; color: var(--v1-titre); }
.qrtxtlk { font-family: 'oswald'; text-transform: uppercase; font-weight: 400; color: var(--v1-titre); text-align: end; padding-inline-end: 2em; }
.qrretlk { font-family: 'oswald'; text-transform: uppercase; font-weight: 400; color: var(--v1-titre); text-align: start; }
.qrtxfoo { font-family: 'oswald'; font-weight: 400; color: var(--v1-titre); text-align: center; }
.qrrs { border: 0; border-bottom: 1px solid var(--v1-filet); padding-top: 1.3em; padding-bottom: 1em; }
.qrlien { border: 0; border-bottom: 1px solid var(--v1-filet); }
.qrlienblock, .qrlienblock:hover { text-decoration: none; color: var(--v1-texte); }
.qrlienret, .qrlienret:hover { text-decoration: none; color: var(--v1-texte); border: 1px dotted var(--v1-titre); padding: .75em; background-color: var(--v1-blanc); }
.qrquestion { font-size: .8rem; text-align: start; }

/* Anciens style="" */
.qrsansbord { border: 0; }
.qrblanc { color: var(--v1-blanc); }
.qricone { margin-inline-end: .5em; }

/* Listes « libelle | valeur » de l'offre (anciennes colonnes col-8 / col-4) */
.qrliste-inclus { list-style: none; margin: 0; padding: 0; }
.qrliste-inclus li,
.qrliste-inclus > div { display: grid; grid-template-columns: 2fr 1fr; gap: 0 .75em; align-items: center; min-height: 25px; }
.qrliste-inclus li > :first-child,
.qrliste-inclus dt { text-align: end; border-inline-end: 1px solid var(--v1-filet); padding-inline-end: .75em; font-weight: 400; }
.qrliste-inclus dd { margin: 0; }
.qrcoche { height: 25px; width: 25px; }

/* Focus visible et lien d'evitement (RGAA) */
a:focus-visible, button:focus-visible { outline: 2px solid var(--v1-bleu); outline-offset: 2px; }
.qrevitement:focus { position: absolute; top: .5rem; inset-inline-start: .5rem; z-index: 10; padding: .5rem 1rem; background: var(--v1-blanc); color: var(--v1-texte); }

/* ==================================================================
   SIMULATEUR, AIDES ET DEVIS (/v1/offres, 2026-10-23)
   Le HTML et le calcul sont ceux de la vitrine (_php/simulateurs.php,
   _php/offres.php, _js/tarifs.js) ; ces regles en sont reprises de
   vitrine.css, avec les couleurs et les titres de l'ancien visuel.
   ================================================================== */
.v1-simu {
    --fond: #f2f2f2;
    --surface: #fff;
    --bord: #dee2e6;
    --bord-fort: #ced4da;
    --texte: #212529;
    --texte-2: #555;
    --texte-3: #6b6b6b;
    --primaire: #1e4892;
    --primaire-fonce: #163672;
    --primaire-doux: #e8edf6;
    --succes: #067647;
    --succes-fond: #ecfdf3;
    --succes-fonce: #05603a;
    --alerte: #8a4b00;
    --alerte-fond: #fff4e5;
    --rayon: 6px;
    --soleil: #e8edf6;
    --nuit: #0f1a3a;
    --ombre-haute: 0 10px 30px rgba(0, 0, 0, .12);
}
.v1-simu .v-simu-saisie, .v1-simu .v-simu-devis, .v1-simu .v-fin-aides li, .v1-simu .v-simu-case, .v1-simu .v-info, .v1-simu input { border-radius: var(--rayon) !important; }
.v1-simu h2, .v1-simu h3, .v1-simu legend, .v1-simu .v-simu-libelle { font-family: 'oswald'; font-weight: 400; text-transform: uppercase; color: var(--v1-titre); }
.v1-simu .v-fin-bloc > h2, .v1-simu .v-fin-commune h2 { font-size: 1.25rem; }
.v1-simu .v-info-corps h3, .v1-simu .v-fin-aide-tete h3 { font-size: 1rem; }
.v1-simu .v-simu-total b, .v1-simu .v-info-prix { font-family: 'oswald'; font-weight: 400; letter-spacing: 0; }
.v1-simu .v-bouton { border-radius: 4px; font-family: 'oswald'; text-transform: uppercase; font-weight: 400; letter-spacing: 1px; }
.v1-simu a:not(.v-bouton) { color: var(--primaire); }
.evitement { position: absolute; inset-inline-start: -9999px; top: 0; }
.v-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 10px; border: 1px solid transparent; background: var(--primaire); color: var(--surface); font-weight: 600; text-decoration: none; }
.v-bouton:hover { background: var(--primaire-fonce); }
.v-bouton-contour { background: var(--surface); border-color: var(--bord-fort); color: var(--texte); }
.v-bouton-contour:hover { background: var(--fond); }
.v-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.v-module-specs { margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--texte-2); }
.v-module-specs li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--bord); }
.v-module-specs li b { color: var(--texte); text-align: end; }
.v-tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--primaire-doux); color: var(--primaire); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.v-tag-sombre { background: var(--soleil); color: var(--primaire); }
.v-apercu-fermer { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface); color: var(--nuit); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.v-apercu-fermer:focus-visible { outline: 3px solid var(--primaire); outline-offset: 2px; }
.v-simu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.v-simu-saisie, .v-simu-resultat { display: grid; gap: 18px; }
.v-simu-saisie { padding: 22px; border: 1px solid var(--bord); border-radius: 16px; background: var(--surface); }
.v-simu-champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.v-simu-champ > label, .v-simu-champ legend, .v-simu-libelle { font-weight: 600; font-size: 15px; color: var(--texte); }
.v-simu-champ legend { margin-bottom: 4px; }
.v-simu-champ input[type="number"], .v-simu-champ input[type="text"] { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--bord-fort); border-radius: 10px; background: var(--surface); color: var(--texte); font: inherit; }
.v-simu-champ input:focus-visible { outline: 3px solid var(--primaire); outline-offset: 2px; }
.v-simu-nombre { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; }
.v-simu-nombre input[type="range"] { width: 100%; accent-color: var(--primaire); }
.v-simu-case { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; font-size: 15px; cursor: pointer; }
.v-simu-case input { width: 18px; height: 18px; accent-color: var(--primaire); }
.v-simu-case b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-simu-case:has(input:checked) { border-color: var(--primaire); background: var(--primaire-doux); }
.v-simu-case:has(input:disabled) { opacity: 0.55; cursor: default; }
/* Ligne d'option + bouton « ? » qui ouvre le detail (2026-10-23) */
.v-simu-ligne { display: flex; align-items: stretch; gap: 8px; }
.v-simu-ligne .v-simu-case { flex: 1; min-width: 0; }
.v-info { flex: none; width: 44px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); color: var(--primaire); font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; }
.v-info:hover { border-color: var(--primaire); background: var(--primaire-doux); }
.v-info:focus-visible { outline: 3px solid var(--primaire); outline-offset: 2px; }
.v-info[hidden] { display: none; }
.v-info-fenetre { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--rayon); background: var(--surface); color: var(--texte); box-shadow: var(--ombre-haute); overflow: auto; }
.v-info-fenetre::backdrop { background: rgb(10 18 48 / 0.7); }
.v-info-fenetre img { display: block; width: 100%; height: auto; }
.v-info-fermer { position: absolute; top: 12px; inset-inline-end: 12px; box-shadow: var(--ombre-haute); }
.v-info-corps { padding: 20px 24px 24px; display: grid; gap: 10px; }
.v-info-corps h3 { margin: 0; font-size: 22px; }
.v-info-prix { margin: 0; font-size: 22px; font-weight: 800; color: var(--primaire); font-variant-numeric: tabular-nums; }
.v-info-prix span { font-size: 14px; font-weight: 500; color: var(--texte-2); }
.v-info-corps p { margin: 0; }
/* « Aucun abonnement », mis en avant en tete de /offres */
.v-sans-abo { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 6px 0 14px; padding: 12px 18px; border-radius: 12px; background: var(--orange); color: var(--nuit); font-size: 17px; }
.v-sans-abo b { font-size: 20px; font-weight: 800; }
.v-simu-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.v-simu-devis { padding: 22px; border: 1px solid var(--bord); border-radius: 16px; background: var(--surface); box-shadow: var(--ombre-haute); }
.v-simu-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.v-simu-table th { text-align: start; font-size: 13px; font-weight: 600; color: var(--texte-3); padding: 0 0 8px; border-bottom: 1px solid var(--bord); }
.v-simu-table td { padding: 9px 0; border-bottom: 1px solid var(--bord); vertical-align: top; }
.v-simu-table td small { color: var(--texte-3); }
.v-simu-table .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; padding-inline-start: 12px; }
.v-simu-offert td { color: var(--succes); }
.v-simu-offert s { color: var(--texte-3); }
.v-simu-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; margin-top: 16px; }
.v-simu-total span { font-weight: 600; }
.v-simu-total b { font-size: clamp(30px, 4vw, 40px); font-weight: 800; letter-spacing: -0.03em; color: var(--primaire); font-variant-numeric: tabular-nums; }
.v-simu-total small { grid-column: 1 / -1; text-align: end; color: var(--texte-3); font-size: 13px; }
.v-simu-economie { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--succes-fond); color: var(--succes); font-size: 14.5px; }
.v-fin-resultat { display: grid; gap: 28px; margin-top: 36px; }
.v-fin-commune h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 8px 0 4px; }
.v-fin-commune p { color: var(--texte-2); }
.v-fin-bloc { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--bord); }
.v-fin-bloc > h2 { font-size: clamp(22px, 2.6vw, 28px); }
.v-fin-reste td { border-bottom: 0; padding-top: 14px; }
.v-fin-note { padding: 12px 16px; border-inline-start: 4px solid var(--primaire); border-radius: 8px; background: var(--primaire-doux); }
.v-fin-aides { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.v-fin-aides li { display: grid; gap: 8px; align-content: start; padding: 18px; border: 1px solid var(--bord); border-radius: 14px; background: var(--surface); font-size: 14.5px; color: var(--texte-2); }
.v-fin-aide-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.v-fin-aide-tete h3 { font-size: 16.5px; color: var(--texte); }
.v-fin-financeur { font-weight: 600; color: var(--primaire); }
.v-fin-pastille { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.p-ok { background: var(--succes-fond); color: var(--succes); }
.p-verif { background: var(--primaire-doux); color: var(--primaire-fonce); }
.p-seuil { background: var(--alerte-fond); color: var(--alerte); }
.p-info { background: var(--fond); color: var(--texte-2); border: 1px solid var(--bord); }
.v-fin-dossier-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.v-fin-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; margin: 0; padding: 22px; border: 1px solid var(--bord); border-radius: 16px; background: var(--surface); }
.v-fin-dl dt { font-weight: 700; color: var(--texte); margin-top: 10px; }
.v-fin-dl dd { margin: 0; color: var(--texte-2); }
.v-fin-dl ul { margin: 4px 0 0; padding-inline-start: 20px; }
.v-fin-devis { max-width: 760px; }
.v-bouton-appel { min-height: 56px; padding: 0 28px; font-size: 17px; background: var(--succes); box-shadow: var(--ombre-haute); animation: v-saut 4s ease-in-out infinite; }
.v-bouton-appel:hover, .v-bouton-appel:focus-visible { background: var(--succes-fonce); animation-play-state: paused; }
.v-simu-resultat .v-actions .v-bouton { width: 100%; justify-content: center; cursor: pointer; font: inherit; font-weight: 700; }
.v-aides-zone { display: grid; gap: 12px; }
.v-aides-statut { margin: 0; font-size: 15px; color: var(--texte-2); }
.v-aides-statut:empty, .v-aides-statut[hidden], .v-aides-zone [hidden] { display: none; }
@keyframes v-saut { 0%, 82%, 100% { transform: translateY(0); } 86% { transform: translateY(-6px); } 90% { transform: translateY(0); } 94% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .v-bouton-appel { animation: none; } }
.v-demo-form { display: flex; flex-direction: column; gap: 14px; max-width: 620px; margin-top: 8px; }
.v-demo-champ { display: flex; flex-direction: column; gap: 6px; }
.v-demo-champ label { font-weight: 600; font-size: 15px; }
.v-demo-facultatif { font-weight: 400; color: var(--texte-3); }
.v-demo-champ input[type="text"], .v-demo-champ input[type="email"] { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--bord-fort); border-radius: 10px; background: var(--surface); color: var(--texte); font: inherit; }
.v-demo-champ input:focus-visible { outline: 3px solid var(--primaire); outline-offset: 2px; border-color: var(--primaire); }
.v-demo-aide { font-size: 14px; color: var(--texte-3); margin-top: 8px; }
.v-demo-form .v-bouton { align-self: flex-start; cursor: pointer; font: inherit; font-weight: 600; }
.v-demo-form-court .v-bouton { align-self: stretch; width: 100%; justify-content: center; }
.v-demo-combo { position: relative; }
.v-demo-liste { position: absolute; z-index: 20; top: calc(100% + 4px); inset-inline-start: 0; inset-inline-end: 0; max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--bord-fort); border-radius: 10px; box-shadow: var(--ombre-haute); }
.v-demo-liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.v-demo-liste li[aria-selected="true"], .v-demo-liste li:hover { background: var(--primaire-doux); }
.v-demo-liste .v-demo-dep { color: var(--texte-3); font-size: 14px; }
.v-demo-piege { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.v-demo-alerte { margin: 4px 0 12px; padding: 12px 16px; border-inline-start: 4px solid var(--primaire); background: var(--primaire-doux); border-radius: 8px; max-width: 620px; }
@media (min-width: 992px) {
    .v-simu { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .v-simu-resultat { position: sticky; top: 16px; }
}

/* Les grands chiffres de l'accueil (a la place des reseaux sociaux) */
.qrchiffres { list-style: none; margin: 0; padding: 0; }
.qrchiffres li { display: grid; padding: 1em 0; border-bottom: 1px solid var(--v1-filet); text-align: center; }
.qrchiffres b { font-family: 'oswald'; font-weight: 400; font-size: 1.9rem; line-height: 1.1; color: var(--v1-bleu); }
.qrchiffres span { font-family: 'oswald'; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: var(--v1-discret); }

/* Fiche de ville en fenetre. 800 px (2026-10-24) : la fiche passe sa colonne de 430 a 620 px
   au-dela de 768 px de large ; en dessous, une question tenait sur deux lignes. */
.qrphoto-ville { aspect-ratio: 4 / 3; object-fit: cover; }
.qrfenetre { width: min(800px, calc(100vw - 16px)); height: min(860px, calc(100dvh - 16px)); padding: 0; border: 0; border-radius: .3rem; background: var(--v1-blanc); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); overflow: hidden; }
.qrfenetre[open] { display: flex; flex-direction: column; }
.qrfenetre::backdrop { background: rgba(0, 0, 0, .7); }
.qrfenetre-tete { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .4em .4em .4em 1em; border-bottom: 1px solid var(--v1-filet); }
.qrfenetre-tete .qrtxtlk { padding-inline-end: 0; font-size: 13px; }
.qrfenetre-fermer { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--v1-fond); color: var(--v1-texte); font-size: 18px; cursor: pointer; }
.qrfenetre iframe { flex: 1; width: 100%; border: 0; }

/* « Vous êtes… » : une entree par public, sur le modele de la liste des villes */
.qrpublics { list-style: none; margin: 0; padding: 0; }
.qrpublics a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .75em; align-items: center; padding: 1em 1.25em; }
.qrpublics b { font-family: 'oswald'; font-weight: 400; text-transform: uppercase; color: var(--v1-bleu); }
.qrpublics a:hover b, .qrpublics a:focus-visible b { text-decoration: underline; }
/* Photo ronde de la tuile « Vous êtes… » : remplit le haut de la carte, cadree sur la plaque. */
.qrpublics-photo { display: block; width: 170px; height: 170px; margin: 0 auto 1.5em; border-radius: 50%; object-fit: cover; object-position: 2% 50%; border: 4px solid var(--v1-blanc); box-shadow: 0 0 0 1px var(--v1-filet), 0 6px 18px rgba(30, 72, 146, .18); }
.qrpublics span { grid-column: 1; font-size: 13px; color: var(--v1-discret); }
.qrpublics i { grid-column: 2; grid-row: 1 / span 2; color: var(--v1-bleu); }

/* En-tete (2026-10-23) : bande de l'offre, logo en mot « QRAVENUE• » a la
   maniere de Conversa, liens utiles. Orange de l'offre : celui de la vitrine. */
:root { --v1-offre: #f7a51b; --v1-nuit: #0f1a3a; }
.qrtete { background: var(--v1-blanc); border-bottom: 1px solid var(--v1-filet); }
/* Bandeau d'offre (2026-10-24) : bleu, texte blanc. La remise est une information,
   le simulateur un bouton a part : deux elements, separes par un filet. */
.qrbande { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5em 1.25em; padding: .55em 1em; background: var(--v1-bleu); color: var(--v1-blanc); font-size: 14px; text-align: center; }
.qrbande-offre { display: flex; align-items: center; gap: .6em; margin: 0; }
.qrbande b { font-weight: 700; }
.qrbande-suite { display: inline-flex; align-items: center; gap: .4em; padding: .3em .95em; border: 1px solid var(--v1-blanc); border-radius: 999px; color: var(--v1-blanc); font-family: 'oswald'; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; line-height: 1.3; }
.qrbande-suite:hover, .qrbande-suite:focus-visible { background: var(--v1-blanc); color: var(--v1-bleu); text-decoration: none; }
.qrbande-suite:focus-visible { outline: 2px solid var(--v1-blanc); outline-offset: 2px; }
.qrbande-point { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--v1-blanc); animation: qrpulse 1.6s ease-out infinite; }
@media (min-width: 576px) { .qrbande-offre { padding-inline-end: 1.25em; border-inline-end: 1px solid rgba(255, 255, 255, .4); } }
@keyframes qrpulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .qrbande-point { animation: none; } }
.qrtete-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5em 1.5em; padding-top: .9em; padding-bottom: .9em; }
.qrlogo { font-family: 'oswald'; font-weight: 600; font-size: 26px; letter-spacing: .12em; color: var(--v1-texte); text-decoration: none; white-space: nowrap; }
.qrlogo:hover { color: var(--v1-texte); }
.qrlogo-point { display: inline-block; width: 9px; height: 9px; margin-inline-start: 3px; border-radius: 50%; background: var(--v1-bleu); vertical-align: super; }
.qrtete-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25em 1.25em; }
.qrtete-nav a { font-family: 'oswald'; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; color: var(--v1-titre); text-decoration: none; }
.qrtete-nav a:hover { color: var(--v1-bleu); }
.qrtete-client { padding: .35em .9em; border: 1px solid var(--v1-bleu); border-radius: .25rem; color: var(--v1-bleu) !important; }

/* Pied de page : mentions legales, confidentialite, securite */
.qrpied { padding: 2em 16px 3em; text-align: center; }
.qrpied p { margin-bottom: .5em; }
.qrpied-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: .25em 1.5em; }
.qrpied-liens a { color: var(--v1-titre); }

/* Tuile Espace client */
.qrclient { background: var(--v1-bleu); color: var(--v1-blanc); border: 0; }
.qrclient .qrsmall, .qrclient .qrtitre, .qrclient .card-text, .qrclient .qrtxtlk { color: var(--v1-blanc); }
.qrclient .card-footer { background: rgba(0, 0, 0, .15); border-top: 0; }
.qrclient .qrlienblock, .qrclient .qrlienblock:hover { color: var(--v1-blanc); }
.qrclient-icone { display: block; margin-top: .75rem; text-align: center; font-size: 2.5rem; }
.qrcompte { color: var(--v1-discret); font-size: .8em; }

/* Video de la tuile Presentation et son bouton */
.qrvideo { position: relative; }
.qrvideo video { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; background: var(--v1-nuit); }
.qrvideo-son { position: absolute; inset-inline-end: .6rem; top: .6rem; display: inline-flex; align-items: center; gap: .4em; padding: .35em .8em; border: 0; border-radius: .25rem; background: rgba(0, 0, 0, .65); color: var(--v1-blanc); font-family: 'oswald'; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
.qrvideo-son:hover, .qrvideo-son[aria-pressed="true"] { background: var(--v1-bleu); }
@media (prefers-reduced-motion: reduce) { .qrvideo video { animation: none; } }

/* /v1/offres en tuiles (2026-10-23) : prix en grand, liste « inclus » sur deux colonnes */
.qrprix { margin: 0 0 .75rem; text-align: center; font-family: 'oswald'; }
.qrprix b { font-weight: 400; font-size: 2rem; line-height: 1.1; color: var(--v1-bleu); }
.qrprix s { color: var(--v1-discret); margin-inline-end: .25em; }
.qrclient .qrprix b { color: var(--v1-blanc); }
.qrinclus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5em 1.5em; }
.qrinclus li { display: flex; align-items: center; gap: .6em; }
/* Boutons du simulateur en bleu QRAvenue (le vert d'appel de la vitrine n'est pas d'ici) */
.v1-simu .v-bouton-appel { background: var(--primaire); }
.v1-simu .v-bouton-appel:hover, .v1-simu .v-bouton-appel:focus-visible { background: var(--primaire-fonce); }
/* Les aides en tuiles, quatre par rangee comme l'accueil */
@media (min-width: 1200px) { .v1-simu .v-fin-aides { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Page d'une ville (/v1/ville/<nom>) */
.qrphoto-lieu { aspect-ratio: 4 / 3; object-fit: cover; }
.qrparcours { list-style: none; margin: 0; padding: 0; }
.qrparcours li { padding: .4em 0; border-top: 1px solid var(--v1-filet); }
.qrparcours small { color: var(--v1-discret); }
.qrliens { list-style: none; padding: 0; }

/* Page des visiteurs et joueurs (/v1/visiteurs) */
.qretapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.qretapes li { counter-increment: etape; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 0 .6em; padding: .75em 0; border-top: 1px solid var(--v1-filet); }
.qretapes li::before { content: counter(etape); grid-row: 1 / span 2; display: grid; place-content: center; width: 2em; height: 2em; border-radius: 50%; background: var(--v1-bleu); color: var(--v1-blanc); font-family: 'oswald'; }
.qretapes b { font-family: 'oswald'; font-weight: 400; text-transform: uppercase; color: var(--v1-titre); }
.qretapes span { font-size: 13px; }
.qrfonction-icone { display: block; text-align: center; font-size: 2rem; color: var(--v1-bleu); margin-top: .5rem; }
.qrclassement { width: 100%; border-collapse: collapse; font-size: 13px; }
.qrclassement th { font-family: 'oswald'; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; color: var(--v1-discret); padding: 0 0 .4em; border-bottom: 1px solid var(--v1-filet); }
.qrclassement td { padding: .45em 0; border-bottom: 1px solid var(--v1-filet); }
.qrclassement .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qrclassement td:nth-child(2) { overflow-wrap: anywhere; padding-inline-end: .5em; }
.qrrang { display: inline-grid; place-content: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--v1-fond); font-family: 'oswald'; }
.qrpodium .qrrang { background: var(--v1-bleu); color: var(--v1-blanc); }
.qrpodium td:last-child { font-weight: 700; color: var(--v1-bleu); }
.qrou-jouer { list-style: none; margin: 0; padding: 0; }
.qrou-jouer li { display: grid; padding: .5em 0; border-top: 1px solid rgba(255, 255, 255, .25); }
.qrou-jouer a { color: var(--v1-blanc); font-family: 'oswald'; text-transform: uppercase; letter-spacing: 1px; }
.qrou-jouer small { color: rgba(255, 255, 255, .8); }
.qrphoto-bandeau { aspect-ratio: 2 / 1; object-fit: cover; }

/* Plan et vignettes de la page d'une ville */
.qrcarte { height: 460px; border: 1px solid var(--v1-filet); border-radius: .25rem; }
.qrrepere-montre { animation: qrsaut .9s ease-out 2; }
@keyframes qrsaut { 0%, 100% { margin-top: -37px; } 40% { margin-top: -54px; } }
@media (prefers-reduced-motion: reduce) { .qrrepere-montre { animation: none; } }
.qrvignettes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.qrvignettes a { display: block; height: 100%; border: 1px solid var(--v1-filet); border-radius: .25rem; background: var(--v1-blanc); color: var(--v1-texte); text-decoration: none; overflow: hidden; }
.qrvignettes a:hover { border-color: var(--v1-bleu); }
.qrvignette-photo { display: block; aspect-ratio: 4 / 3; background: var(--v1-fond); }
.qrvignette-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qrvignette-titre { display: block; padding: .5em .6em; font-family: 'oswald'; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--v1-titre); line-height: 1.3; }

/* Dossier et devis cote a cote (/v1/offres) : deux tuiles, sans le filet de section */
.v1-simu .qrduo .v-fin-bloc { padding-top: 0; border-top: 0; }
.v1-simu .qrduo .v-fin-bloc > h2 { font-size: 1.1rem; text-align: center; }
.v1-simu .qrduo .v-fin-devis { max-width: none; }
.v1-simu .qrduo a[href="#t-devis"] { display: none; }

/* Bulle d'un repere deplie : photo, nom, « Voir la fiche » ; un clic ouvre la fiche */
.qrbulle { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: start; cursor: pointer; font: inherit; }
.qrbulle img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .2rem; margin-bottom: .5em; }
.qrbulle-nom { display: block; font-family: 'oswald'; text-transform: uppercase; letter-spacing: .5px; font-size: 14px; color: var(--v1-texte); line-height: 1.3; }
.qrbulle-voir { display: inline-block; margin-top: .6em; padding: .35em .8em; border-radius: .25rem; background: var(--v1-bleu); color: var(--v1-blanc); font-family: 'oswald'; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.qrbulle:hover .qrbulle-voir, .qrbulle:focus-visible .qrbulle-voir { background: var(--v1-bleu-fonce, #163672); }
.qrbulle:focus-visible { outline: 2px solid var(--v1-bleu); outline-offset: 2px; }
.qrlogo-ville { padding-bottom: 0; text-align: center; } .qrlogo-ville img { max-width: 100%; max-height: 140px; object-fit: contain; }

/* Textes longs (mentions legales, confidentialite) en tuiles */
.qrdoc h2 { font-family: 'oswald'; font-weight: 400; text-transform: uppercase; font-size: 1.1rem; letter-spacing: .03em; color: var(--v1-titre); margin: 1.5em 0 .6em; text-align: start; }
.qrdoc > p:first-child + * h2, .qrdoc .v-doc-editeur h2 { margin-top: 0; text-align: center; }
.qrdoc ul { padding-inline-start: 1.2em; }
.qrdoc li { margin-bottom: .4em; }
.qrdoc a { color: var(--v1-bleu); }

/* Formulaires au format v1 (connexion de l'espace client) */
.qrform .form-label { font-weight: 700; }
.qrform .form-control:focus, .qrlangue .form-select:focus { border-color: var(--v1-bleu); box-shadow: 0 0 0 .2rem var(--v1-bleu-doux, #e8edf6); }
.qrbouton { display: inline-block; padding: .6em 1.2em; border: 0; border-radius: .25rem; background: var(--v1-bleu); color: var(--v1-blanc); font-family: 'oswald'; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
.qrbouton:hover, .qrbouton:focus-visible { background: #163672; }

/* Formulaire de contact : champ piege invisible, mention facultatif */
.qrpiege { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qrfacultatif { font-weight: 400; color: var(--v1-discret); }
.qraccroche { font-size: 1.15rem; line-height: 1.5; }
.qrpoints { margin: 0; padding-inline-start: 1.1em; }
.qrpoints li { margin-bottom: .5em; font-size: 14px; }
.qrpoints li::marker { color: var(--v1-bleu); }

/* ==================================================================
   L'ASSISTANT (2026-10-24) : pastille en bas a droite, panneau, fil.
   ================================================================== */
.qra { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 1050; font-family: 'lato', sans-serif; }
.qra { --qra-large: 250px; }
/* Le sceau de QR : rond bleu, « QR » en Oswald, anneau pointille. */
.qra-sceau { display: block; width: 100%; height: 100%; overflow: visible; }
.qra-sceau-fond { fill: var(--v1-bleu); }
.qra-sceau-anneau circle:first-child { fill: none; stroke: var(--v1-blanc); stroke-width: 1.1; stroke-dasharray: 1.4 2.4; opacity: .7; }
.qra-sceau-repere { fill: var(--v1-blanc); }
.qra-sceau-lettres { fill: var(--v1-blanc); font-family: 'oswald'; font-weight: 600; font-size: 13px; letter-spacing: .5px; }
.qra-sceau-anneau { transform-origin: 20px 20px; transform-box: view-box; }
/* La pastille : fermee, le sceau seul ; trois cycles a la premiere page de la
   visite (.qra-anime, pose par le script), puis plus rien. La derniere image de
   chaque animation est l'etat ferme. Le survol l'emporte (animation retiree). */
.qra-bulle { position: relative; display: flex; align-items: center; height: 60px; width: 60px; padding: 0; overflow: hidden; border: 1px solid var(--v1-filet); border-radius: 999px; background: var(--v1-blanc); color: var(--v1-texte); box-shadow: 0 6px 20px rgba(0, 0, 0, .22); cursor: pointer; transition: width .38s ease, transform .2s ease; }
.qra-bulle-sceau { width: 46px; height: 46px; margin: 0 6px; flex-shrink: 0; }
.qra-bulle-textes { position: relative; flex: 1; align-self: stretch; }
.qra-bulle-textes > span { position: absolute; inset-inline-start: 4px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: 'oswald'; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; opacity: 0; }
.qra-bulle-textes > span:first-child { color: var(--v1-bleu); }
.qra-anime .qra-bulle { animation: qra-respire 10s ease 3; }
.qra-anime .qra-bulle-textes > span:nth-child(1) { animation: qra-phrase-1 10s linear 3; }
.qra-anime .qra-bulle-textes > span:nth-child(2) { animation: qra-phrase-2 10s linear 3; }
.qra-anime .qra-bulle-textes > span:nth-child(3) { animation: qra-phrase-3 10s linear 3; }
.qra-anime .qra-bulle .qra-sceau-anneau { animation: qra-plateau 10s linear 3; }
@keyframes qra-respire { 0%, 2% { width: 60px; } 5%, 76% { width: var(--qra-large); } 79%, 100% { width: 60px; } }
@keyframes qra-phrase-1 { 0%, 5% { opacity: 0; } 7%, 25% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes qra-phrase-2 { 0%, 27% { opacity: 0; } 29%, 49% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes qra-phrase-3 { 0%, 51% { opacity: 0; } 53%, 73% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes qra-plateau { to { transform: rotate(360deg); } }
.qra-bulle:hover, .qra-bulle:focus-visible { width: var(--qra-large); animation: none; }
.qra-bulle:hover .qra-bulle-textes > span, .qra-bulle:focus-visible .qra-bulle-textes > span { animation: none; opacity: 0; }
.qra-bulle:hover .qra-bulle-textes > span:nth-child(2), .qra-bulle:focus-visible .qra-bulle-textes > span:nth-child(2) { opacity: 1; }
.qra-ouvert .qra-bulle { display: none; }
/* Pendant que QR ecrit, l'anneau tourne vite. */
.qra-pense .qra-sceau-anneau { animation: qra-plateau 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .qra-anime .qra-bulle, .qra-anime .qra-bulle-textes > span, .qra-anime .qra-bulle .qra-sceau-anneau, .qra-pense .qra-sceau-anneau { animation: none; }
  .qra-bulle { transition: none; }
}
.qra-lockup { flex: 1; display: flex; align-items: center; gap: .55em; }
.qra-lockup .qra-sceau { width: 32px; height: 32px; }
.qra-titre small { display: block; font-family: 'lato', sans-serif; font-size: 11px; letter-spacing: 0; color: var(--v1-discret); }
.qra-msg-tete { display: flex; align-items: center; gap: .4em; margin-bottom: .35em; }
.qra-avatar { width: 22px; height: 22px; }
.qra-nom { font-family: 'oswald'; letter-spacing: 1px; font-size: 13px; color: var(--v1-bleu); }
.qra-panneau { display: flex; flex-direction: column; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 32px)); background: var(--v1-blanc); border: 1px solid var(--v1-filet); border-radius: .3rem; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); overflow: hidden; }
.qra-panneau[hidden] { display: none; }
.qra-tete { display: flex; align-items: center; gap: .25em; padding: .6em .6em .6em 1em; border-bottom: 1px solid var(--v1-filet); }
.qra-titre { font-family: 'oswald'; letter-spacing: .1em; font-size: 16px; color: var(--v1-texte); line-height: 1.1; }
.qra-t-btn { width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--v1-titre); cursor: pointer; }
.qra-t-btn:hover, .qra-t-btn:focus-visible { background: var(--v1-fond); }
.qra-scroll { flex: 1; overflow-y: auto; padding: 1em; background: var(--v1-fond); }
.qra-accueil p { margin: 0 0 .8em; }
.qra-pistes { display: grid; gap: .5em; }
.qra-piste { padding: .55em .8em; border: 1px solid var(--v1-filet); border-radius: .25rem; background: var(--v1-blanc); color: var(--v1-texte); text-align: start; font-size: 14px; cursor: pointer; }
.qra-piste:hover, .qra-piste:focus-visible { border-color: var(--v1-bleu); color: var(--v1-bleu); }
.qra-fil { display: grid; gap: .7em; }
.qra-msg { max-width: 92%; padding: .6em .8em; border-radius: .3rem; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.qra-msg p { margin: 0 0 .5em; } .qra-msg p:last-child { margin-bottom: 0; }
.qra-msg ul { margin: 0 0 .5em; padding-inline-start: 1.1em; }
.qra-msg a { color: var(--v1-bleu); }
.qra-msg-moi { justify-self: end; background: var(--v1-bleu); color: var(--v1-blanc); white-space: pre-wrap; }
.qra-msg-ia { justify-self: start; background: var(--v1-blanc); border: 1px solid var(--v1-filet); }
.qra-erreur { margin: 0; color: #8a4b00; }
.qra-points { display: inline-flex; gap: 4px; }
.qra-points i { width: 7px; height: 7px; border-radius: 50%; background: var(--v1-discret); animation: qrapoint 1.2s infinite ease-in-out; }
.qra-points i:nth-child(2) { animation-delay: .15s; } .qra-points i:nth-child(3) { animation-delay: .3s; }
@keyframes qrapoint { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qra-points i { animation: none; opacity: .7; } }
.qra-composer { padding: .6em; border-top: 1px solid var(--v1-filet); }
.qra-boite { display: flex; align-items: flex-end; gap: .4em; padding: .3em .3em .3em .7em; border: 1px solid var(--v1-filet); border-radius: .3rem; }
.qra-boite:focus-within { border-color: var(--v1-bleu); }
.qra-saisie { flex: 1; resize: none; border: 0; outline: 0; padding: .35em 0; font: inherit; font-size: 14px; max-height: 120px; }
.qra-envoi { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--v1-bleu); color: var(--v1-blanc); cursor: pointer; }
.qra-envoi:disabled { background: var(--v1-filet); cursor: default; }
.qra-envoi.qra-stop { background: var(--v1-titre); }
.qra-legal { margin: .5em .2em 0; font-size: 11px; color: var(--v1-discret); line-height: 1.4; }
.qra-legal a { color: var(--v1-discret); }
@media (max-width: 600px) { .qra { inset-inline-end: 8px; bottom: 8px; } }

/* Tuile « Contactez-nous » de l'accueil (2026-10-24) : les quatre canaux, deux par ligne. */
/* La photo et son texte dans la meme case de grille (2026-10-24) : la tuile grandit
   avec le texte quand une langue le rend plus long que la photo (arabe, portugais…). */
.qrcontact { display: grid; }
.qrcontact > .card-img, .qrcontact > .card-img-overlay { grid-area: 1 / 1; }
.qrcontact > .card-img { height: 100%; object-fit: cover; }
.qrcontact > .card-img-overlay { position: static; }
.qrcontact-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; background: var(--v1-bleu); border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px); }
.qrcontact-liste li { min-width: 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.qrcontact-liste li:nth-child(even) { border-inline-start: 1px solid rgba(255, 255, 255, .22); }
.qrcontact-liste a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .6em; align-items: center; padding: .8em 1em; color: var(--v1-blanc); text-decoration: none; }
.qrcontact-liste i { grid-row: 1 / span 2; font-size: 1.35em; }
.qrcontact-liste span { font-family: 'oswald'; text-transform: uppercase; letter-spacing: 1px; line-height: 1.2; }
.qrcontact-liste small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; opacity: .85; }
.qrcontact-liste a:hover, .qrcontact-liste a:focus-visible { background: rgba(255, 255, 255, .12); color: var(--v1-blanc); }
.qrcontact-liste a:hover span { text-decoration: underline; }
.qrcontact-liste a:focus-visible { outline: 2px solid var(--v1-blanc); outline-offset: -2px; }

/* Le choix de la langue (2026-10-24) : menu depliant <details> dans l'en-tete */
.qrlangues { position: relative; }
.qrlangues summary { list-style: none; cursor: pointer; font-family: 'oswald'; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; color: var(--v1-titre); padding: .35em .5em; border-radius: .25rem; }
.qrlangues summary::-webkit-details-marker { display: none; }
.qrlangues summary:hover, .qrlangues[open] summary { color: var(--v1-bleu); background: var(--v1-fond); }
.qrlangues ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 1060; min-width: 160px; margin: 0; padding: .4em 0; list-style: none; background: var(--v1-blanc); border: 1px solid var(--v1-filet); border-radius: .3rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.qrlangues li a { display: block; padding: .4em 1em; color: var(--v1-texte); text-decoration: none; font-family: 'lato', sans-serif; text-transform: none; letter-spacing: 0; }
.qrlangues li a:hover, .qrlangues li a[aria-current] { background: var(--v1-fond); color: var(--v1-bleu); }

/* Ecriture de droite a gauche (arabe, 2026-10-24). L'espacement entre lettres
   casse la liaison des lettres arabes ; les fleches « suivant » se retournent. */
[dir="rtl"] body, [dir="rtl"] body * { letter-spacing: 0 !important; }
[dir="rtl"] .bi-caret-right-fill::before, [dir="rtl"] .bi-chevron-right::before, [dir="rtl"] .bi-arrow-right::before { display: inline-block; transform: scaleX(-1); }