/* Zihma — ESPACE PRESTATAIRE (planche « PRESTAIRE WEB », 38 frames de 1728 px). Se pose par-dessus app.css (jetons et composants partages du Lot 5) et espace.css (coquille d'application) : la barre laterale, les champs, les pilules, les StatCards, la Table, la navigation secondaire, les sections de reglages, les interrupteurs et les depots sont les memes composants que cote Client, colores par --accent (vert ; brun sur le rail et le Wallet). On ne definit ici que la coquille brune, les mises en page des ecrans et les pieces propres au Pro. Releves sur la planche (frame de 1728 px) : barre laterale x 21, largeur 244 colonne contenu x 296 -> 1727 pilules du haut hauteur 50, rayon 25 ; bouton « Publier un bien » 229 x 50 */ /* L'or a ete promu dans app.css (--or / --or-texte). Le rail est un APLAT brun (--pro-brun) et une seule nuance, tres legere, vers le bas ; la barre basse mobile (espace.css) lit les memes deux jetons. */ :root{ --pro-brun:#7a5c3f; --pro-brun-haut:#7a5c3f; --pro-brun-bas:#6e5236; } /* ------------------------------------------------------------- coquille */ .pro .esp__barre{background:linear-gradient(180deg,var(--pro-brun-haut),var(--pro-brun-bas))} .pro .esp__moi img{border-radius:50%;background:var(--surface)} .pro .esp__tel{color:var(--texte-inverse);opacity:.75} /* --------------------------------------------------------- barre du haut */ /* a la largeur de frame tout tient sur une ligne ; en dessous, le groupe de droite passe a la ligne plutot que de deborder de la page. */ /* Meme regle que l'espace Client : la barre de titre reste en haut. */ /* Meme panneau que l'entete Client : les deux espaces portent la meme piece. */ .pro__haut{display:flex;align-items:center;gap:18px;padding:var(--e3) var(--e5); margin-bottom:var(--e2);border-radius:var(--r6);box-shadow:var(--ombre-1); flex-wrap:wrap;position:sticky;top:0;z-index:20;background:var(--surface)} .pro__haut[data-colle="oui"]{box-shadow:var(--ombre-2)} .pro__titres{flex:0 0 auto} .pro__titre{font-size:var(--t10);font-weight:700;margin:0 0 2px;line-height:1.2} /* Meme regle que cote Client : quand aucun titre dominant n'existe, le fil d'Ariane EST le

et ne peut pas rester plus petit que ses sections. */ h1.pro__titre{font-size:var(--t11)} .pro__sous{font-size:var(--t4);color:var(--gris-faible);margin:0;line-height:1.3} /* Contextes de la barre (annee, plan, campagne) · corrections du 16/09 : ils situaient la page mais se lisaient comme deux gros CTA (aplat or, aplat gris, 48 px). Ils redeviennent des etiquettes de contexte : 36 px, texte 13 px, filet leger, fond transparent ; seul le petit jeton garde sa couleur. */ /* 20/09 : la hauteur descend du jeton compact partage (40 px) au lieu d'un 36 px propre a cette pilule — une etiquette de contexte reste secondaire par sa couleur et sa graisse, pas par une hauteur de plus. */ /* tete d'une page metier qui porte des pastilles (tableau de bord, abonnements) */ .pro__tete-metier{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e4);margin:0 0 var(--e4)} .pro__tete-metier .esp__h1{margin:0} .pro__pilules{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2)} .pro__pilule{--b-haut:var(--b-haut-petit);--b-marge:0 var(--e3) 0 var(--e2); --b-texte:var(--b-texte-petit);--b-graisse:500; --b-gouttiere:var(--e2);background:transparent;border:1px solid var(--bord); color:var(--gris-texte);flex:0 0 auto;white-space:nowrap} .pro__pilule--contour{--b-marge:0 var(--e3);color:var(--encre)} .pro__pilule--plan{color:var(--accent);font-weight:600} .pro__pilule--plan[data-ton="or"]{color:var(--or-texte)} a.pro__pilule:hover{background:var(--fond-creux);border-color:var(--bord-fort)} .pro__pilule .ic,.pro__pilule img{width:16px;height:16px;color:var(--gris-faible)} .pro__jeton{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;background:var(--accent);color:var(--texte-inverse);flex:0 0 22px} .pro__jeton .ic,.pro__jeton img{width:14px;height:14px;color:inherit} /* Sur l'or, un glyphe blanc tombe a 1,9:1. */ .pro__jeton[data-ton="or"]{background:var(--or);color:var(--encre)} .pro__fin{margin-left:auto;display:flex;align-items:center;gap:18px} .pro__cta{background:var(--accent);color:var(--texte-inverse)} .pro__cta:hover{background:var(--accent-sombre)} .pro__cta--gris{background:var(--gris-champ);color:var(--gris-fort)} .pro__cta--gris:hover{background:var(--gris-pilule)} .pro__cta .ic,.pro__cta img{width:20px;height:20px} .pro__cta .ic{filter:none} .pro__outils{display:flex;align-items:center;gap:12px} /* .pro__outil : geometrie et couleurs dans espace.css, avec .esp__rond — les deux espaces portent la meme commande d'outil. */ .pro__compte{display:flex;align-items:center;gap:12px} .pro__compte b{display:block;font-size:var(--t6);font-weight:600;line-height:1.2} .pro__compte span{display:block;font-size:var(--t4);color:var(--gris-faible)} .pro__compte .ic{width:18px;height:18px;color:var(--gris-texte)} /* Une zone de saisie, pas une pilule : elle portait --r-pilule (999 px) quand tous les champs du site sont a --r-champ. */ .pro-select{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px; border-radius:var(--r-champ);background:var(--gris-champ);font-size:var(--t6);color:var(--gris-fort)} .pro-select .ic{width:16px;height:16px} /* Le test de contraste tient a cette ligne : --gris-faible sur menthe echoue. */ .pro-todo{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--t6)} .pro-todo b{color:var(--gris-texte);font-weight:400} .pro-todo__vide{color:var(--gris-texte)} /* une date qui porte un evenement est une commande : main, survol, focus, selection */ .pro .pro-cal button[data-etat="occupe"]{cursor:pointer} .pro .pro-cal button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* ------------------------------------------------------ offres et listes */ .etiq{display:inline-flex;align-items:center;background:var(--gris-champ);color:var(--gris-fort)} .etiq[data-ton="sejour"]{background:var(--accent-fond);color:var(--accent-encre)} .etiq[data-ton="auto"]{background:var(--gris-champ);color:var(--gris-fort)} .etiq[data-ton="immo"]{background:var(--fond-creux);color:var(--accent)} .pro-toast{position:relative;margin:26px 0 0 auto;max-width:430px;background:var(--surface); border:1.5px solid var(--succes);border-radius:var(--r-champ);padding:20px 24px} .pro-toast b{display:block;font-size:var(--t7);font-weight:600;color:var(--accent-encre)} .pro-toast p{font-size:var(--t5);color:var(--gris-texte);margin:6px 0 0;max-width:300px} .pro-toast button{position:absolute;top:18px;right:18px;color:var(--gris-fort)} .pro-toast .ic{width:18px;height:18px} /* ------------------------------------------------------------ adaptatif */ @media (max-width:900px){ .pro__haut{flex-wrap:wrap;padding-right:0} .pro__titres{flex:1 1 100%;min-width:0} .pro__titre{font-size:var(--t8);overflow-wrap:anywhere} .pro-modale__tete{flex-wrap:wrap} .pro-modale{padding:18px} .pro-photos__vides{flex-wrap:wrap} .pro-photos__vide{flex:1 1 100%} .pro-photos__grille{grid-template-columns:minmax(0,1fr)} .pro-photos__grande{grid-row:auto} .pro-depot{padding:22px 14px} .pro__haut::after{left:0;right:0} .pro__fin{margin-left:0;width:100%;flex-wrap:wrap} } /* =================================================== composants du prestataire Ce qui suit couvre les 30 ecrans qui ne sont ni un tableau ni une grille de cartes : formulaires de publication, tarif, verification, detail d'offre, abonnements, campagnes, boost, profil. Les champs, pilules et tableaux viennent d'espace.css ; on ne definit ici que les blocs propres a ces ecrans. */ /* apercu de l'offre (publication, tarif, verification, campagnes) */ .pro-apercu{background:var(--fond);border-radius:var(--r-carte);padding:22px} .pro-apercu__eti{font-size:var(--t1);letter-spacing:.08em;color:var(--gris-faible);text-align:center;margin:0 0 16px} .pro-apercu__vue{position:relative;border-radius:var(--r4);overflow:hidden; background:var(--gris-champ)} .pro-apercu__img{width:100%;height:auto;display:block} /* Le meme voile que la carte du site : l'apercu doit montrer ce que le visiteur verra, pas une variante. */ .pro-apercu__vue::after{content:"";position:absolute;left:0;right:0;bottom:0; height:46%;pointer-events:none; background:linear-gradient(180deg,rgba(6,20,18,0) 0%,rgba(6,20,18,.34) 26%, rgba(6,20,18,.80) 54%,rgba(6,20,18,.94) 100%)} /* « Nouveau » est un ETAT, pas une note : il se lit en haut a gauche, la ou on lit un statut, et sans etoile. */ .pro-apercu__etat{position:absolute;top:14px;left:14px;z-index:2; display:inline-flex;align-items:center;height:28px;padding:0 var(--e3); border-radius:var(--r-pilule);background:var(--surface);color:var(--accent-encre); font-size:var(--t1);font-weight:700;letter-spacing:.06em;text-transform:uppercase} .pro-apercu__coeur{position:absolute;top:14px;right:14px;z-index:2; width:34px;height:34px;border-radius:50%; background:var(--voile-blanc);display:inline-flex; align-items:center;justify-content:center} /* Trois lignes, plafonnees au quart comme sur la carte du site. */ .pro-apercu__pied{position:absolute;left:0;right:0;bottom:0;z-index:2; box-sizing:border-box;max-height:25%;overflow:hidden; padding:0 var(--e4) var(--e3);display:flex;flex-direction:column; justify-content:flex-end;gap:2px;color:var(--texte-inverse)} .pro-apercu__nom,.pro-apercu__lieu,.pro-apercu__prix{min-width:0;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; /* Le pied est une colonne serree contre le bas de la vignette : sans ce `flex-shrink:0` les trois lignes se tassaient, et l'epingle de 13 px se retrouvait rognee de 3 px en haut et en bas par sa propre ligne. */ flex-shrink:0} .pro-apercu__nom{font-size:var(--carte-titre);font-weight:700;line-height:1.15; color:var(--texte-inverse);display:block} .pro-apercu__lieu{display:flex;align-items:center;gap:5px;font-size:var(--t1); line-height:1.2;color:var(--texte-inverse);opacity:.94} /* Le nom coupe a l'ellipse ; l'epingle, elle, se faisait rogner de 3 px. */ .pro-apercu__lieu .ic{flex:0 0 auto} .pro-apercu__prix{display:flex;align-items:baseline;gap:5px;margin:2px 0 0; font-size:var(--carte-prix);line-height:1.15;font-weight:700; color:var(--texte-inverse)} .pro-apercu__prix b{font-size:inherit;font-weight:700;color:inherit} .pro-apercu__unite{font-size:inherit;font-weight:500;opacity:.9} .pro-apercu__note{font-size:var(--t3);color:var(--gris-faible);text-align:center;margin:16px 0 0;line-height:1.5} .pro-apercu--petit{background:var(--surface);padding:0} .pro-apercu__t{display:flex;align-items:center;gap:10px;font-size:var(--t8);font-weight:600; color:var(--accent);margin:0 0 12px} .pro-apercu__x{font-size:var(--t4);color:var(--gris-texte);line-height:1.5;margin:0 0 20px} /* choix de la categorie : les six tuiles legacy (298 px, vides) n'existent plus, /pro/publication.html rend l'assistant (tuiles .pub__univers). Reste la question d'objectif d'une campagne. */ .pro-choix__q{font-size:var(--t8);font-weight:600;margin:0 0 22px} /* sections de formulaire */ .pro-pub{display:grid;grid-template-columns:1fr 1fr;gap:36px 64px;margin-top:30px} .pro-sect{margin-bottom:44px} .pro-sect__titre{font-size:var(--t9);font-weight:700;margin:0 0 18px} .pro-sect__titre i,.esp-champ2__e i,.pro-modale__titre i,.esp-form__photo i{color:var(--erreur);font-style:normal} .pro-sect__tete{display:flex;align-items:center;gap:16px;margin-bottom:18px} .pro-sect__tete .pro-sect__titre{margin:0;flex:1 1 auto} .pro-sect__sous{font-size:var(--t8);font-weight:700;margin:0;flex:1 1 auto} .pro-ajouter{background:var(--gris-champ);color:var(--gris-texte)} .pro-ajouter:hover{background:var(--gris-pilule)} .pro-ajouter .ic,.pro-ajouter img{width:16px;height:16px;flex:0 0 16px} /* Les pictogrammes monochromes sont des masques, plus des : `.ic` les couvre tous les deux. */ .pro-visuel > .ic{width:46px;height:46px} /* Quatre colonnes fixes donnaient des tuiles de 100 px sous 1500 px : les trois commandes de la tuile (retirer, remplacer, principale) n'y tenaient plus sur une ligne. La grille se remplit desormais par tuiles d'au moins 132 px — soit les quatre colonnes de la maquette a la largeur de frame, trois en dessous. */ .pro-visuels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px} .pro-visuel{aspect-ratio:1/1;border:1.5px dashed var(--accent-bord);border-radius:var(--r4);background:var(--surface); display:flex;align-items:center;justify-content:center;position:relative} .pro-visuel img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-champ)} .pro-visuel--plein{border-style:solid;border-color:transparent;padding:0} .pro-plat{position:relative;display:block} .pro-plat__nom{position:absolute;left:50%;bottom:10px;transform:translateX(-50%); max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis; background:var(--accent);color:var(--texte-inverse);border-radius:var(--r-pilule); padding:5px 14px;font-size:var(--t3);white-space:nowrap} .pro-zone{width:100%;min-height:400px;border:1px solid var(--gris-pilule);border-radius:var(--r-champ); background:var(--surface);padding:18px;font:inherit;font-size:var(--t6);resize:vertical} .pro-zone--courte{min-height:96px} .pro-puces{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .pro-puce{display:inline-flex;align-items:center;gap:8px;background:var(--gris-champ);border-radius:var(--r2); padding:8px 14px;font-size:var(--t5);color:var(--gris-fort)} .pro-puce--nu{background:var(--gris-champ)} .pro-liste{margin-top:22px} .pro-detail__case{display:flex;align-items:center;justify-content:space-between;gap:16px; font-size:var(--t6);padding:10px 0} .pro-detail__l{display:flex;align-items:center;justify-content:space-between;gap:16px; font-size:var(--t6);padding:8px 0} /* Le compteur est le composant partage d'app.css (.compteur, .compteur__b, .compteur__v). */ /* « 1fr » vaut « minmax(min-content,1fr) » : une etiquette longue elargit la colonne et pousse la page. Les colonnes doivent pouvoir se retrecir. */ .pro-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin:14px 0} /* Sans repli, le premier bouton d'une rangee alignee a droite sort par la GAUCHE sous 400 px et devient inatteignable. Vaut pour les quatre rangees d'actions du site. */ .pro-pub__actions{display:flex;justify-content:flex-end;gap:18px;margin-top:20px;flex-wrap:wrap} .pro-pub__actions--fin{margin-top:44px} /* photos de l'offre */ .pro-photos{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:40px;margin-top:20px} .pro-photos__titre{font-size:var(--t11);font-weight:700;margin:36px 0 10px} .pro-photos__note{font-size:var(--t6);color:var(--gris-fort);margin:0} .pro-depot{border:1.5px dashed var(--bord-fort);border-radius:var(--r-carte);padding:34px;text-align:center; margin-top:22px} .pro-depot .ic{width:34px;height:34px;color:var(--accent);margin:0 auto 12px} .pro-depot b{display:block;font-size:var(--t7);font-weight:600} .pro-depot p{font-size:var(--t4);color:var(--gris-texte);margin:6px 0 16px} .pro-depot__b{background:var(--accent-fond);color:var(--accent)} .pro-photos__grille{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px; margin-top:22px} .pro-photos__grille figure{margin:0;position:relative} .pro-photos__grande{grid-row:span 2} .pro-photos__grille img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-champ);display:block} .pro-photos__grande img{height:300px} .pro-photos__grille figcaption{position:absolute;top:12px;left:12px;background:var(--surface); border-radius:var(--r-pilule);padding:6px 14px;font-size:var(--t3); font-weight:600;display:inline-flex;align-items:center;gap:6px} .pro-photos__vides{display:flex;gap:22px;margin-top:22px} .pro-photos__vide{flex:0 0 230px;height:170px;border:1.5px dashed var(--bord-fort);border-radius:var(--r-champ); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:6px;font-size:var(--t4);color:var(--gris-faible)} .pro-photos__select{display:block;max-width:350px;margin-top:14px} .pro-conseil{background:var(--fond);border-radius:var(--r5);padding:26px;align-self:start} .pro-conseil__titre{display:flex;align-items:center;gap:10px;font-size:var(--t8);font-weight:600; color:var(--accent);margin:0 0 12px} .pro-conseil__texte{font-size:var(--t4);color:var(--gris-texte);line-height:1.55;margin:0 0 22px} /* tarif */ .pro-tarif{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:44px;margin-top:60px} .pro-tarif__titre{font-size:var(--t12);font-weight:700;margin:0 0 12px} .pro-tarif__sous{font-size:var(--t6);color:var(--gris-texte);line-height:1.55;margin:0 0 34px;max-width:520px} .pro-tarif__carte{padding:24px} /* L'etape « Prix et engagement » (§7) : mode, acompte, politique, capacite. Les intertitres et les trois nombres reprennent le format deja dessine — meme etiquette, meme boite de saisie que le prix juste au-dessus. */ .pro-tarif__carte + .pro-tarif__carte{margin-top:22px} .pro-tarif__h2{margin:0 0 6px;font-size:var(--t7);font-weight:600} .pro-tarif__carte > .pro-tarif__h2:not(:first-child){margin-top:30px} .pro-tarif__aide{margin:0 0 16px;font-size:var(--t3);color:var(--gris-texte);line-height:1.5} .pro-tarif__trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .pro-tarif__champ{min-width:0} /* La boite de saisie du tarif et ses deux etiquettes suivent le format des champs : elles etaient a 12 px et 8 px. */ .pro-tarif__saisie{display:flex;align-items:center;gap:14px;background:var(--fond);border-radius:var(--r-champ); padding:12px 16px} .pro-tarif__devise,.pro-tarif__unite{display:inline-flex;align-items:center;gap:8px; background:var(--accent-fond);border-radius:var(--r-champ); padding:8px 12px;font-size:var(--t6);color:var(--accent-encre)} .pro-tarif__unite{margin-left:auto} .pro-tarif__val{font-size:var(--t14);font-weight:600} .pro-tarif__calcul{background:var(--accent-fond);border-radius:var(--r-bouton);padding:18px 22px;margin-top:22px} .pro-tarif__calcul hr{border:0;margin:14px 0} .pro-tarif__l{display:flex;justify-content:space-between;gap:20px;font-size:var(--t5);color:var(--accent-encre); margin:0 0 10px} .pro-tarif__l--fort{font-size:var(--t7);color:var(--accent);margin:0 0 8px} /* verification finale */ .pro-verif__titre{font-size:var(--t14);font-weight:700;color:var(--accent-encre);margin:26px 0 12px} .pro-verif__sous{font-size:var(--t6);color:var(--gris-fort);line-height:1.55;margin:0 0 34px;max-width:660px} .pro-verif{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:40px;align-items:start} .pro-verif__col{display:flex;flex-wrap:wrap;gap:22px} .pro-verif__b{flex:1 1 100%;border:1px solid var(--gris-pilule);border-radius:var(--r4);padding:24px} .pro-verif__b--demi{flex:1 1 calc(50% - 11px)} .pro-verif__tete{display:flex;align-items:center;gap:14px;margin-bottom:16px} .pro-verif__tete h3{display:flex;align-items:center;gap:10px;font-size:var(--t7);font-weight:600; color:var(--accent);margin:0} .pro-verif__lien{margin-left:auto;font-size:var(--t4);text-decoration:underline;color:var(--gris-fort)} .pro-verif__paires{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px} .pro-verif__k{display:block;font-size:var(--t3);color:var(--gris-faible)} .pro-verif__v{font-size:var(--t6);margin:2px 0 0} .pro-verif__t{font-size:var(--t5);color:var(--gris-fort);margin:0 0 4px;line-height:1.5} .pro-verif__gros{font-size:var(--t9);font-weight:600;color:var(--accent);margin:0} .pro-verif__images{display:grid;grid-template-columns:1fr 1fr;gap:14px} .pro-verif__images img{width:100%;height:190px;object-fit:cover;border-radius:var(--r-bouton)} .pro-moderation{background:var(--accent-fond);border-radius:var(--r-carte);padding:26px;margin-top:26px} .pro-moderation h3{display:flex;align-items:center;gap:10px;font-size:var(--t7);font-weight:600; color:var(--accent);margin:0 0 12px} .pro-moderation .esp-btn{width:100%;margin-top:20px} /* avis (fiche de gestion, reputation) */ .pro-detail__fl--g{left:16px} .pro-detail__fl--d{right:16px} .pro-detail__carte{width:100%;height:auto;margin-top:14px} .pro-avis__liste{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px} .pro-avis{background:var(--fond);border-radius:var(--r-champ);padding:18px} .pro-avis__tete{display:flex;align-items:center;gap:12px;margin-bottom:12px} .pro-avis__tete img{width:42px;height:42px;border-radius:50%;object-fit:cover} .pro-avis__initiales{width:42px;height:42px;flex-basis:42px;font-size:var(--t2)} .pro-avis__tete b{font-size:var(--t6);font-weight:600} /* --or est un APLAT (1,9:1 en trait sur ivoire) ; les etoiles se lisent, elles prennent donc --or-texte, comme celles de app.css. */ .pro-avis__etoiles{display:flex;gap:2px;color:var(--or-texte)} .pro-avis__etoiles .ic{width:15px;height:15px} .pro-avis__etoiles .ic[data-icone="etoile-pleine"]{fill:currentColor} .pro-avis__date{margin-left:auto;font-size:var(--t3);color:var(--gris-faible)} .pro-avis__texte{font-size:var(--t4);color:var(--gris-texte);line-height:1.5;margin:0} /* reponse du prestataire (17/09/2026) : l'existante en retrait, sinon « Répondre » qui deplie un champ */ .pro-avis__rep{margin:var(--e3) 0 0;padding:var(--e3) var(--e3) var(--e3) var(--e4);border-left:3px solid var(--accent); background:var(--surface);border-radius:0 var(--r2) var(--r2) 0} .pro-avis__rep-l{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:var(--t2);font-weight:600;color:var(--accent-encre)} .pro-avis__rep-l .ic{width:14px;height:14px} .pro-avis__rep-t{margin:0;font-size:var(--t3);color:var(--gris-fort);line-height:1.5} .pro-avis__reponse{margin-top:var(--e3)} .pro-avis__repondre{display:inline-flex;align-items:center;gap:6px;min-height:var(--tactile);padding:0 var(--e3); border-radius:var(--r-pilule);border:1px solid var(--bord);background:var(--surface);font-size:var(--t3);font-weight:600; color:var(--vert);cursor:pointer;list-style:none} .pro-avis__repondre::-webkit-details-marker{display:none} .pro-avis__repondre:hover{background:var(--accent-fond)} .pro-avis__reponse[open] .pro-avis__repondre{background:var(--accent-fond);border-color:var(--accent-bord)} .pro-avis__form{display:grid;gap:var(--e2);margin-top:var(--e3)} .pro-avis__champ{width:100%;box-sizing:border-box;padding:var(--e2) var(--e3);border:var(--champ-bord);border-radius:var(--r-champ); font:inherit;font-size:var(--t3);resize:vertical;background:var(--surface)} .pro-avis__envoi{display:flex} .pro-avis__form .pro-etat{margin:0} /* abonnements : deux blocs independants (17/09/2026). A. l'abonnement Immobilier sur fond blanc borde (plus d'aplat vert : le vert ne reste qu'aux accents, le brun a la navigation) : titre, perimetre lu dans le catalogue, bascule Mensuelle/Annuelle, quatre PlanCards de meme hauteur sur fond ivoire, une seule mise en avant par un lisere or et une pilule discrete. B. le Boost & publicite, un bandeau menthe a part. */ .pro-abo{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r5); padding:var(--e6);margin:var(--e4) 0 var(--e5)} .pro-abo__tete{display:flex;flex-direction:column;gap:var(--e2)} .pro-abo__titre{font-size:var(--t9);font-weight:700;color:var(--encre);margin:0;line-height:1.15; letter-spacing:-.01em} .pro-abo__intro{font-size:var(--t4);color:var(--gris-fort);margin:0} .pro-abo__perimetre{display:flex;align-items:flex-start;gap:var(--e2);margin:0;font-size:var(--t3); color:var(--accent-encre);background:var(--accent-fond);border-radius:var(--r3); padding:var(--e2) var(--e3);align-self:flex-start;max-width:100%} .pro-abo__perimetre .ic{flex:0 0 16px;margin-top:2px} .pro-abo__offres{display:flex;align-items:center;gap:var(--e2) var(--e4);flex-wrap:wrap; margin-top:var(--e6);padding-top:var(--e5);border-top:1px solid var(--bord)} .pro-abo__h2{font-size:var(--t7);font-weight:700;margin:0;color:var(--encre);flex:1 1 auto;min-width:0} .pro-abo__sous{font-size:var(--t3);color:var(--gris-texte);margin:0;flex:1 1 100%;order:3} /* la bascule Mensuelle / Annuelle est le segmented control PARTAGE (.esp-segment, app.css) : meme hauteur, meme rayon, aucun contour double ; l'accent du Pro */ .pro-abo__offres .esp-segment a{min-height:var(--tactile);height:auto;font-weight:500} .pro-abo__offres .esp-segment [aria-current="page"]{background:var(--accent)} .pro-abo__offres .esp-segment sup{font-size:var(--t1);margin-left:2px;line-height:1} /* 21/09/2026, measured at 320 px: the two pills (padding 26 px) made the toggle 290 px wide, centred in a 254 px column, 3 px past the viewport. Below 360 px they share the column instead. */ @media (max-width:360px){ .pro-abo__offres .esp-segment{max-width:100%} .pro-abo__offres .esp-segment a{flex:1 1 0;min-width:0;padding:0 12px} } /* l'usage reel : trois StatCards partagees sous le titre */ .pro-abo__usage{margin-top:var(--e5)} .pro-abo__perimetre{margin-top:var(--e4)} .pro-abo .etat-vide{margin-top:var(--e5)} /* la formule actuelle se reconnait sans dominer : badge + contour vert leger */ .pro-formule__actuelle{position:absolute;top:calc(-1 * var(--pil-haut) / 2);right:var(--e3);white-space:nowrap} .pro-formule__actuelle .ic{width:12px;height:12px} .pro-formules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e4);margin-top:var(--e5); align-items:stretch;grid-auto-rows:1fr} /* six paliers, une seule hauteur de carte */ .pro-formule{position:relative;display:flex;flex-direction:column;gap:var(--e1);min-width:0; background:var(--fond);border:1px solid var(--bord);border-radius:var(--r-carte); padding:var(--e5) var(--e4) var(--e4)} .pro-formule--vedette{border:2px solid var(--or);background:var(--surface)} .pro-formule--actuelle{border-color:var(--accent-bord);background:var(--surface)} .pro-formule__reco{position:absolute;top:calc(-1 * var(--pil-haut) / 2);right:var(--e3); white-space:nowrap;font-size:var(--t2)} .pro-formule__nom{display:flex;align-items:center;gap:var(--e2);font-size:var(--t6);font-weight:700;margin:0} .pro-formule[data-ton="olive"] .pro__jeton{background:var(--accent)} .pro-formule[data-ton="or"] .pro__jeton{background:var(--or)} .pro-formule[data-ton="violet"] .pro__jeton{background:var(--accent)} .pro-formule__prix{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:var(--e2) 0 0; font-size:var(--t11);font-weight:700;line-height:1;letter-spacing:-.01em; font-variant-numeric:tabular-nums} /* l'unite ne se coupe pas entre le « F » et le « CFA » */ .pro-formule__devise{font-size:var(--t4);font-weight:600;color:var(--gris-texte);white-space:nowrap} .pro-formule__periode{font-size:var(--t3);color:var(--gris-texte);margin:0} .pro-formule__periode s{color:var(--gris-faible)} .pro-formule__liste{list-style:none;margin:var(--e3) 0 var(--e4);padding:var(--e3) 0 0;display:grid;gap:var(--e2); align-content:start;flex:1 1 auto;border-top:1px solid var(--bord)} .pro-formule__liste li{display:flex;align-items:flex-start;gap:var(--e2);font-size:var(--t3); color:var(--gris-fort);line-height:1.4} .pro-formule__liste .ic{width:14px;height:14px;flex:0 0 14px;margin-top:3px;color:var(--accent)} .pro-formule__b{margin-top:auto;width:100%} /* Formule deja souscrite : ce n'est pas une commande, et son libelle reste lisible (encre accent sur menthe), pas un bouton grise. */ .pro-formule--actuelle .pro-formule__b{opacity:1;background:var(--accent-fond);color:var(--accent-encre); pointer-events:none} /* lien croise discret entre les deux historiques */ .pro-abo__croise-p{margin:var(--e4) 0 0;font-size:var(--t3);color:var(--gris-texte)} .pro-abo__croise{display:inline-flex;align-items:center;gap:var(--e1);min-height:var(--tactile); color:var(--accent-encre);font-weight:600} .pro-abo__croise:hover{text-decoration:underline} .pro-camp__croise{margin:calc(-1 * var(--e3)) 0 var(--e4)} /* six paliers officiels (17/09/2026) : trois par rangee, deux sous 1240 px, un sous 900 px */ .pro-formules{grid-template-columns:repeat(3,minmax(0,1fr))} .pro-formule[data-ton="vert"] .pro__jeton{background:var(--accent)} .pro-abo__regles{margin:var(--e4) 0 0;font-size:var(--t2);color:var(--gris-texte);line-height:1.5;max-width:80ch} /* formule choisie dans ce navigateur (pro.js) : ses deux actions sous « Formule actuelle », le message honnete sous la grille, le retour vers la publication */ .pro-formule__actes{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e2)} .pro-abo__message{margin:var(--e3) 0 0} .pro-abo__retour{margin:0 0 var(--e4)} .pro-abo__retour p{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e3);margin:0} @media (max-width:1240px){.pro-formules{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){ .pro-abo{padding:var(--e4)} .pro-formules{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto} } /* campagnes : PageTitle (.tete-section), StatCards partagees, barre d'outils de liste, puis UN composant CampaignRow pour les publicites et les boosts : [visuel] [nom · type · dates] [statut] [montant] [performance] [actions]. */ .pro-camp__tete{align-items:flex-start;flex-wrap:wrap;margin:var(--e4) 0 var(--e5)} /* la barre d'outils : SearchField partage + deux FilterSelects (etiquette .filtre__eti, select habille par socle.js), alignes en bas ; l'un sous l'autre sous 640 px */ .pro-camp__outils{align-items:flex-end;gap:var(--e3) var(--e4);margin:0 0 var(--e5)} .pro-camp__q{flex:1 1 260px;max-width:420px} .pro-camp__sel{display:flex;flex-direction:column;gap:4px;flex:0 1 220px;min-width:0} .pro-camp__sel .champ-select,.pro-camp__sel select{width:100%} .pro-camp__sel .filtre__eti{margin:0;text-align:left;align-self:flex-start} .etat-vide__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e2);margin-top:var(--e2)} @media (max-width:640px){ .pro-camp__q,.pro-camp__sel{flex:1 1 100%;max-width:none} } .pro-camp__tete .tete-section__texte{max-width:64ch} .pro-camp__actions{display:flex;flex-wrap:wrap;gap:var(--e2);flex:0 1 auto;max-width:100%} .pro-camp__stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:var(--e3)} .pro-camp__section{margin:var(--rythme-section) 0 var(--e3)} .pro-camp__h2{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap} .pro-camp-liste{display:grid;gap:var(--e3)} .pro-camp-ligne{display:grid;grid-template-columns:96px minmax(0,1fr) 132px 150px 124px auto; align-items:center;gap:var(--e4);padding:var(--e3) var(--e4);min-width:0; background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-carte)} .pro-camp-ligne__vue img{display:block;width:96px;height:72px;object-fit:cover;border-radius:var(--r3)} .pro-camp-ligne__id{min-width:0} .pro-camp-ligne__nom{font-size:var(--t5);font-weight:600;margin:0;line-height:1.25;overflow-wrap:anywhere} .pro-camp-ligne__ou{font-size:var(--t2);color:var(--gris-texte);margin:2px 0 0} .pro-camp-ligne__dates{display:flex;align-items:center;gap:6px;font-size:var(--t2);color:var(--gris-texte); margin:4px 0 0} .pro-camp-ligne__dates .ic{width:14px;height:14px;flex:0 0 14px} .pro-camp-ligne .pilule-etat{justify-self:center;white-space:nowrap} .pro-camp-ligne__montant{margin:0;text-align:right;white-space:nowrap} .pro-camp-ligne__montant b{display:block;font-size:var(--t5);font-weight:700;font-variant-numeric:tabular-nums} .pro-camp-ligne__montant i{font-style:normal;font-size:var(--t1);color:var(--gris-texte)} .pro-camp-ligne__perf{display:flex;gap:var(--e4);margin:0;justify-content:flex-end} .pro-camp-ligne__perf span{display:flex;flex-direction:column;align-items:flex-end} .pro-camp-ligne__perf b{font-size:var(--t5);font-weight:700;font-variant-numeric:tabular-nums} .pro-camp-ligne__perf i{font-style:normal;font-size:var(--t1);color:var(--gris-texte)} .pro-camp-ligne .table__actions{flex-wrap:nowrap} @media (max-width:1240px){ .pro-camp-ligne{grid-template-columns:72px minmax(0,1fr) auto;gap:var(--e2) var(--e3)} .pro-camp-ligne__vue img{width:72px;height:54px} .pro-camp-ligne__montant{grid-column:2;grid-row:2;text-align:left} .pro-camp-ligne__perf{grid-column:3;grid-row:2} .pro-camp-ligne .table__actions{grid-column:2 / -1;grid-row:3;justify-content:flex-start} } @media (max-width:640px){ .pro-camp__stats{grid-template-columns:minmax(0,1fr)} .pro-camp-ligne{grid-template-columns:64px minmax(0,1fr) auto} .pro-camp-ligne__vue img{width:64px;height:48px} .pro-camp-ligne__id{grid-column:2 / -1} .pro-camp-ligne .pilule-etat{grid-column:2 / -1;grid-row:2;justify-self:start} .pro-camp-ligne__montant{grid-row:3} .pro-camp-ligne__perf{grid-row:3;flex-wrap:wrap} .pro-camp-ligne .table__actions{grid-column:2 / -1;grid-row:4} } /* etapes de campagne : stepper compact commun a la famille (ronds de 28 px, libelles, trait fin, pas d'etirement). Sous 640 px, « Étape n sur 4 · titre » + barre, comme la progression de l'assistant de publication. */ .pro-etapes{margin:var(--e5) 0} .pro-etapes__liste{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap; gap:var(--e2) var(--e3)} .pro-etape{display:flex;align-items:center;gap:var(--e2);font-size:var(--t3);font-weight:500; color:var(--gris-texte)} .pro-etape__rond{width:28px;height:28px;border-radius:50%;background:var(--accent-fond);color:var(--accent); display:inline-flex;align-items:center;justify-content:center;font-size:var(--t2); font-weight:700;flex:0 0 28px} .pro-etapes .pro-etape__rond{background:var(--fond-creux);color:var(--gris-texte)} .pro-etape[data-etat="fait"] .pro-etape__rond{background:var(--succes-fond);color:var(--succes)} .pro-etape[data-etat="actif"]{color:var(--encre);font-weight:600} .pro-etapes .pro-etape[data-etat="actif"] .pro-etape__rond{background:var(--accent);color:var(--texte-inverse)} .pro-etape + .pro-etape::before{content:"";width:28px;height:1px;flex:0 0 28px;background:var(--bord)} .pro-etape[data-etat="fait"] + .pro-etape::before{background:var(--accent)} .pro-etapes__compact{display:none} .pro-camp__duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:var(--e5); align-items:start} .pro-carte-blanche{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-carte); padding:var(--e5);min-width:0} .pro-carte-menthe{background:var(--accent-fond);border:1px solid var(--accent-bord);border-radius:var(--r-carte); padding:var(--e4);min-width:0;position:sticky;top:calc(var(--e8) + var(--e4))} /* ChoiceCard compacte : toute l'etiquette est cliquable ; la coche suit le vrai bouton radio (etat coche plus bas : lisere accent). */ .pro-objectif{display:flex;align-items:flex-start;gap:var(--e3);border-radius:var(--r-champ); background:var(--surface);border:1px solid var(--bord);padding:var(--e3) var(--e4); margin-bottom:var(--e2);cursor:pointer;position:relative; transition:border-color var(--mvt),background var(--mvt)} .pro-objectif input{position:absolute;opacity:0;width:0;height:0} .pro-objectif__ic{width:36px;height:36px;border-radius:50%;background:var(--accent-fond);color:var(--accent); display:grid;place-items:center;flex:0 0 36px} .pro-objectif__ic .ic{width:18px;height:18px} .pro-objectif__texte{flex:1 1 auto;min-width:0} .pro-objectif b{display:block;font-size:var(--t5);font-weight:600;margin-bottom:2px} .pro-objectif p{font-size:var(--t3);color:var(--gris-texte);line-height:1.45;margin:0} .pro-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--accent-bord);flex:0 0 20px; margin-top:3px;display:inline-flex;align-items:center;justify-content:center} .pro .pro-objectif:has(:checked) .pro-radio.pro-radio--rond{background:var(--accent);border-color:var(--accent); color:var(--texte-inverse);box-shadow:none} @media (max-width:1240px){ .pro-camp__duo{grid-template-columns:minmax(0,1fr)} .pro-carte-menthe{position:static} } @media (max-width:640px){ .pro-etapes__liste{display:none} .pro-etapes__compact{display:block;background:var(--surface);border:1px solid var(--bord); border-radius:var(--r-carte);padding:var(--e3) var(--e4)} .pro-carte-blanche{padding:var(--e4)} } .pro-fenetre{background:var(--surface);border-radius:var(--r-bouton);padding:0 0 18px;overflow:hidden;margin-top:22px} .pro-fenetre__barre{display:block;height:20px;background:var(--lagune-fond)} .pro-fenetre__ou{display:block;text-align:center;background:var(--accent-fond);color:var(--accent-encre); border-radius:var(--r-pilule);padding:5px 14px;font-size:var(--t2);margin:16px auto; width:fit-content} .pro-fenetre__vue{position:relative;width:230px;margin:0 auto} .pro-fenetre__vue img{width:100%;height:200px;object-fit:cover;border-radius:var(--r3)} .pro-fenetre__badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center; gap:6px;background:var(--accent);color:var(--texte-inverse);border-radius:var(--r-pilule); padding:5px 12px;font-size:var(--t2)} .pro-fenetre__ligne{display:block;height:14px;background:var(--accent-fond);border-radius:var(--r2); margin:10px 26px} .pro-fenetre__ligne:last-child{width:55%} .pro-actions{display:flex;justify-content:center;gap:18px;margin-top:34px} /* etape « formule » : l'offre a booster est la VRAIE carte d'annonce du catalogue (.carte, app.css), puis trois FormulaCards comparables de meme hauteur ; toute la carte selectionne (etat coche plus bas). */ .pro-camp__bloc{margin-bottom:var(--e4)} .pro-camp__offre{display:flex} .pro-camp__offre .carte{flex:0 1 var(--carte-l);max-width:100%} /* les cartes de formule du BOOST sont .boost-formule (plus bas) ; le tag de duree est partage */ .pro-formule__duree{flex:0 0 auto;display:inline-flex;align-items:center;height:22px;padding:0 var(--e2); background:var(--lagune-fond);color:var(--lagune);border-radius:var(--r-pilule); font-size:var(--t1);font-weight:600;letter-spacing:.04em;text-transform:uppercase; white-space:nowrap} .pro-formule__texte{font-size:var(--t3);color:var(--gris-texte);line-height:1.5;margin:0} .pro-radio--rond{border-radius:50%;border:1.5px solid var(--bord-fort);width:24px;height:24px;flex:0 0 24px; display:inline-flex;align-items:center;justify-content:center;color:transparent; background:var(--surface);transition:background var(--mvt),border-color var(--mvt)} .pro-radio--rond .ic{width:13px;height:13px} /* boost : compteur de reduction, totaux (avis, membre), moyens */ .pro-reduction{align-items:flex-start;margin-top:20px} .pro-reduction b{display:block;font-size:var(--t6);font-weight:500} .pro-reduction p{font-size:var(--t4);color:var(--gris-texte);margin:0} .pro-totaux{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:16px 0 30px} .pro-totaux--trois{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px} .pro-totaux > div{background:var(--accent-fond);border-radius:var(--r-bouton);padding:16px 20px} .pro-totaux--trois > div{background:var(--fond)} .pro-total__l{font-size:var(--t5);color:var(--gris-fort);margin:0} .pro-total__v{font-size:var(--t9);font-weight:600;color:var(--accent);margin:6px 0 0} .pro-moyens{display:flex;gap:12px;margin:16px 0 22px} .pro-moyen{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:var(--r-champ); background:var(--gris-champ);font-size:var(--t5);color:var(--gris-fort);cursor:pointer} .pro-moyen input{position:absolute;opacity:0;width:0;height:0} .pro-moyen .ic{width:18px;height:18px;margin-right:8px;flex:0 0 18px} .pro-reseaux{font-size:var(--t1);font-weight:700;color:var(--gris-faible);letter-spacing:.04em;flex:0 0 auto} /* modales */ .pro-voile{position:relative;margin-top:-620px;z-index:2;display:flex;justify-content:center; pointer-events:none} .pro-modale{pointer-events:auto;background:var(--surface);border-radius:var(--r5);padding:26px;width:100%; max-width:1110px;box-shadow:var(--ombre-3)} .pro-modale--etroite{max-width:770px} .pro-modale__tete{display:flex;align-items:center;gap:24px;margin-bottom:18px} .pro-modale__tete h3{font-size:var(--t10);font-weight:700;margin:0;flex:0 0 auto} .pro-modale__tete .champ-cherche{flex:1 1 auto} .pro-modale__titre{font-size:var(--t10);font-weight:700;margin:0 0 26px} .pro .pro-modale hr{border:0;margin:22px 0 18px} /* RG-172 : les conditions d'une demande de retrait, et le motif d'une methode qu'on ne peut pas choisir. `[disabled]` grise deja la commande (regle « hors service ») ; le motif dit POURQUOI, a l'endroit du choix. */ .esp-secu__liste{margin:0 0 26px;padding-left:22px;display:flex;flex-direction:column; gap:6px;font-size:var(--t3);color:var(--gris-texte);line-height:1.5} .pro-destination[data-verifiee="non"], .pro-destination:has(input:disabled){opacity:.55;cursor:not-allowed} .pro-destination__raison{display:block;margin-top:4px;color:var(--accent);font-style:normal} @media (max-width:1500px){ .pro-photos,.pro-tarif,.pro-verif{grid-template-columns:minmax(0,1fr) 360px} } @media (max-width:1240px){ .pro-pub,.pro-photos,.pro-tarif,.pro-verif,.pro-detail{grid-template-columns:minmax(0,1fr)} .pro-choix__grille{grid-template-columns:repeat(2,minmax(0,1fr))} .pro-voile{margin-top:0;position:static} } @media (max-width:900px){ .pro-choix__grille,.pro-duo,.pro-totaux,.pro-verif__paires, .pro-avis__liste{grid-template-columns:minmax(0,1fr)} } @media (max-width:900px){ .pro-tarif__saisie{flex-wrap:wrap} .pro-tarif__unite{margin-left:0} .pro-detail__eq span{flex:0 0 150px} } /* ------------------- reputation (page deduite, ECARTS §3) */ .pro-rep{display:flex;align-items:center;gap:56px;background:var(--fond); border-radius:var(--r-carte);padding:28px 34px;flex-wrap:wrap} .pro-rep__bloc{text-align:center;flex:0 0 auto} .pro-rep__note{font-size:var(--t15);font-weight:700;color:var(--accent);margin:0;line-height:1} .pro-rep__note sup{font-size:var(--t7);font-weight:600;margin-left:4px} .pro-rep__compte{font-size:var(--t4);color:var(--gris-texte);margin:8px 0 0} .pro-rep__barres{flex:1 1 320px;min-width:0} .pro-rep__ligne{display:flex;align-items:center;gap:16px;margin-bottom:10px} .pro-rep__l{flex:0 0 90px;font-size:var(--t4);color:var(--gris-texte)} .pro-rep__jauge{flex:1 1 auto;height:10px;border-radius:var(--r1);background:var(--gris-pilule);overflow:hidden} .pro-rep__jauge i{display:block;height:100%;background:var(--accent);border-radius:var(--r1)} .pro-rep__n{flex:0 0 32px;text-align:right;font-size:var(--t4);color:var(--gris-texte)} .pro-rep__bien{font-size:var(--t3);color:var(--accent);margin:0 0 8px} /* -------- retrait, permissions, fiche membre (ecrans deduits, ECARTS §3.5) */ .pro-destination{display:flex;align-items:center;gap:16px;border:1px solid var(--gris-pilule); border-radius:var(--r-champ);padding:16px 20px;margin-bottom:12px;cursor:pointer} .pro-destination input{position:absolute;opacity:0;width:0;height:0} .pro-destination b{display:block;font-size:var(--t6);font-weight:500} .pro-destination i{font-style:normal;font-size:var(--t4);color:var(--gris-faible)} /* Seul l'element porteur de [data-choisi] passe sur menthe, ou --gris-faible ne tient que 4,42:1. Meme correction que .esp-notif__q et .pro-todo b : c'est la meme paire de couleurs qui echoue partout ou elle se rencontre. */ .pro .pro-destination:has(:checked) i{color:var(--gris-texte)} .pro-recap{background:var(--accent-fond);border-radius:var(--r-champ);padding:20px 24px;margin-top:24px} .pro-recap .esp-paie__total{border-top-color:var(--accent-bord)} .pro-droits th{font-size:var(--t4);white-space:nowrap} .pro-droits td{padding:16px 12px 16px 0;text-align:center} .pro-droits td:first-child{text-align:left} .pro-droits .esp-case{margin:0 auto} .pro-membre__tete{display:flex;align-items:center;gap:24px;margin:24px 0 10px} .pro-membre__tete img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:0 0 88px} .pro-membre__tete > div{flex:1 1 auto} .pro-membre__tete .esp-fiche__nom{margin:0} .pro-actions--fin{justify-content:flex-end;margin-top:30px} /* --- Demander un retrait (18/09/2026, demande client E) --------------------- Contenu centre (~900 px), carte de solde ivoire a accent brun (plus de rectangle brun brut), champ montant avec devise en suffixe, vrais boutons radio, recapitulatif dominant, conditions a coches, pied d'actions aligne. Les couleurs passent par --accent (brun du contexte Wallet). */ .pro-retrait__page{max-width:920px;margin:0 auto} .pro-retrait{padding:var(--e6) var(--e7)} .pro-retrait > .esp__h1{margin-top:0} .pro-retrait .esp-form__section{margin:var(--e6) 0 var(--e3)} .pro-solde-carte{margin-top:var(--e5);padding:var(--e5) var(--e6);border-radius:var(--r-carte); background:linear-gradient(135deg,var(--fond) 0%,var(--accent-fond) 100%); border:1px solid var(--accent-bord);box-shadow:var(--ombre-1)} .pro-solde-carte__sur{margin:0 0 var(--e2);font-size:var(--t1);font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--accent-encre)} .pro-solde-carte__ligne{display:flex;align-items:center;justify-content:space-between;gap:var(--e4)} .pro-solde-carte__montant{margin:0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap; font-size:var(--t13);font-weight:700;line-height:1.1;color:var(--accent-encre); font-variant-numeric:tabular-nums;letter-spacing:-.01em;overflow-wrap:anywhere} .pro-solde-carte__unite{font-size:var(--t5);font-weight:600;color:var(--gris-texte);letter-spacing:.02em} .pro .pro-solde-carte__oeil{color:var(--accent);border-color:var(--accent-bord);background:var(--surface)} .pro .pro-solde-carte__oeil:hover:not([disabled]){background:var(--accent-fond)} .pro-retrait__montant{margin:var(--e6) 0 0} .pro-retrait__montant .esp-champ2__e{margin-bottom:var(--e2)} .pro-retrait__montant input{font-size:var(--t8);font-weight:600;font-variant-numeric:tabular-nums} .pro-retrait__devise{flex:0 0 auto;display:inline-flex;align-items:center;align-self:stretch; margin:-1px -18px -1px 0;padding:0 var(--e4);border-left:1px solid var(--bord); background:var(--fond-creux);border-radius:0 var(--r-champ) var(--r-champ) 0; font-size:var(--t2);font-weight:700;letter-spacing:.06em;color:var(--gris-fort)} .pro-retrait__montant .esp-champ2__b{overflow:hidden} .pro-retrait__montant .pro-champ__erreur{margin-top:var(--e2)} /* vrais boutons radio : ◉ / ○ visibles, la carte n'est que l'etiquette */ .pro-retrait__destinations .pro-destination{margin-bottom:var(--e3);padding:var(--e4) var(--e5); border-color:var(--bord-carte);background:var(--surface);transition:border-color var(--mvt-d),background var(--mvt-d)} .pro-retrait__destinations .pro-destination input{position:static;opacity:1;width:20px;height:20px; flex:0 0 20px;margin:0} .pro .pro-retrait__destinations .pro-destination:has(:checked){border:1px solid var(--accent); padding:var(--e4) var(--e5);background:var(--accent-fond)} .pro .pro-retrait__destinations .pro-destination:has(:disabled){border-style:solid;opacity:1; color:var(--gris-texte);background:var(--fond)} .pro .pro-retrait__destinations .pro-destination:has(:disabled) :is(b,i){color:var(--gris-texte)} .pro .pro-retrait__destinations .pro-destination:has(:disabled) .esp-mvt__ic{opacity:.6} .pro .pro-retrait__destinations .pro-destination:has(:disabled) input{opacity:.7} .pro .pro-retrait__destinations .pro-destination__raison{color:var(--accent-encre);font-size:var(--t3)} /* recapitulatif : lignes discretes, « Vous recevrez » dominant */ .pro-retrait__recap{margin-top:var(--e6);padding:var(--e5) var(--e6);border-radius:var(--r-carte); background:var(--surface);border:1px solid var(--bord-carte)} .pro-retrait__recap .esp-paie__ligne{font-size:var(--t4);margin:0 0 var(--e3);align-items:baseline} .pro-retrait__recap .esp-paie__ligne > span:first-child{color:var(--gris-texte)} .pro-retrait__recap .esp-paie__ligne > span:last-child{font-weight:600;font-variant-numeric:tabular-nums} .pro-retrait__recap .esp-paie__total{margin:var(--e3) 0 0;padding-top:var(--e4);border-top:1px solid var(--bord-carte); border-bottom:0;align-items:baseline;font-size:var(--t8)} .pro-retrait__recap .esp-paie__total > span:last-child{font-size:var(--t11);color:var(--accent-encre); font-variant-numeric:tabular-nums} /* conditions : bloc leger a coches */ .pro-retrait__conditions{list-style:none;margin:0 0 var(--e5);padding:var(--e4) var(--e5); display:flex;flex-direction:column;gap:var(--e2);border-radius:var(--r-carte); background:var(--fond-creux);font-size:var(--t3);color:var(--gris-texte);line-height:1.5} .pro-retrait__conditions li{display:flex;align-items:flex-start;gap:var(--e3)} .pro-retrait__conditions .ic{width:16px;height:16px;flex:0 0 16px;margin-top:3px;color:var(--succes)} /* pied : deux commandes de meme hauteur, alignees a droite */ .pro-retrait .pro-actions--fin{margin-top:var(--e5);gap:var(--e3)} .pro-retrait .pro-actions--fin > :is(a,button){min-width:160px} .pro-retrait .pro-actions--fin > [aria-disabled="true"]{pointer-events:auto} @media (max-width:900px){ .pro-retrait{padding:var(--e5)} .pro-solde-carte{padding:var(--e4) var(--e5)} .pro-solde-carte__montant{font-size:var(--t11)} } @media (max-width:480px){ .pro-solde-carte__ligne{flex-wrap:wrap} .pro-retrait__recap{padding:var(--e4)} .pro-retrait__recap .esp-paie__ligne{font-size:var(--t3);gap:var(--e3)} .pro-retrait__recap .esp-paie__total{font-size:var(--t6);gap:var(--e3)} .pro-retrait__recap .esp-paie__total > span:last-child{font-size:var(--t9)} .pro-retrait .pro-actions--fin{flex-direction:column-reverse;align-items:stretch} .pro-retrait .pro-actions--fin > :is(a,button){width:100%} } @media (max-width:900px){ .pro-membre__tete{flex-wrap:wrap} .pro-droits{white-space:nowrap} } /* ================================== tres petits ecrans (320 a 480 px) Suite du bloc de meme nom dans espace.css : on ne traite ici que les rangees propres au prestataire qui restent rigides a 320 et 390 px. Mesure de reference : documentElement.scrollWidth == clientWidth a 320, 390, 768, 1280 et 1728 px sur toutes les pages /pro/. */ @media (max-width:480px){ .pro-actions{flex-wrap:wrap} /* titres et boutons d'entete : le bouton passe sous le titre plutot que de forcer la ligne a sa largeur de contenu. */ .pro-modale__tete h3{flex:1 1 100%} .pro-sect__tete{flex-wrap:wrap} .pro-sect__titre,.pro-sect__sous{min-width:0} .pro-detail__tete{flex-wrap:wrap} .pro-detail__tete .pro-detail__h3{min-width:0} } /* ECR-P09 — arrivée par QR ou code court (17/09/2026 : resume en carte, deux voies en blocs arrondis a icone, un bouton principal). */ .pro-scan{max-width:820px} .pro-scan__tete{margin-bottom:var(--e4)} .pro-scan__intro{margin:var(--e2) 0 0;max-width:60ch} .pro-scan__resume{display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e4); border:1px solid var(--accent-bord);border-radius:var(--r5);background:var(--accent-fond);color:var(--accent-encre)} .pro-scan__resume-ic{flex:0 0 44px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center; border-radius:50%;background:var(--surface);color:var(--accent)} .pro-scan__resume > div{min-width:0;flex:1 1 auto} .pro-scan__sur{margin:0 0 var(--e1);font-size:var(--t1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-texte)} .pro-scan__contexte{margin:0;font-size:var(--t5);font-weight:600;color:var(--encre);overflow-wrap:anywhere} .pro-scan__paiement{margin:var(--e1) 0 0;font-size:var(--t3);color:var(--gris-fort)} .pro-scan__note{margin:var(--e2) 0 0} .pro-scan__voies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e4);margin-top:var(--e5)} .pro-scan__voie{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e2);padding:var(--e5);min-width:0; border:1px solid var(--bord);border-radius:var(--r5);background:var(--surface)} .pro-scan__icone{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center; border-radius:var(--r3);background:var(--accent-fond);color:var(--accent)} .pro-scan__h2{margin:var(--e1) 0 0;font-size:var(--t6);font-weight:700} .pro-scan__texte{margin:0;font-size:var(--t3);color:var(--gris-texte);line-height:1.5} .pro-scan__b{margin-top:auto;padding-top:var(--e2);width:100%} .pro-scan__voie .pro-etat{margin:var(--e2) 0 0} .pro-scan__voie .esp-champ2__e{margin-top:var(--e2)} .pro-scan__voie .esp-champ2__b{width:100%} .pro-scan__code input{text-transform:uppercase;letter-spacing:.16em;font-weight:700} .pro-scan__pied{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e2);margin-top:var(--e5)} /* Geometrie : la regle de format (48 px). Ce CTA montait a 52 px sans raison. */ .pro-scan__cta{--b-marge:0 var(--e6)} .pro-scan__pied .pro-etat{margin:0} @media (max-width:640px){ .pro-scan__voies{grid-template-columns:minmax(0,1fr)} .pro-scan__voie{padding:var(--e4)} .pro-scan__cta{width:100%;justify-content:center} } /* ============================================================================ CHAMPS DU PRESTATAIRE — marque d'obligation et etats La planche « PRESTAIRE WEB » ne dessine que le repos. Les autres etats sont deduits ici, UNE SEULE FOIS pour les 64 ecrans, dans la meme famille que l'espace client (espace.css) : trait qui s'assombrit au survol, vert de marque au clavier, tirets quand la saisie est fermee, rouge sombre en erreur. Rien n'agrandit une boite : les anneaux sont des `outline` (hors flux) et les cibles tactiles s'etendent par un calque. Les cotes de la planche a 1728 px restent donc inchangees. ============================================================================ */ /* --- marque d'obligation ---------------------------------------------------- L'asterisque seul se perd a la loupe et ne se dit pas : il reste comme decor (aria-hidden) et le mot porte l'information. */ /* `.champ-requis` est monte dans app.css : `_requis()` existe dans les DEUX espaces, et l'espace Client ne charge pas cette feuille. */ /* --- etats des boites de saisie propres au prestataire ---------------------- `.esp-champ2__b` est deja traite dans espace.css ; il reste la barre de recherche et la zone de texte longue. */ .pro .esp-champ,.pro .pro-zone{transition:border-color var(--mvt-d),box-shadow var(--mvt-d)} .pro .esp-champ:hover,.pro .pro-zone:hover{border-color:var(--bord-fort)} .pro .esp-champ:has(:disabled),.pro .pro-zone:disabled{background:var(--fond); border-style:dashed;color:var(--gris-faible);cursor:not-allowed} .pro .esp-champ:has([aria-invalid="true"]),.pro .pro-zone[aria-invalid="true"]{ border-color:var(--erreur);box-shadow:inset 0 0 0 1px var(--erreur)} /* --- focus clavier ----------------------------------------------------------- Les radios et les cases du prestataire sont masquees au profit d'une pastille dessinee : sans cet anneau pose sur l'etiquette, un clavier ne saurait pas ou il se trouve. `:focus-visible` n'apparait pas au clic de souris. */ .pro :is(a,button,[tabindex]:not(.pub__h2)):focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r1)} /* Les champs (input, select, textarea, zones de depot) suivent l'etat de focus commun d'app.css : filet vert et halo menthe, aucun anneau. */ .pro :is(.pro-objectif,.pro-moyen,.pro-destination,.pro-detail__case):has(:focus-visible){ outline:2px solid var(--accent);outline-offset:2px} /* Sur la barre laterale vert sombre, le vert de marque ne se detacherait pas. */ .pro .esp__barre :is(a,button,summary):focus-visible{outline-color:var(--texte-inverse)} /* --- etat coche : il suit la commande, pas seulement la donnee --------------- `data-choisi` fige l'etat dessine par la maquette ; `:has(:checked)` le fait suivre le vrai choix de la personne. Les regles en [data-choisi="oui"] ont ete RETIREES ici, pas seulement doublees : tant qu'elles restaient, choisir une autre option en laissait DEUX peintes comme retenues — mesure faite sur /pro/retrait.html, ou les deux destinations de virement ressortaient ensemble apres un clic. Aucun script ne remet cet attribut a jour (app.js et reservation.js le font pour .moyen et .cnt-option ; rien ne le fait pour les composants .pro-*), et le serveur pose `checked` sur les huit elements concernes : l'etat vivant couvre donc aussi le premier rendu. La forme (pastille pleine, coche, trait epaissi) double la couleur pour ne pas dependre d'elle. */ .pro .pro-objectif:has(:checked){background:var(--accent-fond);border:1.5px solid var(--accent)} /* choisi : contour vert, fond menthe leger, coche */ .pro .pro-objectif:has(:checked) .pro-radio{border-color:var(--accent);background:var(--accent); box-shadow:inset 0 0 0 3px var(--texte-inverse)} .pro .pro-moyen:has(:checked){background:var(--accent-fond);color:var(--accent);font-weight:600; box-shadow:inset 0 0 0 2px var(--accent)} .pro .pro-destination:has(:checked){border-color:var(--accent);border-width:2px;padding:15px 19px; background:var(--accent-fond)} /* --- survol des etiquettes cliquables --------------------------------------- */ .pro :is(.pro-objectif,.pro-moyen,.pro-destination):hover{border-color:var(--accent-bord)} /* --- appui : un enfoncement bref, aucune boite ne bouge dans le flux -------- */ .pro :is(.pro__cta,.esp-btn,.esp-filtre,.pro-acte,.pro-rond,.pro-ajouter,.pro-select, .pro-camp__filtre,.pro-importer,.pro-depot__b,.compteur__b, .pro-objectif,.pro-moyen,.pro-destination):active{ transform:scale(.98)} /* --- hors service ------------------------------------------------------------ Le gris ne suffit pas : les tirets et le curseur barre le disent aussi. */ .pro :is(input,textarea,select):disabled, .pro button:disabled:not(.bouton){cursor:not-allowed;opacity:.55} .pro :is(.pro-objectif,.pro-moyen,.pro-destination,.pro-detail__case, .esp-champ2,.esp-champ2__b):has(:disabled){opacity:.55;cursor:not-allowed; border-style:dashed} .pro [aria-disabled="true"]:not(.bouton){opacity:.55;cursor:not-allowed;pointer-events:none} /* --- chargement -------------------------------------------------------------- Se pose sur la BOITE (un ne porte pas de pseudo-element) : la saisie se ferme et la roue dit l'attente. `aria-busy` la dit aux lecteurs d'ecran. */ .pro :is(.esp-champ2__b,.esp-champ,.esp-btn,.pro__cta,.esp-filtre,.pro-ajouter)[aria-busy="true"]{ position:relative;pointer-events:none;opacity:.7} .pro [aria-busy="true"]::after{content:"";position:absolute;top:50%;right:14px; width:18px;height:18px;margin-top:-9px;border:2px solid rgba(0,0,0,.18); border-top-color:var(--accent);border-radius:50%; animation:pro-attente .7s linear infinite} @keyframes pro-attente{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ .pro [aria-busy="true"]::after{animation-duration:2.4s} .pro :is(.pro__cta,.esp-btn,.esp-filtre,.pro-acte,.pro-rond,.pro-ajouter,.pro-select, .pro-camp__filtre,.pro-importer,.pro-depot__b,.compteur__b, .pro-objectif,.pro-moyen,.pro-destination):active{transform:none} } /* --- cibles tactiles --------------------------------------------------------- La planche dessine des pastilles de 28 a 40 px. Les agrandir deplacerait les rangees ; le calque etend la zone qui recoit le doigt SANS toucher a la boite, donc sans bouger un seul pixel de la mise en page. */ .pro :is(.compteur__b,.pro-rond,.pro-acte,.pro__outil,.pro__retour,.pro-ajouter, .pro-camp__filtre,.pro-importer,.pro-depot__b,.pro-moyen,.pro-select, .pro-cal button,.esp-fleche){ position:relative} .pro :is(.compteur__b,.pro-rond,.pro-acte,.pro__outil,.pro__retour,.pro-ajouter, .pro-camp__filtre,.pro-importer,.pro-depot__b,.pro-moyen,.pro-select, .pro-cal button,.esp-fleche)::after{ content:"";position:absolute;left:50%;top:50%; width:max(100%,var(--tactile));height:max(100%,var(--tactile)); transform:translate(-50%,-50%)} /* Les cases du calendrier sont des