/* Zihma — ESPACE CLIENT (planche « PROFIL CLIENT », 9 frames de 1728 px). Complete assets/css/app.css : les jetons de couleur, la police et la carte de bien viennent de la feuille principale ; on ne redefinit ici que la coquille d'application (barre laterale + barre du haut) et les blocs propres a l'espace. Reperes releves sur la planche (frame de 1728 px) : barre laterale x 22, largeur 245, rayon 32, degrade #067669 -> #005a50 entrees de menu pas 65 px, pilule 205 x 51, icone 22 px colonne contenu x 298 -> 1706 ; filet du haut a y 131, il file jusqu'au bord boutons ronds diametre 68, pas 80 ; bouton « Reservez un bien » 254 x 68 */ :root{ --esp-barre:232px; --esp-marge:22px; --esp-gouttiere:31px; } /* ------------------------------------------------------------- coquille */ body.espace{background:var(--surface)} /* les ecarts verticaux viennent tous des regles ci-dessous, jamais des marges par defaut du navigateur (elles decalaient la barre laterale de 41 px). */ :where(.esp) :where(p,h1,h2,h3){margin:0} .esp{display:flex;align-items:flex-start;gap:var(--esp-gouttiere); max-width:1728px;margin:0 auto;padding:var(--esp-marge)} .esp__barre{ flex:0 0 var(--esp-barre);width:var(--esp-barre); position:sticky;top:var(--esp-marge); height:calc(100vh - var(--esp-marge)*2);min-height:620px; background:linear-gradient(180deg,var(--vert) 0%,var(--vert) 42%,var(--vert) 100%); border-radius:var(--r6);color:var(--texte-inverse);display:flex;flex-direction:column; padding:var(--e5) 0 var(--e5);overflow:hidden; } /* RAIL — finition du 17/09/2026 (capture « Ajuste les sidebars »). UNE grille pour les deux espaces : marge --esp-rail-x (12 px) + rembourrage --esp-rail-p (14 px) = 26 px du bord ; toutes les icones font 20 px, sur la meme colonne (x = 26), les libelles a 12 px derriere ; les titres de groupe, l'identite et la zone legale s'alignent sur ce meme bord de 26 px. Onglets de 42 px / 14 px, acces complementaires de 38 px / 14 px : une seule taille de texte, une seule taille d'icone, plus aucun decalage de ligne. */ .esp__barre{--esp-rail-x:12px;--esp-rail-p:14px;--esp-rail-ic:20px; --esp-rail-bord:calc(var(--esp-rail-x) + var(--esp-rail-p))} /* Une seule barre laterale (21/09/2026) : celle des reglages du Profil. L'ancien rail a onglets (.esp__menu / .esp__lien), sa barre basse et « Plus » sont retires ; la navigation metier vit dans le Header. */ .esp__moi{display:flex;align-items:center;gap:10px;padding:0 var(--esp-rail-bord);min-width:0} .esp__moi > div{min-width:0} .esp__moi img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 36px} .pro__compte img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 38px} .esp__nom{font-size:var(--t3);font-weight:600;line-height:1.25;overflow-wrap:anywhere} .esp__tel{font-size:var(--t1);color:rgba(255,255,255,.75);line-height:1.3} .esp__defile{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column} /* l'acces « Langue et devise » sous les sections des reglages */ .esp__second{display:flex;align-items:center;gap:var(--e3);min-height:38px;margin:0 var(--esp-rail-x); padding:0 var(--esp-rail-p);border-radius:var(--r-pilule);font-size:var(--t3); color:var(--texte-inverse);opacity:.9;transition:background var(--mvt),opacity var(--mvt)} .esp__second .ic{width:var(--esp-rail-ic);height:var(--esp-rail-ic);flex:0 0 var(--esp-rail-ic)} .esp__second:hover{background:var(--voile-filet);opacity:1} .esp__second[aria-current="page"]{background:var(--voile-filet);font-weight:600;opacity:1} /* Zone legale : quatre liens courts et le copyright, petits mais lisibles. */ .esp__legal{margin:var(--e3) var(--esp-rail-bord) 0;padding:var(--e3) 0 0;border-top:1px solid var(--voile-filet); font-size:var(--t1);color:var(--texte-inverse);opacity:.78;line-height:1.3} .esp__legal-liens{display:flex;flex-wrap:wrap;gap:0 var(--e3)} /* Petits a l'oeil (12 px), cible de 44 par calque : le rail reste bas. */ .esp__legal a{position:relative;display:inline-flex;align-items:center;min-height:28px;text-decoration:underline; text-underline-offset:2px;text-decoration-color:transparent;transition:text-decoration-color var(--mvt)} .esp__legal a:hover{text-decoration-color:currentColor} .esp__legal a::after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px} .esp__legal-copie{margin:2px 0 0} /* L'identite (Client : sous la marque ; Pro : ancree en bas) et la zone legale respirent de 12 px, jamais plus : le rail reste compact. */ .esp__moi + .esp__defile{margin-top:var(--e3)} .esp__defile + .esp__moi{margin-top:var(--e3)} .esp__corps{flex:1 1 auto;min-width:0} /* ------------------------------------------------------- barre du haut */ /* La barre de titre reste EN HAUT quand on defile : sur des ecrans qui font plusieurs milliers de pixels, on perdait de vue ou l'on se trouvait et les trois outils (notifications, langue, aide) sortaient du champ. L'ancien filet de separation a disparu avec tous les autres ; c'est une ombre, et seulement une fois qu'on a commence a defiler, qui detache la barre du contenu qui passe dessous. */ /* Hauteur alignee sur l'entete publique (80 px) : elle etait a 109, pour le meme role et le meme contenu. Le Prestataire, lui, etait a 85. LE FOND. Les deux entetes peignaient --fond (#faf9f7) en bande pleine largeur AU-DESSUS d'une page blanche : `body.espace{background:var(--surface)}`. Or dans les espaces, --fond n'est pas le sol — c'est le creux : pro-apercu, pro-conseil, pro-avis, esp-avenir__dates s'en servent pour ENFONCER un panneau dans le blanc. Une bande de la teinte « en creux » posee par-dessus le blanc ne se raccorde a rien : c'est la fausse note signalee. L'entete prend donc le sol de sa page, et se detache par un filet — plus l'ombre que le defilement pose deja. */ /* L'entete etait un rectangle blanc a angles vifs, pose sur une page blanche, au milieu d'une page ou TOUT est arrondi : la barre laterale a 32 px de rayon, les tuiles 18, les cartes 28. Elle ne se lisait pas comme une piece du dessin — elle se lisait comme un manque. Elle devient un panneau, du meme rayon que la barre laterale qu'elle prolonge visuellement. Pas de filet — le client n'en veut pas — mais l'ombre la plus legere du jeu, celle qui dit « ceci flotte » : c'est exactement son role, elle est collante et le contenu passe dessous. */ .esp__haut{display:flex;align-items:center;gap:var(--e5); padding:var(--e3) var(--e5);margin-bottom:var(--e2); position:sticky;top:0;z-index:20;background:var(--surface); border-radius:var(--r6);box-shadow:var(--ombre-1)} /* Aucun filet au repos : l'entete se confond avec le sol de la page, comme le pourtour de la barre laterale. Elle ne se detache qu'une fois qu'on defile, quand du contenu passe dessous. */ .esp__haut[data-colle="oui"]{box-shadow:var(--ombre-2)} .esp__haut-gauche{display:flex;align-items:center;gap:var(--e2);flex:1 1 auto;min-width:0} /* « Retour » : rond de 40 px a gauche du fil d'Ariane, cible de 44 par calque. */ .esp__retour{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;color:var(--encre);position:relative;margin-right:calc(-1 * var(--e2)); transition:background var(--mvt)} .esp__retour::after{content:"";position:absolute;left:50%;top:50%;width:var(--tactile);height:var(--tactile); transform:translate(-50%,-50%)} .esp__retour:hover{background:var(--fond-creux)} .esp__retour .ic{width:20px;height:20px} /* Le fil d'Ariane (« Espace Client / Réservations ») est un

: chaque ecran a son vrai

plus bas (audit K, U.22). */ .esp__titre{font-size:var(--t10);font-weight:700;margin:4px 0 2px;line-height:1.2} /* Garde-fou : si un fil redevenait un

, il ne pourrait pas rester plus petit que les tetes de section qu'il domine. Inutilisee aujourd'hui. */ h1.esp__titre{font-size:var(--t11)} .esp__sous{font-size:var(--t4);color:var(--gris-faible);margin:0;line-height:1.3} .esp__outils{margin-left:auto;display:flex;align-items:center;gap:12px} /* UNE SEULE commande d'outil pour les DEUX espaces. Le Client posait des ronds de 68 px a icone de 34 ; le Prestataire, des carres de 28 px sans rayon ni bordure — trois fois plus petits, sous le plancher tactile, pour les trois MEMES fonctions (notifications, langue, assistance). L'entete publique tient ses commandes a 44 px avec une icone de 24 : c'est cette echelle-la. Cette regle vit dans espace.css parce que les deux espaces la chargent ; pro.css, charge apres, ne redeclare plus la geometrie de .pro__outil. */ /* Plus de cercle ni de filet autour des trois icones rapides (notifications, langue, assistance) : l'icone seule, 22 px, dans une cible invisible de 44 px ; au survol l'icone fonce, sans fond. */ .esp__rond, .pro__outil{width:var(--ic-haut);height:var(--ic-haut);flex:0 0 var(--ic-haut); border-radius:var(--ic-rayon);border:0; display:inline-flex;align-items:center;justify-content:center; color:var(--vert);background:none;transition:color var(--mvt)} /* 24 px : la cote exacte des icones de l'entete publique. Et 1 px de filet — aucune autre bordure du projet ne fait 1,5 px. */ .esp__rond .ic,.esp__rond img, .pro__outil .ic,.pro__outil img{width:22px;height:22px} .esp__rond:hover,.pro__outil:hover{color:var(--vert-sombre);background:none} .esp__rond--plein{color:var(--vert)} .esp__cta{margin-left:14px} /* Les pictogrammes PNG decoupes dans les planches sont des masques d'une seule encre (sombre). Sur un fond sombre on les repasse en blanc par filtre plutot que d'embarquer deux fichiers pour la meme forme. */ .esp-stat__carre img,.esp-tuile__carre img,.esp-btn img, .esp-assist__t img,.esp__rond--plein img{filter:brightness(0) invert(1)} .esp-btn--contour img{filter:none} /* ------------------------------------------------------------- sections */ .esp__h1{font-size:var(--t13);font-weight:700;margin:22px 0 0;line-height:1.15;overflow-wrap:anywhere} .esp__h1[data-taille="grande"]{font-size:var(--t15)} .esp__h1--vert{color:var(--vert-encre)} .esp__h2{font-size:var(--t8);font-weight:700;margin:var(--e5) 0 0} .esp__note{font-size:var(--t4);color:var(--gris-texte);margin:6px 0 0} .esp-sect{margin-top:41px} /* 78 px de blanc entre un titre de section et ses cartes : c'est la moitie d'une carte. Ramene sur l'echelle. */ .esp-sect__tete{display:flex;align-items:baseline;gap:16px;margin-bottom:var(--e5)} .esp-sect__titre{font-size:var(--t10);font-weight:700;margin:0} /* « Voir tout » s'ecrit en minuscules (consigne client, Lot 5) : meme lien d'action que .tete-section__action, 14 px / 600, sans capitales. */ .esp-sect__lien{margin-left:auto;display:inline-flex;align-items:center;gap:6px; min-height:var(--tactile);white-space:nowrap; font-size:var(--t3);font-weight:600;color:var(--vert)} .esp-sect__lien .ic{width:14px;height:14px} .esp-sect__lien:hover{color:var(--vert-sombre)} /* Carrousel : le nombre de cartes visibles suit la largeur disponible, les cartes gardent leur taille de maquette (396 x 390) et ne s'etirent jamais. */ .esp-rail{display:flex;gap:var(--carte-gap);overflow-x:auto;scroll-snap-type:x proximity; padding-bottom:4px;scrollbar-width:none} .esp-rail::-webkit-scrollbar{display:none} .esp-rail > *{flex:0 0 var(--carte-l);scroll-snap-align:start} /* ------------------------------------------------------- tuiles (frame 1) */ /* Lot 5 : les tuiles du tableau de bord sont des StatCards partagees (.stat, app.css) ; a gauche la prochaine reservation en carte, a droite les trois chiffres. Sous 1240 px tout s'empile. */ .esp-accueil__haut{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--e5); margin-top:var(--e5);align-items:start} .esp-tuiles{grid-template-columns:minmax(0,1fr);gap:var(--e3);margin-top:0} .stat--lien{color:inherit;transition:border-color var(--mvt),transform var(--mvt-lent)} .stat--lien:hover{border-color:var(--accent);transform:translateY(-1px)} .stat__val--texte{font-size:var(--t7);line-height:1.25;overflow-wrap:anywhere} .stat__ic[data-ton="rouge"]{background:var(--erreur-fond);color:var(--erreur)} /* Prochaine reservation (20/09/2026) : la section est la carte — surtitre en capitales espacees, filet des cartes du systeme — et le lien en est le corps : photo 4:3 a gauche, statut / dates, nom, montant, echeance, puis le bouton au pied de la colonne de texte. Le survol colore le nom et le filet, comme les StatCards-liens. */ .esp-prochaine{display:flex;flex-direction:column;background:var(--surface);padding:var(--e4); transition:border-color var(--mvt)} /* filet et rayon : le format des cartes, app.css */ .esp-prochaine:has(.esp-prochaine__carte:hover){border-color:var(--accent)} .esp__h2--haut{margin:0 0 var(--e3);font-size:var(--t1);font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--gris-texte)} .esp-prochaine__carte{flex:1 1 auto;display:grid;grid-template-columns:224px minmax(0,1fr);gap:var(--e5); align-items:center;color:inherit} .esp-prochaine__img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r4);display:block} .esp-prochaine__corps{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e1);min-width:0; align-self:stretch;padding:var(--e1) 0} .esp-prochaine__ligne{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap} .esp-prochaine__quand{font-size:var(--t3);font-weight:600;color:var(--gris-fort)} .esp-prochaine__nom{font-size:var(--t9);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin-top:var(--e1); transition:color var(--mvt)} .esp-prochaine__carte:hover .esp-prochaine__nom{color:var(--accent)} .esp-prochaine__prix{font-size:var(--t4);color:var(--gris-texte)} .esp-prochaine__echeance{font-size:var(--t2);font-weight:600;color:var(--or-texte)} .esp-prochaine__b{margin-top:auto;padding-top:var(--e2)} .esp-prochaine--vide .etat-vide{border:0;background:none;padding:var(--e3) 0 0;margin:0} /* « À faire » (paiement a reprendre, messages non lus) puis, cote a cote, les dernieres reservations et les derniers messages : des listes compactes partagees (.liste-compacte, app.css). Sous 1240 px les deux s'empilent (regle plus bas). */ .esp-afaire{margin-top:var(--e7)} .esp-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e5);margin-top:var(--e7)} .liste-compacte__ic[data-ton="jaune"]{background:var(--or-fond);color:var(--or-texte)} /* Les initiales d'un correspondant sans photo, dans la pastille de la liste. */ .esp-duo .liste-compacte__ic{font-size:var(--t2);font-weight:700;color:var(--vert)} @media (max-width:1240px){ .esp-accueil__haut{grid-template-columns:minmax(0,1fr)} .esp-tuiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} } @media (max-width:640px){ .esp-prochaine__carte{grid-template-columns:minmax(0,1fr);gap:var(--e3)} .esp-prochaine__img{aspect-ratio:16/10} .esp-prochaine__nom{font-size:var(--t8)} } /* ------------------------------------------------------ stats (frame 2) */ /* ------------------------------------------------------------- tableaux */ /* voir zihma/html.py : tout sort dans cette boite. Elle ne se voit pas tant que le tableau tient ; sinon c'est le tableau qui defile, pas la page. */ .boite-tab{max-width:100%;overflow-x:auto} /* Lignes-cartes sous 900 px : la boite ne doit pas couper les info-bulles. */ @media (max-width:900px){.boite-tab:has(.table--cartes){overflow:visible}} /* Une commande de danger ne ressemble pas a « voir » : rouge discret, fond rouge pale au survol. */ .bouton-ic[data-ton="danger"]{color:var(--erreur)} .bouton-ic[data-ton="danger"]:hover, .bouton-ic[data-ton="danger"]:focus-visible{background:var(--erreur-fond);color:var(--erreur)} /* Menu « ⋯ » d'une ligne de reservation (audit K) : l'annulation y vit, en clair et en rouge, au lieu d'un « × » en ligne. Meme dessin que le Pro (pro.css ne se charge pas ici) : sommaire cliquable, etat ouvert, icones. */ .esp-tab__actions .menu-plus summary.bouton-ic{cursor:pointer} .esp-tab__actions .menu-plus[open] > summary.bouton-ic{background:var(--accent-fond);color:var(--accent)} .esp-tab__actions .menu-plus__liste .ic{width:16px;height:16px;flex:0 0 16px;color:var(--gris-texte)} .esp-tab__actions .menu-plus__liste [data-ton="danger"] .ic{color:var(--erreur)} /* Table des reservations (Table partagee) : bien = photo + nom + date, comme l'identite des tables Pro, avec une vignette 3:2 plutot qu'un rond. */ .esp-tab__bien{display:flex;align-items:center;gap:var(--e3);color:inherit;min-width:0} .esp-tab__bien img{width:96px;height:64px;border-radius:var(--r2);object-fit:cover;flex:0 0 96px} .esp-tab__bien:hover .esp-tab__nom{color:var(--accent)} .esp-tab__nom{font-weight:600;font-size:var(--t4);margin:0;color:var(--encre)} .esp-tab__sous{font-size:var(--t2);color:var(--gris-texte);margin:2px 0 0} .esp-tab__prix{margin:0} .esp-tab__quand{font-weight:600;font-size:var(--t4);margin:0} .esp-tab__statut{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0} .esp-tab__echeance{white-space:normal} @media (max-width:900px){.esp-tab__statut{align-items:flex-end;text-align:right}} /* StatusBadge : une teinte par etat, la meme partout (tables, en-tetes, cartes). */ .pilule-etat{display:inline-flex;align-items:center;font-weight:600;white-space:nowrap} .pilule-etat[data-ton="vert"]{background:var(--succes-fond);color:var(--succes)} .pilule-etat[data-ton="jaune"]{background:var(--or-fond);color:var(--or-texte)} .pilule-etat[data-ton="rouge"]{background:var(--erreur-fond);color:var(--erreur)} .pilule-etat[data-ton="gris"]{background:var(--gris-champ);color:var(--gris-fort)} /* Lot 5 : les compteurs de la liste sont des StatCards partagees, en ligne. 20/09/2026 : plus compactes — le chiffre domine (t11), l'etiquette et la precision restent en retrait, l'icone se fait petite dans l'angle. */ .esp-res__stats{margin-top:var(--e4);gap:var(--e3)} .esp-res__stats .stat{min-height:0;padding:var(--e3) var(--e4);gap:var(--e1)} .esp-res__stats .stat__lib{font-weight:600;padding-right:44px} .esp-res__stats .stat__val{font-size:var(--t11);margin-top:2px} .esp-res__stats .stat__ic{top:var(--e3);right:var(--e3);width:30px;height:30px} .esp-res__stats .stat__ic .ic,.esp-res__stats .stat__ic img{width:15px;height:15px} .stat__ic[data-ton="jaune"]{background:var(--or-fond);color:var(--or-texte)} .stat__ic[data-ton="gris"]{background:var(--fond-creux);color:var(--gris-fort)} .stat__point{position:absolute;top:-2px;right:-2px;width:11px;height:11px;border-radius:50%; background:var(--erreur);border:2px solid var(--surface)} .esp-barre{display:flex;align-items:center;gap:18px;margin-top:44px;flex-wrap:wrap} .esp-barre__titre{flex:1 1 auto} .esp-barre .champ-cherche{flex:0 1 400px} /* Liste des reservations (20/09/2026) : le titre sur sa ligne, puis la barre d'outils — onglets a gauche, recherche et « Filtres » ensemble a droite. */ .esp-res__tete{margin-top:var(--e7)} .esp-barre--res{margin-top:var(--e3);gap:var(--e3) var(--e4);justify-content:space-between;align-items:center} .esp-res__vues .esp-msg__segments{margin:0;flex-wrap:wrap} .esp-barre__droite{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e2);flex:1 1 380px; max-width:520px;margin-left:auto} .esp-barre__droite .champ-cherche{flex:1 1 220px} .esp-barre__droite .esp-filtre{flex:0 0 auto} .esp-barre--res + .esp-filtres{margin-top:var(--e3)} .esp-barre--res ~ .esp-liste{margin-top:var(--e4)} /* Une ligne visee depuis une notification (#resa-…) : fond menthe et un filet vert a gauche, sans contour — un repere, pas une bande. */ .esp-tab--res tr.metier-cible{outline:0;background:var(--accent-fond);box-shadow:inset 3px 0 0 var(--accent)} .esp-tab--res td{padding:var(--e4)} .esp-tab--res th:first-child,.esp-tab--res td:first-child{padding-left:var(--e5)} .esp-tab--res th:last-child,.esp-tab--res td:last-child{padding-right:var(--e4)} .esp-tab--res .esp-tab__actions{flex-wrap:nowrap;gap:0} .esp-champ{display:flex;align-items:center;gap:12px;background:var(--surface);color:var(--gris-faible);font-size:var(--t6);min-width:0} /* La saisie ne remplissait pas sa boite : 27 px de haut dans un champ de 56 px. Le cadre a beau paraitre grand, c'est l'input qui recoit le clic. */ .esp-champ input{align-self:stretch;height:100%; border:0;background:none;font:inherit;color:var(--encre); flex:1 1 auto;min-width:0;outline:none} /* --bord-fort est une couleur de BORDURE (#c2c2c2) : en texte elle tombe a 1,78:1 sur blanc, la ou 4,5 est exige — et un indice de saisie se lit. On reprend le jeton que app.css utilise deja pour ses propres placeholders. */ .esp-champ input::placeholder{color:var(--gris-faible)} .esp-champ .ic{width:20px;height:20px;flex:0 0 20px} .esp-filtre{background:var(--gris-champ);color:var(--gris-fort)} .esp-filtre:hover{background:var(--gris-pilule)} .esp-bas{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:var(--e5);margin-top:var(--e7);align-items:start} .esp-bas__gauche{display:grid;gap:var(--e5)} /* Deux StatCards-liens (messages, envies) sous la prochaine reservation. */ .esp-raccourcis{grid-template-columns:repeat(2,minmax(0,1fr))} .esp-raccourcis .stat__val--texte{font-size:var(--t7)} /* L'assistance est un EditorialCTA clair, empile dans la colonne de droite. */ .esp-aide{grid-template-columns:minmax(0,1fr);align-items:start;padding:var(--e5)} .esp-aide .appel-edito__titre{font-size:var(--t8)} .esp-aide .appel-edito__texte{font-size:var(--t3)} .esp-aide .appel-edito__actions{flex-direction:column;align-items:stretch} .esp-aide .appel-edito__b{justify-content:center} .esp-aide .appel-edito__l{justify-content:center} /* Prochaine reservation et assistance cote a cote, a la meme hauteur : les deux cartes s'etirent sur la rangee, l'assistance cale ses actions en bas. */ .esp-res__haut{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.9fr);gap:var(--e4); margin-top:var(--e4);align-items:stretch} .esp-aide--compact{padding:var(--e4);margin:0;border-radius:var(--r-carte);grid-template-rows:auto 1fr; align-content:start} .esp-aide--compact .appel-edito__sur{margin-bottom:var(--e3)} .esp-aide--compact .appel-edito__titre{font-size:var(--t6)} .esp-aide--compact .appel-edito__texte{font-size:var(--t2);margin-top:var(--e1)} .esp-aide--compact .appel-edito__actions{flex-direction:row;align-items:center;align-self:end; gap:var(--e2) var(--e3);margin-top:var(--e3)} .esp-aide--compact .appel-edito__b{--b-haut:var(--b-haut-petit);--b-marge:var(--b-marge-petit); --b-texte:var(--b-texte-petit);flex:0 0 auto} .esp-aide--compact .appel-edito__l{font-size:var(--t3);font-weight:600} /* ------------------------------------------------- messagerie (frame 3) */ /* Liste a gauche, fil actif a droite : le fil recoit la majorite de la largeur. Les deux colonnes prennent la hauteur de l'ecran et defilent chacune DANS leur boite ; sous 1024 px elles s'empilent, hauteur libre. */ .esp-msg{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:var(--e5);margin-top:var(--e4); align-items:stretch} .esp-msg__col{border:1px solid var(--gris-pilule);border-radius:var(--r5);padding:var(--e4); display:flex;flex-direction:column;min-width:0} @media (min-width:1024px){ .esp-msg__col{height:calc(100dvh - 150px);min-height:560px} .esp-msg__col--liste{overflow-y:auto;scrollbar-width:thin} } .esp-msg__col .champ-cherche{flex:0 0 auto} .esp-msg__col--liste > *{flex:0 0 auto} .esp-msg__segments{display:flex;gap:10px;margin:18px 0 8px} .seg-pilule{display:inline-flex;align-items:center;background:var(--gris-champ);color:var(--gris-texte);position:relative} /* 34 px de dessin, 44 de cible : le calque etend la zone sans grossir la pilule. */ .seg-pilule::after{content:"";position:absolute;left:50%;top:50%; width:max(100%,var(--tactile));height:max(100%,var(--tactile));transform:translate(-50%,-50%)} .seg-pilule[aria-current="true"]{background:var(--vert);color:var(--texte-inverse)} .esp-msg__titre{font-size:var(--t5);font-weight:600;color:var(--gris-texte);margin:var(--e4) 0 var(--e2)} .esp-fil{display:flex;gap:var(--e3);padding:var(--e3);border-radius:var(--r-champ);align-items:flex-start; transition:background var(--mvt)} /* Survol = gris leger ; selection = vert pale : deux etats, deux fonds. */ .esp-fil:hover{background:var(--fond-creux)} .esp-fil[aria-current="page"],.esp-fil[aria-current="page"]:hover{background:var(--menthe)} .esp-fil__ligne{display:flex;align-items:baseline;gap:var(--e2);min-width:0} .esp-fil img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 46px} /* Sans photo : les initiales sur vert pale, meme rond que les photos. */ .esp-fil__vide{width:46px;height:46px;border-radius:50%;background:var(--menthe);flex:0 0 46px; display:inline-flex;align-items:center;justify-content:center; font-size:var(--t3);font-weight:600;color:var(--vert)} .esp-fil[aria-current="page"] .esp-fil__vide{background:var(--surface)} .esp-fil__vide .ic{width:26px;height:26px} .esp-fil__corps{min-width:0;flex:1 1 auto} .esp-fil__sujet{font-size:var(--t2);color:var(--vert);margin:2px 0;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} /* Le nom ne se tronque jamais (il passe a la ligne au besoin) ; l'heure est a droite, hors ellipse ; seul l'apercu se coupe. */ .esp-fil__nom{font-size:var(--t4);font-weight:600;margin:0;flex:1 1 auto;min-width:0;line-height:1.3} .esp-fil__quand{flex:0 0 auto;font-size:var(--t2);color:var(--gris-faible);white-space:nowrap} .esp-fil__ext{font-size:var(--t3);color:var(--gris-texte);margin:0;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0} /* accuses de lecture : 13 px, ils doivent rester lisibles */ .esp-fil__etat{font-size:var(--t2);color:var(--lagune);flex:0 0 auto} .esp-fil__etat[data-etat="lu"]{color:var(--gris-texte)} .esp-fil__compte{flex:0 0 auto;min-width:22px;height:22px;border-radius:var(--r-pilule); background:var(--erreur);color:var(--texte-inverse);font-size:var(--t1);font-weight:600; display:inline-flex;align-items:center;justify-content:center;padding:0 6px} .esp-conv{display:flex;flex-direction:column;flex:1 1 auto;min-height:0} .esp-conv__tete{display:flex;align-items:center;gap:var(--e3);padding-bottom:var(--e3); border-bottom:1px solid var(--bord);margin-bottom:var(--e3)} .esp-conv__tete img{width:46px;height:46px;border-radius:50%;object-fit:cover} .esp-conv__nom{font-size:var(--t7);font-weight:600;margin:0} .esp-conv__bien{font-size:var(--t3);color:var(--vert);margin:2px 0 0} /* « ••• » : 20 px, gris lisible, cible de 44. */ .esp-conv__plus{margin-left:auto;color:var(--gris-texte);position:relative;font-size:var(--t7); width:var(--tactile);height:var(--tactile);display:inline-flex;align-items:center; justify-content:center;border-radius:50%;letter-spacing:.05em} .esp-conv__plus:hover{background:var(--fond-creux);color:var(--encre)} .esp-conv__plus::after{content:"";position:absolute;left:50%;top:50%; width:var(--tactile);height:var(--tactile);transform:translate(-50%,-50%)} /* RG-132 : l'avertissement est permanent, pas une alerte ponctuelle — il se pose donc en tete du fil, discret, sans couleur d'erreur. #7a5c3f sur #f2f1ef = 5,42:1 (mesure). */ .esp-conv__securite{display:flex;align-items:center;gap:10px;margin:0; padding:10px 14px;border-radius:var(--r-champ); background:var(--fond-creux);color:var(--gris-texte); font-size:var(--t3);line-height:1.4} .esp-conv__securite svg{flex:0 0 auto} .esp-conv__flux > :first-child{margin-top:auto} .esp-conv__flux{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px; padding:var(--e4) var(--e1) var(--e4) 0;scrollbar-width:thin} .bulle{max-width:72%;border-radius:var(--r-carte);padding:var(--e3) var(--e4);font-size:var(--t4);line-height:1.5} /* Mes messages en vert tres leger, ceux du prestataire en gris neutre. */ .bulle--sortant{align-self:flex-end;background:var(--menthe);color:var(--vert-encre);border-bottom-right-radius:var(--r1)} .bulle--entrant{align-self:flex-start;background:var(--fond-creux);border-bottom-left-radius:var(--r1)} .bulle__heure{font-size:var(--t2);color:var(--gris-faible)} .bulle__heure--droite{align-self:flex-end} .esp-conv__pieces{display:flex;gap:8px;align-self:flex-end} .esp-conv__pieces img{width:120px;height:120px;object-fit:cover;border-radius:var(--r-bouton)} /* Le composer : champ + envoyer, lies par un filet au-dessus et la meme hauteur. */ .esp-conv__champ{display:flex;align-items:center;gap:var(--e2);padding-top:var(--e3);border-top:1px solid var(--bord)} .esp-conv__champ .esp-champ{flex:1 1 auto} .esp-conv__champ .esp-btn{flex:0 0 auto} /* --------------------------------------------- notifications (frame 5) Parti dans app.css (17/09/2026) : la liste et ses onglets « Tout | Non lus » se montrent aussi dans la fenetre ouverte depuis une page publique, qui ne charge pas cette feuille. */ /* ------------------------------------------------- detail (frame 4) */ /* 20/09/2026 : une page de reservation, pas un tableau de bord. Les cartes partagent le meme filet, le meme rayon et le meme rembourrage (.reglage) ; la hierarchie vient du type — reference discrete, titre, ligne de meta a filets — et de la densite : blocs a 16 px, photo bornee, rail droit colle. */ .esp-det{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--e6);margin-top:0;align-items:start} .esp-det__gauche{display:grid;gap:var(--e4);min-width:0} .esp-det__gauche > .reglage{margin:0} .esp-det__tete{margin:0 0 var(--e5)} .esp-det__retour{display:inline-flex;align-items:center;gap:var(--e2);margin:0 0 var(--e3); font-size:var(--t3);font-weight:600;color:var(--gris-texte)} .esp-det__retour .esp__retour{margin-right:0} .esp-det__retour:hover{color:var(--vert)} .esp-det__retour:hover .esp__retour{background:var(--fond-creux)} /* Retour + fil d'Ariane contextuel sur une ligne (21/09/2026) : le retour suit l'historique, le fil oriente (« Mes offres › Immobilier › Abonnement »). */ .esp-det__nav{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e1) var(--e3);margin:0 0 var(--e3)} .esp-det__nav .esp-det__retour{margin:0} .esp-det__ariane{padding-left:var(--e3);border-left:1px solid var(--bord)} .esp-det__nav .esp-det__retour:only-child{margin:0} /* sous 640 px, « Retour » suffit : le fil ne tiendrait qu'en se tronquant */ @media (max-width:640px){.esp-det__ariane{display:none}} .esp-det__ref{font-size:var(--t2);font-weight:600;letter-spacing:.06em;color:var(--gris-texte);margin:0; font-variant-numeric:tabular-nums} .esp-det__nom{font-size:var(--t14);font-weight:700;margin:var(--e1) 0 var(--e3);line-height:1.08;letter-spacing:-.015em} .esp-det__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e2) var(--e4);font-size:var(--t5);color:var(--gris-fort);margin:0} /* les trois informations se separent d'un filet vertical, pas de points espaces */ .esp-det__infos{display:inline-flex;align-items:center;flex-wrap:wrap;font-weight:500} .esp-det__infos span:not(:last-child)::after{content:"";display:inline-block;width:1px;height:14px; margin:0 var(--e3);background:var(--bord-fort);vertical-align:-2px} /* Statut : quatre etapes reliees par un filet de 1 px — vert jusqu'a l'etape en cours, gris ensuite. Ronds de 36 px, pictogramme de 16 px : fait = coche sur vert, en cours = vert et halo menthe, a venir = gris. */ /* 21/09/2026 : la timeline est une bande menthe sans cadre sous le titre, pas une carte de plus ; son titre est un surtitre en capitales. Ronds blancs a venir, vert quand c'est fait, halo blanc sur l'etape en cours. */ .esp-etapes{background:var(--accent-fond);border-color:transparent;padding:var(--e4) var(--e5)} .esp-etapes .reglage__tete{margin-bottom:var(--e3)} .esp-etapes .reglage__titre{font-size:var(--t1);font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--vert-encre)} .esp-etapes__liste{display:flex;gap:0} .esp-etape{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center; position:relative;padding:0 var(--e1);min-width:0} .esp-etape + .esp-etape::before{content:"";position:absolute;top:18px;left:calc(-50% + 24px); right:calc(50% + 24px);height:1px;background:var(--menthe-bord)} .esp-etape[data-etat="fait"] + .esp-etape::before, .esp-etape[data-etat="actif"]::before{background:var(--vert)} .esp-etape[data-etat="avenir"] .esp-etape__lib{color:var(--gris-texte)} .esp-etape__rond{width:36px;height:36px;border-radius:50%;background:var(--surface);color:var(--gris-faible); display:inline-flex;align-items:center;justify-content:center; box-shadow:inset 0 0 0 1px var(--menthe-bord)} .esp-etape__rond .ic,.esp-etape__rond img{width:16px;height:16px} .esp-etape[data-etat="fait"] .esp-etape__rond{background:var(--vert);color:var(--texte-inverse);box-shadow:none} .esp-etape[data-etat="actif"] .esp-etape__rond{background:var(--vert);color:var(--texte-inverse); box-shadow:0 0 0 4px var(--surface)} .esp-etape__lib{font-size:var(--t3);font-weight:500;margin:var(--e3) 0 2px;color:var(--encre)} .esp-etape[data-etat="actif"] .esp-etape__lib{color:var(--vert);font-weight:700} /* les dates restent alignees meme quand un libelle passe sur deux lignes */ .esp-etape__q{font-size:var(--t2);color:var(--gris-texte);margin:auto 0 0} /* Galerie : la grande photo a gauche, quatre vignettes 16:10 ; seule, elle prend toute la largeur sur un rapport fixe (2:1, 380 px au plus) : la hauteur ne depend pas du fichier et n'enfonce pas les informations. */ .esp-gal{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--e2)} .esp-gal figure{margin:0;position:relative;aspect-ratio:16/10;min-width:0} .esp-gal figure.esp-gal__grande{grid-row:span 2;aspect-ratio:auto} /* la grande photo prend la hauteur des deux vignettes : posee en absolu, son format d'origine (4:3, 3:2…) ne dicte plus la hauteur des rangees */ .esp-gal:not([data-seule]) figure.esp-gal__grande img{position:absolute;inset:0} .esp-gal img{width:100%;height:100%;object-fit:cover;border-radius:var(--r4);display:block} .esp-gal[data-vignettes="2"]{grid-template-columns:minmax(0,2fr) minmax(0,1fr)} .esp-gal[data-seule="oui"]{grid-template-columns:minmax(0,1fr)} .esp-gal[data-seule="oui"] figure.esp-gal__grande{grid-row:auto;width:100%;aspect-ratio:2/1;max-height:380px} .esp-gal[data-seule="oui"] img{border-radius:var(--r-carte)} .esp-gal__note{position:absolute;top:12px;right:12px;background:var(--surface);border-radius:var(--r-pilule); padding:6px 12px;display:inline-flex;align-items:center;gap:6px;font-size:var(--t3)} .esp-gal__note .ic,.esp-gal__note img{width:14px;height:14px} .esp-gal__tout{position:absolute;inset:0;border-radius:var(--r4);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:8px;background:var(--voile-sombre); color:var(--texte-inverse);font-size:var(--t4);font-weight:600} .esp-gal__tout .ic,.esp-gal__tout img{width:20px;height:20px} /* Informations pratiques : quatre cellules de meme dessin — etiquette, valeur, precision — separees par un filet ; « Inclus » porte ses puces. */ .esp-bien__lieu{display:inline-flex;align-items:center;gap:6px} .esp-bien__lieu .ic{width:14px;height:14px} .esp-bien__grille{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.6fr);gap:var(--e4)} .esp-bien__cel{min-width:0;padding-left:var(--e4);border-left:1px solid var(--bord)} .esp-bien__cel:first-child{padding-left:0;border-left:0} .esp-bien__eti{font-size:var(--t1);font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--gris-texte);margin:0 0 var(--e2)} .esp-bien__h{display:flex;align-items:center;gap:6px;font-size:var(--t7);font-weight:700;margin:0;line-height:1.2; letter-spacing:-.01em;font-variant-numeric:tabular-nums;min-width:0} .esp-bien__h span{min-width:0;overflow-wrap:anywhere} .esp-bien__h .ic{width:16px;height:16px;flex:0 0 16px;color:var(--vert)} .esp-bien__d{font-size:var(--t3);color:var(--gris-texte);margin:var(--e1) 0 0} .esp-inclus__l{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e3);padding-top:2px} .esp-puce{display:inline-flex;align-items:center;gap:6px;font-size:var(--t3);font-weight:500;line-height:1.4} .esp-puce .ic,.esp-puce img{width:14px;height:14px;flex:0 0 14px;color:var(--vert)} /* Paiement : lignes, TOTAL en grand sous un filet, puis deux tuiles — l'acompte regle (menthe, coche) et le solde — et le recu en pied. */ .esp-paie__badge{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:var(--menthe-bord);color:var(--vert-encre);font-weight:600} .esp-paie__badge .ic,.esp-paie__badge img{width:14px;height:14px} .esp-paie__ligne{display:flex;justify-content:space-between;gap:20px;font-size:var(--t3);margin:0 0 var(--e2); font-variant-numeric:tabular-nums} .esp-paie__total{display:flex;justify-content:space-between;align-items:baseline;gap:20px;font-size:var(--t10); font-weight:700;letter-spacing:-.01em;padding:var(--e3) 0 0;margin:var(--e2) 0 0;border-top:1px solid var(--bord); font-variant-numeric:tabular-nums} .esp-paie__total span:first-child{font-size:var(--t5);font-weight:600;color:var(--gris-fort)} .esp-paie__tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3);margin-top:var(--e4)} .esp-paie__tuile{padding:var(--e3) var(--e4);border-radius:var(--r-bouton);background:var(--fond-creux);min-width:0} .esp-paie__tuile[data-ton="vert"]{background:var(--accent-fond);color:var(--vert-encre)} .esp-paie__tuile-l{display:flex;align-items:center;gap:6px;font-size:var(--t2);font-weight:600;margin:0; color:var(--gris-texte)} .esp-paie__tuile[data-ton="vert"] .esp-paie__tuile-l{color:var(--vert-encre)} .esp-paie__tuile-l .ic{width:14px;height:14px;flex:0 0 14px;color:var(--vert)} .esp-paie__tuile-v{font-size:var(--t7);font-weight:700;margin:var(--e1) 0 0;font-variant-numeric:tabular-nums; overflow-wrap:anywhere} .esp-paie .reglage__pied{margin-top:var(--e4)} /* Colonne de droite : prestataire, actions, code d'arrivee — memes cartes, collees sous l'en-tete pendant le defilement quand la fenetre est assez haute pour les montrer entieres (sinon elles defilent avec la page). */ .esp-rail-droite{display:flex;flex-direction:column;gap:var(--e4)} .esp-rail-droite > .reglage{margin:0} /* 21/09/2026 : le rail (prestataire, code d'arrivee : ~550 px) reste colle sous l'en-tete pendant tout le defilement des qu'il a sa colonne. */ @media (min-width:1241px){ .esp-rail-droite{position:sticky;top:calc(var(--haut-entete,80px) + var(--e3))} } /* aide et annulation, en pleine largeur sous le paiement : les deux boutons cote a cote, la politique dessous */ .esp-fiche--aide .esp-fiche__actions{display:flex;flex-wrap:wrap;gap:var(--e3)} .esp-fiche--aide .esp-fiche__b{width:auto;flex:0 1 auto} .esp-fiche--aide .esp-fiche__mention{max-width:64ch} .esp-fiche--centre{text-align:center} /* prestataire : avatar a gauche, nom et mention a droite, le bouton dessous */ .esp-fiche__presta{display:flex;align-items:center;gap:var(--e3);margin:0 0 var(--e4)} .esp-fiche__photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px} .esp-fiche__initiales{display:inline-grid;place-items:center;background:var(--accent-fond);color:var(--accent); font-size:var(--t5);font-weight:700} .esp-fiche__id{min-width:0} .esp-fiche__nom{font-size:var(--t6);font-weight:700;margin:0;line-height:1.25;overflow-wrap:anywhere} .esp-fiche__note{display:inline-flex;align-items:center;gap:6px;font-size:var(--t2);color:var(--gris-texte);margin:2px 0 0} .esp-fiche__note .ic{width:14px;height:14px;color:var(--vert)} .esp-fiche__b{width:100%;justify-content:center} .esp-fiche__b + .esp-fiche__b{margin-top:var(--e2)} .esp-fiche__actions{display:grid;gap:var(--e2)} .esp-fiche__mention{font-size:var(--t2);color:var(--gris-texte);margin:var(--e3) 0 0;line-height:1.5} .esp-fiche__mention a{text-decoration:underline;white-space:nowrap} /* QR : une carte « billet » — bandeau menthe en tete (le titre), 168 px de code, reference, note. Le bandeau deborde jusqu'aux bords de la carte. */ .esp-code.qr .qr__titre{margin:calc(-1 * var(--e5)) calc(-1 * var(--e5)) var(--e4); padding:var(--e3) var(--e5);background:var(--accent-fond);color:var(--vert-encre); border-radius:var(--r-carte) var(--r-carte) 0 0;letter-spacing:.14em} .esp-code .qr__cadre{width:min(100%,200px)} .esp-code .qr__ref{font-size:var(--t6)} .esp-code .qr__note{font-size:var(--t1)} @media (max-width:640px){ .esp-code.qr .qr__titre{margin:calc(-1 * var(--e4)) calc(-1 * var(--e4)) var(--e4);padding:var(--e3) var(--e4)} } /* le recu suit les tuiles, sans filet : la carte respire */ .esp-paie .reglage__pied{border-top:0;padding-top:0;margin-top:var(--e3)} @media (max-width:640px){ /* informations pratiques : localisation en pleine largeur, arrivee et depart cote a cote, inclus en pleine largeur ; filets horizontaux */ .esp-bien__grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3) var(--e4)} .esp-bien__cel{border-left:0;padding-left:0;border-top:1px solid var(--bord);padding-top:var(--e3)} .esp-bien__cel:first-child{border-top:0;padding-top:0} .esp-bien__cel:first-child,.esp-bien__cel--inclus{grid-column:1 / -1} .esp-bien__cel:nth-child(3){border-left:1px solid var(--bord);padding-left:var(--e4)} .esp-bien__h{font-size:var(--t6)} } /* --------------------------------------------------- profil (frame 6) */ /* Lot 5 : la page de reglages est `.reglages` (app.css) : navigation secondaire legere a gauche (.nav-sec), sections `.reglage` a droite. La carte de solde et les grandes entrees ont disparu ; l'historique des paiements est une entree du groupe Paiements. Le titre de l'ecran est le

de la page, plus une tete de colonne. */ .esp-form__medias{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e3)} .esp-form__section{font-size:var(--t5);font-weight:600;margin:0 0 var(--e3);grid-column:1 / -1;color:var(--gris-fort)} /* photo a gauche (160 px), champs a droite en deux colonnes */ .esp-form__grille{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--e5) var(--e6);align-items:start} .esp-form__photo{font-size:var(--t3);font-weight:600;color:var(--encre);margin:0 0 var(--e2)} .esp-form__photo b{font-weight:400} .esp-form__cadre{border:2px dashed var(--menthe-bord);border-radius:var(--r-carte);padding:4px;background:var(--surface); max-width:96px} .esp-form__cadre img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:var(--r4)} .esp-form__champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3) var(--e4)} .esp-form__champs .esp-champ2{margin:0;min-width:0} .esp-form__champs .esp-champ2:has([name="email"]){grid-column:1 / -1} @media (max-width:1240px){.esp-form__grille{grid-template-columns:minmax(0,1fr)}} @media (max-width:640px){.esp-form__champs{grid-template-columns:minmax(0,1fr)}} .esp-champ2{margin-bottom:16px} .esp-champ2__e{display:block;font-size:var(--t3);font-weight:600;color:var(--encre);margin-bottom:6px} .esp-champ2__b{display:flex;align-items:center;gap:14px;background:var(--surface);font-size:var(--t6)} .esp-champ2__b .ic{width:20px;height:20px;color:var(--gris-faible);flex:0 0 20px} .esp-champ2__b input{border:0;background:none;font:inherit;flex:1 1 auto;min-width:0;outline:none} .esp-champ2__f{margin-left:auto;display:inline-flex;align-items:center;gap:10px;color:var(--gris-faible)} .esp-champ2__f .ic{width:18px;height:18px} .esp-drapeau{width:26px;height:18px;border-radius:var(--r1);overflow:hidden;display:inline-flex} .esp-drapeau i{flex:1 1 0} .esp-drapeau i:nth-child(1){background:#f77f00} .esp-drapeau i:nth-child(2){background:var(--surface)} .esp-drapeau i:nth-child(3){background:#009e60} .esp-form__bas{display:flex;justify-content:flex-end;margin-top:30px;flex-wrap:wrap} .esp-enreg{background:var(--vert);color:var(--texte-inverse)} .esp-enreg:hover{background:var(--vert-sombre)} /* -------------------------------------------------- envies (frame 7) */ /* La barre de la page : titre a gauche, recherche a droite ; dessous, les univers en onglets de texte sur un filet, souligne vert sur le courant. Sur ecran etroit la rangee defile, aucun libelle ne passe a la ligne. */ .esp-envies__tete{display:flex;align-items:center;gap:var(--e4);margin-top:0;flex-wrap:wrap} .esp-envies__tete .champ-cherche{flex:0 1 380px;margin-left:auto} /* Le titre de page vit sur la ligne de la recherche : sans sa marge haute. */ .esp-envies__tete .esp__h1{margin:0} /* La tete de la grille nomme l'univers filtre (niveau 2, avant les cartes). */ .esp-envies__univers{margin:var(--e4) 0 var(--e3);display:flex;align-items:baseline;gap:var(--e3);flex-wrap:wrap} .esp-envies__compte{font-size:var(--t3);font-weight:500;color:var(--gris-texte)} .esp-envies__compte[data-vide],.esp-envies__compte:empty{display:none} .esp-onglets{display:flex;align-items:stretch;gap:var(--e5);margin-top:var(--e4); border-bottom:1px solid var(--bord);overflow-x:auto;scrollbar-width:none} .esp-onglets::-webkit-scrollbar{display:none} .esp-onglets a{position:relative;display:inline-flex;align-items:center;min-height:var(--tactile);padding:0 2px; font-size:var(--t4);font-weight:500;color:var(--gris-texte);white-space:nowrap; border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--mvt),border-color var(--mvt)} .esp-onglets a::after{content:"";position:absolute;left:50%;top:0;height:100%;width:max(100%,var(--tactile));transform:translateX(-50%)} .esp-onglets a:hover{color:var(--vert)} .esp-onglets [aria-current="page"]{color:var(--vert);font-weight:600;border-bottom-color:var(--vert)} /* La liste : la grille du site (colonnes fixes), 3 colonnes dans la colonne de contenu de l'espace. */ .esp-envies{--colonnes:3;margin-top:var(--e5)} @media (max-width:1239px){.esp-envies{--colonnes:2}} @media (max-width:640px){.esp-envies{--colonnes:1}} /* La famille .esp-envie a ete retiree : 16 regles qui ne touchaient plus aucun element. La page « Vos envies » rend des .carte, comme les autres listes d'offres — verifie sur les 182 pages, zero occurrence. Les voisines .esp-envies, .esp-envies__tete et .esp-onglets, elles, sont bien vivantes (5, 7 et 7 usages) et restent en place. */ /* -------------------------------------------------- wallet (frame 8) */ .esp-wallet__tete{display:flex;align-items:flex-end;gap:24px;margin-top:0;flex-wrap:wrap} .esp-wallet__actions{margin-left:auto;display:flex;gap:14px} /* 21/09/2026 : le solde a gauche ; a sa droite une carte de meme hauteur avec les deux commandes (releve, moyens de paiement) en pleine largeur et la note du service dessous. */ .esp-wallet__haut{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--e4); margin-top:var(--e4);align-items:stretch} .esp-wallet__haut .esp-solde-zihma{margin-top:0;justify-content:center} .esp-wallet__aside{margin:0;display:flex;flex-direction:column;justify-content:center;gap:var(--e4)} .esp-wallet__gestion{flex-direction:column;align-items:stretch;gap:var(--e2);margin:0} .esp-wallet__note{margin:0;font-size:var(--t2);color:var(--gris-texte);line-height:1.5} /* Les blocs (activite, historique, moyens) : des cartes blanches du meme format que les sections de l'espace, titres en t6 / 700. */ .esp-bloc{background:var(--surface);padding:var(--e5) var(--e5) var(--e3);margin-top:var(--e4)} #wallet-mouvements > .esp-bloc:first-child{margin-top:var(--e5)} .esp-bloc--clair{padding-bottom:var(--e5)} .esp-bloc__tete{display:flex;align-items:center;gap:16px;margin-bottom:var(--e2)} .esp-bloc__titre{font-size:var(--t6);font-weight:700;color:var(--encre);margin:0;line-height:1.25} .esp-bloc__lien{margin-left:auto;display:inline-flex;align-items:center;gap:6px; min-height:var(--tactile);font-size:var(--t3);font-weight:600;color:var(--vert)} .esp-bloc__lien:hover{text-decoration:underline} .esp-bloc__lien .ic{width:14px;height:14px} /* la table de l'historique vit deja dans une carte : pas de second filet */ .esp-bloc .boite-tab{border-color:transparent;margin:0 calc(-1 * var(--e2))} .esp-bloc .pages{margin-top:var(--e3)} /* ActivityRow (capture Wallet annotee) : une grille — icone, transaction, montant, statut, action — pour que le montant, la pilule et le bouton soient a la meme place sur chaque ligne. Sous 640 : lignes-cartes. */ .esp-mvt{display:grid;grid-template-columns:44px minmax(0,1fr) max-content minmax(112px,max-content) 128px; align-items:center;gap:var(--e3) var(--e4);padding:var(--e3) 0;border-bottom:1px solid var(--bord)} .esp-bloc .esp-mvt:last-child,.esp-bloc--clair .esp-vers:last-child{border-bottom:0} .esp-mvt__ic{width:44px;height:44px;border-radius:var(--r-bouton);flex:0 0 44px;display:inline-flex; align-items:center;justify-content:center} .esp-mvt__ic[data-ton="vert"]{background:var(--menthe);color:var(--vert)} .esp-mvt__ic[data-ton="beige"]{background:var(--carte-chaud);color:var(--or-texte)} .esp-mvt__ic[data-ton="bleu"]{background:var(--wave-fond);color:var(--wave)} .esp-mvt__ic[data-ton="orange"]{background:var(--orange-money-fond);color:var(--orange-money)} .esp-mvt__ic[data-nature="attente"]{background:var(--or-fond);color:var(--or-texte)} .esp-mvt__ic[data-nature="remboursement"]{background:var(--succes-fond);color:var(--succes)} .esp-mvt__ic .ic{width:20px;height:20px} .esp-mvt__ic img{max-width:24px;max-height:24px;width:auto;height:auto} .esp-mvt__corps{min-width:0} .esp-mvt__t{font-size:var(--t5);font-weight:600;margin:0;overflow-wrap:anywhere} .esp-mvt__n{font-size:var(--t3);color:var(--gris-texte);margin:2px 0 0} .esp-mvt__m{font-size:var(--t5);font-weight:700;margin:0;white-space:nowrap;text-align:right; font-variant-numeric:tabular-nums} .esp-mvt__m[data-ton="vert"]{color:var(--succes)} .esp-mvt__m[data-ton="brun"]{color:var(--encre)} .esp-mvt__s{justify-self:start;white-space:nowrap} .esp-mvt__d{font-size:var(--t3);color:var(--gris-texte);margin:0;white-space:nowrap} .esp-mvt__b{justify-content:center;width:100%} /* Moyens utilises : meme grille, sans action. */ .esp-vers{grid-template-columns:44px minmax(0,1fr) max-content max-content} @media (max-width:640px){ /* deux rangees : icone · titre et date · montant, puis statut et action */ .esp-mvt{grid-template-columns:44px minmax(0,1fr) max-content;row-gap:var(--e2);column-gap:var(--e3)} .esp-mvt__s{grid-column:2;grid-row:2} .esp-mvt__b{grid-column:3;grid-row:2;width:auto;justify-self:end; --b-haut:var(--b-haut-petit);--b-marge:0 var(--e3);--b-texte:var(--t2)} .esp-vers .esp-mvt__d{grid-column:2} } .esp-vers{display:flex;align-items:center;gap:18px;padding:18px 22px;margin-top:14px; border:1px solid var(--gris-pilule);border-radius:var(--r-champ)} /* ------------------------------------------- changement de compte (f. 9) */ .esp-compte{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr); gap:35px;margin-top:34px;align-items:start} .esp-compte__carte{background:var(--fond);padding:34px 32px} .esp-compte__tete{display:flex;align-items:center;gap:20px;margin-bottom:30px} .esp-compte__tete img{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:0 0 62px} .esp-compte__t{font-size:var(--t10);font-weight:600;color:var(--vert);margin:0} .esp-compte__n{font-size:var(--t4);color:var(--gris-faible);margin:2px 0 0} .esp-compte__grille{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px} .esp-compte__grille .large{grid-column:1 / -1} .esp-tel{display:flex;align-items:stretch;overflow:hidden;background:var(--surface)} .esp-tel__p{display:inline-flex;align-items:center;padding:0 18px;background:var(--gris-champ); font-size:var(--t6);color:var(--gris-fort)} .esp-tel input{border:0;background:none;font:inherit;padding:0 18px;flex:1 1 auto; min-width:0;outline:none} .esp-assist{background:linear-gradient(140deg,var(--vert),var(--vert-sombre));color:var(--texte-inverse); border-radius:var(--r5);padding:30px 32px} .esp-assist__t{display:flex;align-items:center;gap:14px;font-size:var(--t10);font-weight:600;margin:0} .esp-assist__t .ic,.esp-assist__t img{width:26px;height:26px} .esp-assist__n{font-size:var(--t5);color:rgba(255,255,255,.82);margin:10px 0 22px} /* DECONNEXION (consigne client du 20/09) : la sortie de session est une action destructive, elle se lit en ROUGE — icone et texte — et non dans le vert du produit, qui la faisait passer pour une action ordinaire. Contour plutot qu'aplat plein : c'est une sortie, pas l'action principale de l'ecran. Les jetons sont ceux de la famille --danger-*. */ .esp-deco{border:1.5px solid var(--danger-bord);background:var(--danger-fond); color:var(--danger);margin-left:auto;flex:0 0 auto} .esp-deco:hover{background:var(--danger-survol);border-color:var(--danger)} .esp-deco .ic,.esp-deco img{width:22px;height:22px;color:currentColor} /* ------------------------------------------------------------ adaptatif */ /* A 1728 px (largeur de frame) le rendu suit la maquette. En dessous, la barre laterale se reduit aux icones puis passe en rail horizontal ; les cartes gardent leurs dimensions et changent seulement de nombre par ligne. */ @media (max-width:1500px){ .esp-det{grid-template-columns:minmax(0,1fr) 340px} } @media (max-width:1240px){ .esp-duo,.esp-bas,.esp-det,.esp-compte{grid-template-columns:minmax(0,1fr)} .esp-res__haut{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} .esp-det{gap:var(--e4)} .esp-rail-droite .esp-code{order:-1} .esp-msg{grid-template-columns:300px minmax(0,1fr);gap:var(--e4)} .esp-raccourcis{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:1023px){ .espace--reglages .esp__barre--reglages .nav-sec--barre, .espace--reglages .esp__barre--reglages .esp__second, .espace--reglages .esp__barre--reglages .esp__legal{display:none} .esp{flex-direction:column;gap:18px;padding-bottom:18px} .esp__barre{position:static;flex:0 0 auto;width:100%;height:auto;min-height:0; flex-direction:row;align-items:center;border-radius:var(--r5);padding:12px; overflow:visible} .esp__defile{overflow:visible;flex:0 0 auto} .esp__second,.esp__legal{display:none} .esp__corps{width:100%;padding-right:0} .esp-msg{grid-template-columns:minmax(0,1fr)} .esp__haut{flex-wrap:wrap;margin-right:0;padding-right:0} .esp__outils{margin-left:0;width:100%;flex-wrap:wrap;gap:10px} .esp__rond{width:56px;height:56px;flex:0 0 56px} .esp__rond .ic,.esp__rond img{width:26px;height:26px} .esp__cta{margin-left:0} .esp-sect__titre{font-size:var(--t10)} .esp-det__nom{font-size:var(--t12)} /* la taille de la planche (t13) est celle du bureau ; ici t10, sans !important : experience.css ne la redit plus */ .esp__h1,.esp__h1[data-taille="grande"]{font-size:var(--t10);line-height:1.15} .esp-gal,.esp-gal[data-vignettes="2"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .esp-gal figure.esp-gal__grande{grid-row:auto;grid-column:span 2;aspect-ratio:16/10} .esp-form__grille,.esp-compte__grille{grid-template-columns:minmax(0,1fr)} } /* Liste des reservations sous 1100 px : chaque ligne devient une carte — photo et bien, dates et statut sur une ligne, montant et paiement sur la suivante, les actions en pied. (A 1024 px, cinq colonnes ecrasaient le bien reserve sur quatre lignes.) Les etiquettes de colonne (data-col) des lignes-cartes partagees ne servent pas ici. */ @media (max-width:1100px){ .esp-tab--res thead{display:none} .esp-tab--res,.esp-tab--res tbody{display:block;width:100%} .esp-tab--res tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e2) var(--e3); align-items:center;padding:var(--e4);border-bottom:1px solid var(--bord)} .esp-tab--res tr:last-child{border-bottom:0} .esp-tab--res td,.esp-tab--res td:first-child,.esp-tab--res td:last-child{display:block;padding:0;border:0;min-height:0} .esp-tab--res td[data-col]::before{display:none} .esp-tab--res td:first-child{grid-column:1 / -1;padding-bottom:var(--e1)} .esp-tab--res td[data-col="Dates"]{order:1;display:flex;justify-content:flex-start;align-items:baseline;flex-wrap:wrap;gap:0 var(--e2)} .esp-tab--res td[data-col="Statut"]{order:2;justify-self:end} .esp-tab--res td[data-col="Montant"]{order:3;grid-column:1 / -1;display:flex;justify-content:flex-start;align-items:baseline;flex-wrap:wrap;gap:0 var(--e2)} .esp-tab--res td[data-col="Actions"]{order:4;grid-column:1 / -1;border-top:1px solid var(--bord);padding-top:var(--e2)} .esp-tab--res td .esp-tab__sous{margin:0} .esp-tab--res .esp-tab__statut{align-items:flex-end;text-align:right} .esp-tab--res .pilule-etat{white-space:normal;text-align:center;line-height:1.2} .esp-tab--res .esp-tab__bien img{width:80px;height:60px;flex:0 0 80px} .esp-tab--res .esp-tab__actions{justify-content:flex-start;margin-left:calc(-1 * var(--e2))} } /* Sous 860 px aucune frame n'est fournie : les tableaux, trop larges pour un telephone, defilent DANS leur propre boite plutot que de faire deborder la page (debordement horizontal du document = 0, verifie a 430 px). */ @media (max-width:900px){ /* Les tableaux du Client passent en LIGNES EMPILEES : jamais huit colonnes sur 390 px. L'en-tete disparait (chaque cellule se lit seule : bien, prix, statut, date), les actions ferment la fiche. Les tableaux du Prestataire (.esp.pro) gardent leur defilement dans .boite-tab. */ .esp:not(.pro) .esp-tab:not(.table),.esp:not(.pro) .esp-tab:not(.table) tbody{display:block;margin-top:var(--e2)} .esp:not(.pro) .esp-tab:not(.table) thead{display:none} .esp:not(.pro) .esp-tab:not(.table) tr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e5); padding:var(--e4) 0;border-bottom:1px solid var(--bord)} .esp:not(.pro) .esp-tab:not(.table) tr:last-child{border-bottom:0} .esp:not(.pro) .esp-tab:not(.table) td{display:block;padding:0;flex:0 1 auto;min-width:0} .esp:not(.pro) .esp-tab:not(.table) td:first-child{flex:1 1 100%} .esp:not(.pro) .esp-tab:not(.table) td:last-child:has(.esp-tab__actions){flex:1 1 100%} .esp:not(.pro) .esp-tab__actions{justify-content:flex-start;margin-left:calc(-1 * var(--e3))} .esp:not(.pro) .esp-tab__bien--large img{width:96px;height:64px;flex:0 0 96px} .esp.pro .esp-tab{white-space:nowrap} /* le defilement vient de .boite-tab */ .esp.pro .esp-tab td,.esp.pro .esp-tab th{padding-right:20px} .esp-mvt,.esp-vers{flex-wrap:wrap} .esp-mvt__fin{margin-left:0;text-align:left;width:100%} .esp-mvt__b{margin-left:0} .esp-wallet__haut{grid-template-columns:minmax(0,1fr);gap:var(--e4)} .esp-bloc{padding:var(--e4) var(--e4) var(--e2)} .esp-bloc .boite-tab{margin:0} /* historique : une carte par operation — libelle et montant, statut, date et methode */ .esp-tab--hist tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e1) var(--e3); align-items:center;padding:var(--e3) 0} .esp-tab--hist td,.esp-tab--hist td:first-child{display:block;padding:0;border:0;min-height:0} .esp-tab--hist td[data-col]::before{display:none} .esp-tab--hist td:nth-child(2){text-align:right} .esp-tab--hist td:nth-child(3){grid-row:2} .esp-tab--hist td:nth-child(4),.esp-tab--hist td:nth-child(5){grid-column:2;justify-self:end; font-size:var(--t2);color:var(--gris-texte)} .esp-tab--hist td:nth-child(4){grid-row:2} .esp-tab--hist td:nth-child(5){grid-row:3} .esp-tab--hist td:nth-child(3){grid-row:2 / span 2;align-self:center} /* Le renvoi a la ligne ne doit faire tomber QUE l'heure. Sans largeur souple, le bloc de texte reclamait sa largeur naturelle et passait lui aussi dessous : la pastille et le rond restaient seuls sur une ligne vide, et l'article montait a 257 px pour trois lignes de texte. */ /* (.esp-notif__item et .esp-notif__q : app.css, bloc notifications) */ .esp-barre{flex-wrap:wrap} .esp-barre .champ-cherche{flex:1 1 100%} /* liste des reservations : les trois compteurs sur une rangee (chiffre et etiquette, sans icone ni precision), les onglets puis la recherche avec « Filtres » a son cote. */ .esp-res__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e2)} .esp-res__stats .stat{padding:var(--e3)} .esp-res__stats .stat__val{margin-top:auto} .esp-res__stats .stat__lib{padding-right:0} .esp-res__stats .stat__ctx,.esp-res__stats .stat__ic{display:none} .esp-res__haut{grid-template-columns:minmax(0,1fr)} .esp-res__tete{margin-top:var(--e6)} .esp-barre--res{gap:var(--e3)} .esp-res__vues{flex:1 1 100%} .esp-barre__droite{flex:1 1 100%;max-width:none} .esp-barre__droite .champ-cherche{flex:1 1 180px} .esp-raccourcis{grid-template-columns:minmax(0,1fr)} .esp-conv__pieces{flex-wrap:wrap} .esp-det__meta{flex-wrap:wrap} /* 320 px : une pilule longue (« Acompte payé (30 %) ») poussait la colonne hors de l'ecran ; elle passe a la ligne comme dans les tables Pro. */ .esp-det .pilule-etat{white-space:normal;text-align:left;height:auto} } /* --------------------------------- securite du compte (page deduite, §3) */ .esp-secu__ligne{display:flex;align-items:center;gap:var(--e3)} .esp-secu__ligne .esp-champ2__b{flex:1 1 auto;min-width:0} .esp-secu__ligne .esp-champ2__b input{width:0} .esp-secu__note{font-size:var(--t3);color:var(--gris-texte);line-height:1.6;margin:0} /* La variante « danger » ne posait que la couleur du texte : elle heritait du fond VERT de .esp-btn, donc du rouge sur du vert (1,45:1, illisible). Une action destructrice doit se voir : fond clair, texte rouge fonce, bordure. */ .esp-btn--danger{background:var(--danger-fond);color:var(--danger);border:1.5px solid var(--danger-bord)} .esp-btn--danger:hover{background:var(--danger-survol);border-color:var(--danger)} .esp-btn--danger :is(.ic,img){color:currentColor;filter:none} /* ------------- recu, annulation, historique (ecrans deduits, ECARTS §3.5) */ /* Un document : en-tete (titre, reference, date, statut), deux parties (emis par / facture a), le bien, les montants avec le total en gras, le reglement, les actions. Vert et gris, jamais brun. */ .esp-recu{max-width:820px;border:1px solid var(--gris-pilule);border-radius:var(--r5); padding:var(--e7) var(--e7) var(--e6);margin-top:var(--e5);background:var(--surface)} .esp-recu__tete{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e4); flex-wrap:wrap;padding-bottom:var(--e5);border-bottom:1px solid var(--bord)} .esp-recu__tete .esp__h1{margin:0} .esp-recu__ref{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e4);font-size:var(--t3);color:var(--gris-texte); margin:var(--e2) 0 0} .esp-recu__ref span:first-child{font-weight:600;color:var(--vert-encre)} .esp-recu__duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--e6);padding:var(--e5) 0} .esp-recu__st{font-size:var(--t1);font-weight:600;letter-spacing:.08em;color:var(--gris-faible);margin:0 0 var(--e2); text-transform:uppercase} .esp-recu__l{font-size:var(--t4);color:var(--gris-fort);margin:0 0 var(--e1);line-height:1.5} .esp-recu__l:first-of-type{font-weight:600;color:var(--encre)} .esp-recu__bien{display:flex;align-items:center;gap:var(--e4);padding:var(--e4);margin:0 0 var(--e5); background:var(--fond-creux);border-radius:var(--r-carte)} .esp-recu__bien img{width:120px;height:90px;object-fit:cover;border-radius:var(--r-bouton);flex:0 0 120px} .esp-bien__nom{font-size:var(--t10);font-weight:600;margin:0} .esp-recu__bien .esp-bien__nom{font-size:var(--t7)} .esp-recu__montants .esp-paie__ligne{font-size:var(--t4);margin:0 0 var(--e2)} .esp-recu__montants .esp-paie__total{border-top:1px solid var(--bord);padding-top:var(--e3);margin:var(--e3) 0 var(--e4); font-size:var(--t8)} .esp-recu__reglement{background:var(--fond-creux);border-radius:var(--r-carte);padding:var(--e4)} .esp-recu__reglement .esp-paie__ligne:last-child{margin:0;font-weight:600} .esp-recu__regle{font-size:var(--t3);color:var(--gris-texte);margin:0 0 var(--e3)} .esp-recu__actions{display:flex;justify-content:flex-start;gap:var(--e3);margin-top:var(--e6);flex-wrap:wrap} .esp-annul__page{max-width:820px} .esp-annul{border:1px solid var(--gris-pilule);border-radius:var(--r5);padding:34px 38px; margin-top:26px;background:var(--surface)} .esp-annul__bien{display:flex;gap:24px;background:var(--fond);border-radius:var(--r4); padding:20px;margin:26px 0} .esp-annul__bien img{width:160px;height:118px;object-fit:cover;border-radius:var(--r-bouton);flex:0 0 160px} .esp-annul .esp-form__section{margin-top:30px} @media (max-width:900px){ .esp-recu,.esp-annul{padding:22px} .esp-recu__duo{grid-template-columns:minmax(0,1fr)} .esp-annul__bien{flex-wrap:wrap} .esp-annul__bien img{flex:1 1 100%;width:100%;max-width:400px} .esp-recu__actions{flex-wrap:wrap} } /* un filtre qui ne ramene rien le dit, plutot que de laisser un titre seul */ .esp-msg__vide{font-size:var(--t5);color:var(--gris-faible);padding:18px 12px;margin:0} /* ================================== tres petits ecrans (320 a 480 px) Aucune frame n'est fournie sous 860 px : ce bloc ne sert qu'a rendre la page tenable a 320 et 390 px, ou la moindre rangee rigide fait deborder le document. Trois principes, dans cet ordre : - ce qui peut passer a la ligne y passe (rangees de boutons, montants) ; - ce qui doit rester en rangee defile AVEC une barre visible, pour que l'utilisateur voie qu'il reste du contenu a droite ; - rien ne descend sous 44 px de cible tactile. Mesure de reference : documentElement.scrollWidth == clientWidth a 320, 390, 768, 1280 et 1728 px sur toutes les pages /compte/ et /pro/. */ @media (max-width:480px){ /* la marge de coquille de 22 px coute 14 % de la largeur a 320 px. Elle est posee en jeton parce que le filet de la barre du haut se cale dessus. */ :root{--esp-marge:14px} /* Un mot long comme « remboursements » ne doit jamais elargir un telephone (la taille, elle, est fixee des 1023 px ci-dessus). */ .esp__h1{overflow-wrap:anywhere} /* Les deux actions longues et l'oeil totalisent 331 px avant les marges. A 320 px, elles passent sur deux lignes dans leur propre colonne. */ .esp-wallet__actions{width:100%;max-width:100%;margin-left:0;flex-wrap:wrap} /* pagination : dix cibles ne tiennent pas sur une ligne de 292 px. */ /* montants : les deux membres ne se compriment pas sous leur mot le plus long, ils s'empilent plutot que d'elargir le document. */ .esp-paie__ligne,.esp-paie__total,.esp-recu__actions{flex-wrap:wrap} /* « modifier », « generer »... : le bouton passe sous le champ. */ .esp-secu__ligne{flex-wrap:wrap} .esp-secu__ligne .esp-champ2__b{flex:1 1 100%} /* suivi d'etapes : en rangee, quatre etapes valent 380 px de minimum. En colonne chaque etape garde son libelle ET sa date, rien n'est tronque. */ /* « Filtres » garde son nom pour les lecteurs d'ecran, l'icone suffit a cote du champ */ .esp-barre__droite .esp-filtre span{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* paiement : le badge passe sous le titre ; l'acompte et le solde deviennent deux lignes (etiquette a gauche, montant a droite), rien ne se coupe */ .esp-paie .reglage__tete{flex-wrap:wrap} .esp-paie__tuiles{grid-template-columns:minmax(0,1fr);gap:var(--e2)} .esp-paie__tuile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--e1) var(--e3)} .esp-paie__tuile-v{margin:0;font-size:var(--t5)} /* le code d'arrivee reprend 200 px sur un telephone : il se scanne de pres */ .esp-code .qr__cadre{width:min(100%,232px)} .esp-etapes__liste{flex-direction:column;gap:var(--e4)} .esp-etape{flex:0 0 auto;flex-direction:row;align-items:center;gap:14px;text-align:left;padding:0} .esp-etape + .esp-etape::before{top:auto;bottom:calc(100% + 1px);left:17px;right:auto;width:1px;height:var(--e4)} .esp-etape__rond{flex:0 0 36px} .esp-etape__lib{margin:0;min-width:0} .esp-etape__q{margin:0 0 0 auto;flex:0 0 auto} /* Les conteneurs qui defilent masquent leur barre au dessus de 480 px ; au doigt, sans barre, le contenu coupe passe pour du contenu absent. On la rend visible sur les onglets, les rails de cartes et les tableaux. « scrollbar-width:auto » defait le « none » pose plus haut (Firefox) ; une valeur autre que « auto » ferait au contraire ignorer les regles ::-webkit-scrollbar, qui sont ce qui force une vraie barre reservant sa place sous macOS au lieu d'une barre flottante qui s'efface. */ .esp-onglets,.esp-rail,.boite-tab{scrollbar-width:auto} .esp-onglets::-webkit-scrollbar,.esp-rail::-webkit-scrollbar, .boite-tab::-webkit-scrollbar{display:block;height:6px;-webkit-appearance:none} .esp-onglets::-webkit-scrollbar-track,.esp-rail::-webkit-scrollbar-track, .boite-tab::-webkit-scrollbar-track{background:var(--gris-pilule);border-radius:var(--r1)} .esp-onglets::-webkit-scrollbar-thumb,.esp-rail::-webkit-scrollbar-thumb, .boite-tab::-webkit-scrollbar-thumb{background:var(--gris-faible);border-radius:var(--r1)} .esp-onglets{padding-bottom:0} /* rangees de filtres et de segments : au doigt, 44 px de cible. */ .esp-onglets a{min-height:var(--tactile);display:inline-flex;align-items:center} .seg-pilule{height:var(--tactile)} /* .esp-segment a : app.css */ /* recu : le document rend son rembourrage a la largeur des montants. */ .esp-recu{padding:var(--e4)} .esp-recu__reglement{padding:var(--e3)} .esp-recu__bien{padding:var(--e3)} .esp-recu__bien img{width:88px;height:66px;flex:0 0 88px} .esp-recu__bien .esp-bien__nom{font-size:var(--t6)} /* messagerie : les bulles prennent presque toute la largeur du fil. */ .bulle{max-width:88%} /* tuiles : une par ligne, compactes. */ .esp-tuile{min-height:0;padding:var(--e3) var(--e4)} .esp-tuile__val{font-size:var(--t8)} /* detail : la grande photo ne fait plus 500 px de haut sur un telephone. */ .esp-gal figure.esp-gal__grande{aspect-ratio:4/3} } /* ============================================================================ CHAMPS DE L'ESPACE CLIENT — etats et lecture seule La planche « PROFIL CLIENT » ne dessine qu'un seul etat : le repos. Les autres (survol, focus, actif, hors service, erreur) sont deduits, dans la meme famille : trait qui s'assombrit, vert de marque au focus, tirets quand la saisie est fermee, trait epaissi et rouge sombre en erreur. ============================================================================ */ /* La couleur de marque sur les commandes natives : pastille du radio, coche, curseur de saisie. Une seule ligne evite de redessiner chaque commande. */ .esp__corps input,.esp__corps select,.esp__corps textarea{accent-color:var(--vert)} /* --- champ NON MODIFIABLE --------------------------------------------------- La maquette dessine « Nom », « Telephone » et « Email » exactement comme un champ saisissable : rien ne disait qu'ils sont figes. L'etat se lit desormais SANS LA COULEUR — cadre en tirets et cadenas — et `readonly` l'annonce aux lecteurs d'ecran. Le gris ne fait que doubler ces deux signaux. */ /* Le trait doit se VOIR : en #dcdcdc (le trait des champs ordinaires) les tirets se perdaient dans le gris du fond. --gris-faible tient 4,2:1 sur ce fond. */ .esp-champ2__b--fige{border-style:dashed;border-color:var(--gris-faible); background:var(--fond)} .esp-champ2__b--fige input{cursor:default;color:var(--gris-fort)} /* Un champ fige ne reagit pas au survol : il ne promet pas une saisie. */ .esp-champ2__b--fige:hover{border-color:var(--gris-faible)} /* --- etats du champ saisissable --------------------------------------------- */ .esp-champ2__b,.esp-tel{transition:border-color var(--mvt-d),box-shadow var(--mvt-d)} .esp-champ2__b:hover,.esp-tel:hover{border-color:var(--bord-fort)} /* le focus des boites de saisie est l'etat unique d'app.css (filet vert + halo) */ .esp-champ2__b:has(:disabled){background:var(--fond);border-style:dashed; border-color:var(--gris-faible);color:var(--gris-faible); cursor:not-allowed} .esp-champ2__b:has([aria-invalid="true"]){border-color:var(--erreur); box-shadow:inset 0 0 0 1px var(--erreur)} /* Liste deroulante posee DANS un champ : le cadre est celui du champ, la fleche est le chevron commun des listes (app.css, --chevron-champ), qui remplace celle du navigateur et pose sa propre marge droite. */ .esp-champ2__b select{flex:1 1 auto;min-width:0;height:100%;border:0;border-radius:0; padding:0;background:none;color:inherit;font:inherit;outline:none} /* L'etiquette est un