/* ---- la carte de quartier : bandeau + deux deroulantes ------------------- * * Disposition retenue par Louis le 2026-08-24, apres six versions rejetees. La * carte prend toute la largeur avec l'adresse et les actions posees dessus, et * les lieux passent dans DEUX DEROULANTES fermees, cote a cote en bureau, l'une * sous l'autre sur telephone : les commerces et services a gauche, les villes a * droite. Verbatim : « comme sur mobile une liste deroulante, une a gauche avec * les commerces ecoles etc, et a droite une deroulante avec les villes ». * * Le style des deroulantes est celui de l'accordeon FAQ des articles TP * (`.tp-faq-item` dans template-article/theme/article/tp-article.css), repris * valeur par valeur : carte blanche, bord fin, coins a 12px, titre a gauche, * chevron a droite, bordure menthe au survol et fond doux a l'ouverture. Seule * difference, conforme a la reference donnee par Louis : pas de rond derriere le * chevron. * * CE QUI A ETE REJETE, et ne doit pas revenir : * - la fenetre de 600px avec une liste qui defile dedans ; * - la colonne etroite ou trois durees se serraient dans 300px ; * - les pastilles de filtre par categorie ; * - les deux cartes blanches empilees en pied de section ; * - les tuiles a duree en 22px (« trop gros, et encore pire sur mobile ») ; * - dix rangees a filets sous la carte (« ca fait tableau ») ; * - les memes lieux en groupes de texte courant, et trois autres partis pris * encore : carte seule, frise du temps, blocs rediges. * * SPECIFICITE, a lire avant de toucher une taille de police : le plugin * `apsulis` force sur tout le site `p`, `ul li` et `table td` en 13px/20px avec * `!important`, et les titres en Canela Thin teal. Un gabarit PHP n'a pas le * laissez-passer des pages Elementor. Toute regle de typographie de ce fichier * doit donc porter `!important` ELLE AUSSI : entre deux `!important`, c'est la * specificite qui tranche, et `#tpv2` la gagne toujours. Le bloc de fin de * fichier est la pour ca, il n'est pas decoratif. * ---------------------------------------------------------------------- */ /* --- le bandeau : la carte, pleine largeur, et la plaque posee dessus --- */ #tpv2 .qbandeau{position:relative} #tpv2 .qbandeau .qcarte{height:460px;border-radius:16px;box-shadow:var(--ombre-forte)} /* Le bloc affiche AVANT le clic. Le modele met un degrade cyan sur tous ses media (jeton `.media-vue`), et sur 460px de haut en pleine largeur ca fait un grand rectangle bleu ciel qui ne ressemble a rien - retour de Louis le 2026-08-21. On le neutralise POUR CETTE SECTION seulement : un gris tres legerement vert, dans lequel le bouton et la punaise ressortent, et qui ne promet pas une couleur que la carte n'aura pas. */ #tpv2 .qbandeau .qcarte{background:#E7ECEB} /* La plaque n'a plus besoin d'une colonne a elle : elle vit dans l'angle bas gauche de la carte. z-index 700 : au-dessus des pastilles Leaflet (600) et du bandeau de zoom, sinon le voile de ce dernier assombrit l'adresse et les boutons a chaque coup de molette. */ #tpv2 .qplaque{position:absolute;left:22px;bottom:22px;z-index:700;background:#fff; border-radius:14px;padding:18px 22px;box-shadow:var(--ombre-forte); max-width:min(470px,calc(100% - 44px))} #tpv2 .qplaque .media-actions{margin-top:16px} /* Les deux boutons de la plaque : meme hauteur et sur UNE ligne. Le bouton a fleche est plus haut par construction, son rond de 38px commandant sa hauteur. On ramene le rond a 30px et on aligne les rembourrages, ce qui donne 44px pour les deux. Hors de la plaque, le format d'origine du bouton reste la reference de marque. Le `nowrap` ne vaut qu'en bureau : dans 282px de plaque sur un telephone, deux boutons cote a cote deborderaient. */ @media (min-width:1001px){ #tpv2 .qplaque .media-actions{flex-wrap:nowrap;align-items:center} #tpv2 .qplaque .btn{font-size:14px!important;padding:11px 20px!important; line-height:1.4!important} #tpv2 .qplaque .btn.cta{padding:6px 7px 6px 18px!important;gap:12px} #tpv2 .qplaque .cta .fleche{flex:0 0 30px;width:30px;height:30px; border-radius:15px} #tpv2 .qplaque .cta .fleche svg{top:7px;left:7px;width:16px;height:16px} } /* --- les deux deroulantes ---------------------------------------------- */ #tpv2 .qreplis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px} #tpv2 .qrepli{align-self:start;background:#fff;border:1px solid var(--filet); border-radius:12px; transition:border-color .25s var(--sortie),background-color .25s var(--sortie)} #tpv2 .qrepli:hover{border-color:var(--menthe-2)} #tpv2 .qrepli[open]{background:#F8FAFC;border-color:var(--menthe-2)} #tpv2 .qrepli>summary{display:flex;flex-direction:row;align-items:center; justify-content:space-between;gap:16px;padding:16px 18px;cursor:pointer; list-style:none;color:var(--titre)} #tpv2 .qrepli>summary::-webkit-details-marker{display:none} #tpv2 .qrepli>summary .qtitre{flex:1 1 auto} #tpv2 .qrepli>summary .qn{flex:0 0 auto;color:var(--attenue)} #tpv2 .qrepli>summary .qchev{flex:0 0 auto;display:inline-flex; transition:transform .35s var(--sortie)} #tpv2 .qrepli>summary .qchev svg{display:block;width:18px;height:18px; stroke:var(--attenue);fill:none;stroke-width:1.9;stroke-linecap:round; stroke-linejoin:round} #tpv2 .qrepli>summary:hover .qchev svg{stroke:var(--tp)} #tpv2 .qrepli[open]>summary .qchev{transform:rotate(180deg)} #tpv2 .qrepli[open]>summary .qchev svg{stroke:var(--tp)} /* le contenu vit dans la carte, avec le meme retrait que la tete */ #tpv2 .qacces,#tpv2 .qvilles{padding:0 18px 16px} /* --- le contenu de la deroulante de gauche ---------------------------- */ #tpv2 .qgroupe:not(:first-child){padding-top:6px} #tpv2 .ql{display:inline-flex;align-items:center;gap:8px;padding:8px 2px 4px; color:var(--attenue)} #tpv2 .ql svg{flex:0 0 15px;width:15px;height:15px;display:block;stroke:var(--tp); fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #tpv2 .qi{display:flex;flex-direction:column} /* Une ligne est un bouton : elle recentre la carte sur son point, donc la deroulante commande la carte au lieu d'etre un cul-de-sac. D'ou le desamorcage complet du style de bouton du navigateur, et surtout un `color` explicite : sur iOS, un