/* Gestineo — Module Immobilier — feuille de style mobile-first (iPhone 12, portrait) */ :root { /* Palette pastel : les SURFACES sont douces, le texte et les icônes restent assez foncés pour rester lisibles (AA) — un pastel n'est pas un texte délavé. */ --brand:#5f6fc9; --brand-dark:#4d5cb0; --brand-weak:#eceffb; --brand-ring:rgba(95,111,201,.25); /* ⚠️ ASSOMBRI LE 24/08 : `--accent` porte du texte BLANC (bouton d'appel à l'action) et sortait à 3,08:1 — sous le seuil AA, sur le bouton qu'on doit lire du premier coup d'œil. La TEINTE ne bouge pas, seule la luminosité : la marque reste la marque, elle devient lisible. 4,84:1. */ --accent:#a75f38; --accent-weak:#fbeee4; /* Les deux univers du propriétaire, chacun sa teinte pastel. */ --immo:#5f6fc9; --immo-weak:#eceffb; /* Mon Immo — bleu lavande */ --patri:#8a6fc0; --patri-weak:#f2ecfb; /* Patrimonia — violet doux */ --bg:#f8f7fc; --card:#ffffff; --ink:#2b2a3d; --ink-soft:#4c4a63; --muted:#6f6c88; --line:#eceaf4; /* Deux tons par état : le clair TEINTE les surfaces, le foncé PORTE le texte. Sans ce dédoublement, un libellé pastel sur fond pastel tombe sous le seuil AA. */ --ok:#4a8f6d; --ok-bg:#e8f4ee; --ok-ink:#2f6b4f; --warn:#b3803a; --warn-bg:#fbf2e4; --warn-ink:#8a5f21; /* Même mesure, même remède : la pastille rouge portait du blanc à 3,89:1. 5,13:1 désormais. */ --danger:#b04f54; --danger-bg:#fbebec; --danger-ink:#99414a; --brand-ink:#414f9e; --patri-ink:#654a9a; --neutral-weak:#f1f0f7; /* fond de badge / encadré neutre */ --chev:#c6c3d6; /* chevrons et séparateurs discrets */ /* La largeur de l'app : la même valeur que `--app` de module.css — les deux feuilles servent le même produit et doivent tenir la même colonne. */ --app-large:480px; /* Le fond HORS de la colonne, sur grand écran seulement. */ --hors-app:#b6acd4; --radius:14px; --radius-sm:10px; --shadow:0 1px 3px rgba(43,42,61,.06),0 1px 2px rgba(43,42,61,.04); --shadow-lg:0 8px 24px rgba(43,42,61,.09); --tap:44px; /* cible tactile minimale */ } * { box-sizing:border-box; } html,body { margin:0; padding:0; } body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; } a { color:var(--brand); text-decoration:none; } /* Accessibilité : anneau de focus visible au clavier, invisible à la souris. */ :focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:6px; } .skip-link { position:absolute; left:-9999px; } .skip-link:focus { left:8px; top:8px; z-index:100; background:#fff; padding:10px 14px; border-radius:10px; box-shadow:var(--shadow-lg); } /* Lisible par les lecteurs d'écran, invisible à l'œil. */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } @media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } } /* Coquille centrée : sur grand écran, même contenu « zoomé » (largeur constante) */ .shell { max-width:480px; margin:0 auto; min-height:100dvh; background:var(--bg); position:relative; display:flex; flex-direction:column; } /* ⚠️ LE FOND HORS COLONNE (Paul, 21/08 : « tout ce qui est sur les côtés doit avoir une autre teinte pour bien distinguer sur un desktop l'affichage mobile du reste », puis « accentue l'écart »). Il ne vaut QUE sur grand écran : en dessous de 520 px la colonne occupe tout, ce fond n'existe pas, et le poser quand même changerait la couleur d'une page mobile pour rien. ⚠️ La teinte est plus sombre que la PLUS SOMBRE des deux colonnes (la lavande de la connexion, #e3dff2), sinon l'écart se voyait sur une page et pas sur l'autre. Mesuré : 1,64 contre la lavande, 2,00 contre le blanc cassé — là où l'ombre seule donnait 1,00, c'est-à-dire rien. */ /* ⚠️ LA LARGEUR NE SUFFIT PAS À DIRE « BUREAU », ET UN TÉLÉPHONE EN PAYSAGE LE PROUVE : il fait 844 px de large, donc il passait la barre des 520 et le violet apparaissait — précisément ce que Paul ne veut jamais voir sur mobile (21/08). Agrandir le seuil ne règle rien : les plus grands téléphones dépassent 900 px couchés, et on finirait par exclure de vrais petits écrans de bureau. Le signal juste n'est pas la taille, c'est le POINTEUR. Un doigt rapporte `pointer: coarse` et `hover: none` ; une souris, `fine` et `hover`. Or ce cadre n'existe que pour distinguer l'application mobile de ce qui l'entoure sur un grand écran : un appareil tactile n'a rien autour, et n'en a donc jamais besoin. La condition dit désormais ce qu'elle veut vraiment dire. */ @media (min-width:520px) and (hover:hover) and (pointer:fine){ body { background:var(--hors-app); } .shell { box-shadow:0 0 40px rgba(0,0,0,.10); } .auth-wrap { box-shadow:0 0 40px rgba(0,0,0,.10); } } /* ⑦⑪ — DESKTOP = COLONNE MOBILE CENTRÉE, POUR LE SHELL V1 AUSSI (Paul, 08/09 : « desktop = colonne mobile centrée, jamais pleine largeur » ; « le fix doit s'appliquer à TOUTES les pages de l'app — Mon compte, dashboard… — via une règle de layout globale, pas page par page »). Les coquilles historiques (.shell, .coquille, .accueil .ac-shell, .auth-wrap) se calent à 480 et se centrent depuis toujours ; le shell V1 `.v1c`, lui, NE BORNAIT RIEN — seul son contenu se centrait par section (.body.mid à 460, les cartes marketplace à 440). Résultat sur grand écran : « Mon compte » étalé sur toute la largeur (⑪), et sur la connexion l'en-tête `.hd` — donc le chevron `.bk` — collé au BORD DE L'ÉCRAN au lieu du bord de la colonne (⑦). Une SEULE règle, au niveau du shell, remet tout `.v1c` en colonne de 480 centrée. ⚠️ ELLE VIT ICI (app.css), PAS DANS v1.css — v1.css est GÉNÉRÉ par extract-v1c.py (« ne pas éditer les règles à la main ») ; une règle posée là-bas repartirait à la prochaine réextraction. app.css est servi partout où un `.v1c` est AUTONOME (layouts accueil / vierge) ; dans un module (.coquille) la coquille NE charge PAS app.css et borne déjà à 480 — cette règle ne l'atteint donc pas, et il n'y a aucune double contrainte. ⚠️ PAS D'OMBRE NI DE CADRE ICI : `body.page-publique` retire volontairement le cadre du bureau (Paul, 21/08 : « ces pages ne sont pas l'application ») ; le fond hors-colonne reste géré par contexte (blanc en public, teinté en app). Sur mobile (≤480) la colonne prend tout : max-width plafonne, ne force pas. */ .v1c { max-width:480px; width:100%; margin-inline:auto; } /* En-tête */ .topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px; padding:10px 12px; background:#fff; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; gap:8px; font-weight:700; min-width:0; } .brand .logo { width:28px; height:28px; color:var(--brand); flex-shrink:0; } .brand .sub { color:var(--muted); font-weight:500; } /* ⚠️ ALIGNEMENT VERTICAL LOGO ↔ MARQUE (Paul, 01/09) — même correctif que la barre du module : `text-box:trim-both cap alphabetic` rogne la boîte du texte aux capitales/ligne de base pour que `align-items:center` le centre sur le logo, INDÉPENDAMMENT de la police (donc de la plateforme). Sur l'élément enveloppant l'élément enveloppant, jamais sur le conteneur flex `.brand` (n'y ferait rien). ⚠️ Classe `.brand-txt` et NON `.bt` : `.bt` est déjà le BOUTON de module.css (collision mesurée le 01/09 — une pastille grise apparaissait derrière le texte). */ .brand .brand-txt { min-width:0; text-box:trim-both cap alphabetic; } /* ⚠️ SOUS 360 px, « · Immobilia » PASSE SOUS LE BOUTON. Mesuré à 320 px (iPhone SE) sur /formules, où la barre porte à la fois un chevron, la marque et « Se connecter » : le sous-titre courait jusqu'à x=230 quand le bouton commence à x=194 — 36 px de recouvrement, du texte lisible par-dessus un bouton cliquable. Rien ne l'attrape : `.brand` est en `overflow:visible`, donc la PAGE ne déborde pas et aucune mesure de largeur ne rougit. Il faut comparer les positions de deux éléments voisins, ou regarder l'écran. C'est le nom de l'UNIVERS qui s'efface, jamais celui du produit : sur un écran de 320 px, savoir qu'on est dans Gestineo suffit — on vient d'y entrer par un module qu'on a choisi soi-même. */ @media (max-width:360px){ .brand .sub{display:none} } .topbar .actions { display:flex; align-items:center; gap:10px; margin-left:auto; } .topbar .who { font-size:13px; color:var(--muted); max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Flèche retour contextuelle */ .backlink { display:grid; place-items:center; width:36px; height:36px; margin-left:-4px; border-radius:10px; color:var(--ink); flex-shrink:0; } .backlink svg { width:22px; height:22px; } .backlink:active { background:var(--bg); } /* Bouton icône (en-tête) */ .icon-btn { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:10px; background:none; color:var(--muted); cursor:pointer; padding:0; } .icon-btn svg { width:20px; height:20px; } /* 🔴 44 px DE DOIGT SANS GROSSIR L'ENCRE — et la nuance est tout le sujet. `.icon-btn` (« Se déconnecter », « Mon compte ») et `.backlink` (la flèche de retour) mesurent 36×36. Mesuré le 28/08 dans un navigateur, sur la vraie feuille : la zone qui RÉPOND vaut **34 px** — le bouton, pas sa boîte. Apple demande 44, Material 48. Ils sont sur CHAQUE écran servi par `app.css`. ⚠️ ON N'ÉLARGIT PAS LA BOÎTE, ET C'EST MESURÉ, PAS CRAINT. L'en-tête se dimensionne sur son plus haut enfant : le 19/08, un lien posé à 30 px l'a fait passer de 46 à 53 px — sept pixels pris au CORPS, qui est en `overflow:hidden`, donc sept pixels de contenu devenus injoignables. Porter ces boutons à 44×44 ferait exactement ça. Le pseudo-élément, lui, est `absolute` : il ne participe pas à la mise en page, donc l'en-tête ne bouge pas — par construction, pas par chance. ⚠️ ET C'EST L'IDIOME DÉJÀ EN USAGE ICI : c'est lui qui donne 44 px à un rond de 14 px dans l'état des lieux, et `audit-tactile.mjs` sait le lire (il interroge le navigateur à 21 px du centre au lieu de croire le rectangle). ⚠️ `module.css` N'A PAS BESOIN DE LA RÈGLE, et je l'ai vérifié plutôt que de le supposer : `.icon-btn` et `.backlink` ne vivent que dans `views/layouts/base.php`, qui charge `app.css`. Le paquet natif passe par `layouts/module.php` et ne les emploie nulle part. Ce n'est donc PAS le piège `.small`/`.muted` du 22/08 — là, la classe ÉTAIT employée des deux côtés. */ .icon-btn, .backlink { position:relative; } .icon-btn::after, .backlink::after { content:""; position:absolute; left:50%; top:50%; width:var(--tap, 44px); height:var(--tap, 44px); transform:translate(-50%, -50%); } .icon-btn:active { background:var(--bg); } /* Contenu */ .content { flex:1; padding:16px 16px 90px; } .page-title { font-size:20px; font-weight:700; margin:4px 0 14px; letter-spacing:-.2px; } .page-title .sous { display:block; font-size:13px; font-weight:400; color:var(--muted); margin-top:2px; letter-spacing:0; } /* Cartes */ .card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:14px; } .card h2, .section-title { font-size:15px; font-weight:700; margin:0 0 10px; } .card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .card-head h2 { margin:0; } /* Grille de stats */ .stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; } .stat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; } .stat .label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; } .stat .value { font-size:22px; font-weight:750; margin-top:4px; } .stat .value.small { font-size:18px; } .stat.brand { background:var(--brand); border-color:var(--brand); color:#fff; } .stat.brand .label { color:rgba(255,255,255,.85); } .stat.brand .small { color:rgba(255,255,255,.8); } /* Listes */ .list { list-style:none; margin:0; padding:0; } .list li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); } .list li:last-child { border-bottom:none; } .list .titre { font-weight:600; } .list .meta { font-size:13px; color:var(--muted); } /* Liste empilée : titre puis détails, chacun sur sa ligne. Sans cela les spans restent en ligne et les trois informations se lisent comme une seule phrase. */ .list.empilee .titre, .list.empilee .meta { display:block; } /* Vignette d'annonce. Taille FIXE, occupée ou non : une liste dont les lignes changent de hauteur selon la présence d'une photo se lit mal, et le remplacement par une icône dit « pas de photo » sans laisser un trou. */ .vignette { flex:0 0 auto; width:72px; height:72px; border-radius:10px; overflow:hidden; background:var(--neutral-weak); display:grid; place-items:center; color:var(--muted); } .vignette img { width:100%; height:100%; object-fit:cover; display:block; } .vignette svg { width:26px; height:26px; } /* Galerie d'une annonce : une bande qui défile horizontalement, jamais la page. */ .galerie { display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; } .galerie figure { margin:0; flex:0 0 auto; width:min(78%, 300px); } .galerie img { width:100%; height:200px; object-fit:cover; border-radius:12px; display:block; background:var(--neutral-weak); } .galerie figcaption { font-size:12px; color:var(--muted); margin-top:4px; } /* Ligne de liste cliquable : toute la ligne est la cible, avec un chevron */ .list a.row { display:flex; align-items:center; gap:10px; flex:1; min-width:0; color:inherit; min-height:var(--tap); } .list a.row .grow { flex:1; min-width:0; } .list a.row .chev { color:var(--chev); font-size:20px; line-height:1; flex-shrink:0; } .list a.row:active { opacity:.7; } /* Badges */ .badge { display:inline-block; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--neutral-weak); color:var(--ink-soft); white-space:nowrap; } .badge.ok { background:var(--ok-bg); color:var(--ok-ink); } .badge.warn { background:var(--warn-bg); color:var(--warn-ink); } .badge.danger { background:var(--danger-bg); color:var(--danger-ink); } .badge.brand { background:var(--brand-weak); color:var(--brand-ink); } /* Boutons */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--tap); padding:11px 16px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:15px; font-weight:600; cursor:pointer; text-align:center; transition:filter .1s ease, transform .06s ease; } .btn:active { transform:translateY(1px); } .btn:disabled { opacity:.55; cursor:default; transform:none; } .btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; } .btn-accent { background:var(--accent); border-color:var(--accent); color:#fff; } .btn-danger { border-color:var(--danger-bg); background:var(--danger-bg); color:var(--danger-ink); } .btn-ghost { border-color:transparent; background:transparent; color:var(--brand); } .btn-block { width:100%; } .btn-sm { min-height:34px; padding:7px 12px; font-size:13px; border-radius:10px; gap:5px; white-space:nowrap; } .btn svg { width:17px; height:17px; flex-shrink:0; } /* Rangée de boutons qui se répartissent équitablement */ .btn-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .btn-row > * { flex:1; min-width:130px; } /* Formulaires */ .field { margin-bottom:12px; } .field label { display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; } .field input, .field select, .field textarea { width:100%; min-height:var(--tap); padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); font:inherit; color:var(--ink); background:#fff; } .field textarea { min-height:auto; } .field input:focus, .field select:focus, .field textarea:focus { outline:2px solid var(--brand-ring); outline-offset:0; border-color:var(--brand); } .field .check { display:flex; align-items:center; gap:8px; font-weight:500; min-height:var(--tap); } .field .check input { width:auto; min-height:auto; width:18px; height:18px; } .field .aide { font-size:12px; color:var(--muted); margin-top:4px; } .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; } /* Messages flash */ .flash { padding:11px 14px; border-radius:12px; margin-bottom:14px; font-size:14px; } .flash.ok { background:var(--ok-bg); color:var(--ok-ink); } .flash.err { background:var(--danger-bg); color:var(--danger-ink); } /* Mode démonstration : la teinte d'avertissement, parce que c'en est un. Ni verte (ce n'est pas une réussite), ni rouge (rien n'a échoué) — un état de l'application qui ne doit pas passer inaperçu, et qui n'existe jamais en ligne. `.demo` et `.demo-roles` sont des noms LIBRES : vérifiés dans les deux feuilles avant d'être posés (le précédent `.jour`, promu sur un nom déjà pris, changeait l'allure d'un écran que personne n'avait touché). */ .flash.demo { background:var(--warn-bg); color:var(--warn-ink); } .demo-roles { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:4px; } .demo-roles form { margin:0; } .demo-roles .btn { width:100%; } /* Encadré d'information (neutre / avertissement) */ .callout { display:flex; gap:10px; padding:11px 13px; border-radius:12px; background:var(--neutral-weak); color:var(--ink-soft); font-size:13px; line-height:1.45; margin-bottom:12px; } .callout.warn { background:var(--warn-bg); color:var(--warn-ink); } .callout svg { width:18px; height:18px; flex-shrink:0; margin-top:1px; } /* Tableaux (scroll interne autorisé) */ .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } table.data { width:100%; border-collapse:collapse; font-size:14px; } table.data th, table.data td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap; } table.data th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; } /* Navigation basse */ .bottomnav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; display:flex; background:#fff; border-top:1px solid var(--line); z-index:30; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); } .bottomnav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; color:var(--muted); font-size:11px; font-weight:600; } .bottomnav a .ic { width:22px; height:22px; } .bottomnav a.active { color:var(--brand); } /* Écran de connexion */ /* ⚠️ LE FOND DE LA PAGE DE CONNEXION N'EST PAS `--bg` (Paul, 19/08 : « le contour de Gestineo et le fond de la page de connexion doivent être plus prononcé comme contraste »). Mesuré : `--bg` (#f8f7fc) contre la carte blanche donne un rapport de 1,07 — c'est-à-dire RIEN. La carte ne se détachait pas, elle flottait ; sur un écran de téléphone en plein jour on ne voyait qu'une page blanche avec des champs dessus. #e3dff2 donne 1,30. Ce n'est toujours pas beaucoup — et c'est voulu : la page d'accueil du site n'a pas à crier. Mais 1,30 dessine un bord, là où 1,07 n'en dessinait aucun. La teinte est celle de la marque, pas un gris : un fond gris aurait éteint le lavande du monogramme juste au-dessus. Il ne touche QUE cette page — `--bg` reste ce qu'il est partout ailleurs, où les cartes sont nombreuses et où un fond soutenu fatiguerait. */ /* ═══════════════════════════════════════════════════════════════════════════ LA PAGE PUBLIQUE DES FORMULES Promue de l'établi le 20/08, après une douzaine de passes d'arbitrage. ⚠️ ELLE EST ÉCRITE AVEC LES VARIABLES D'app.css, PAS CELLES DE module.css. L'établi rend cette grille dans la coquille du module, qui pose --acc, --l, --mut, --i2. La page publique, elle, vit dans le layout `base` : ces variables n'y existent pas, et une couleur qui n'existe pas ne se voit pas — elle tombe sur la valeur héritée, donc du noir sur blanc. Recopier les règles telles quelles aurait donné une page qui « marche » et qui est illisible. Correspondances : --acc → --brand · --acc-s → --brand-weak · --l → --line · --mut → --muted · --i2 → --ink-soft · --surface → --card. ═══════════════════════════════════════════════════════════════════════════ */ /* Le code promo, en tête : il CHANGE LES PRIX qu'on va lire, donc il ne peut pas arriver après la décision. Le trait le sépare de la grille — à 1 px il se lisait comme une bordure de champ de plus. */ .promo-haut { display:flex; gap:8px; margin:0 0 6px; padding-bottom:9px; border-bottom:2px solid var(--line); } /* ⚠️ 44 px, LA CIBLE TACTILE DU DÉPÔT (`--tap`). Mesurés à 35 px sur la page servie : c'est un champ qu'on remplit au pouce, sur la page qui vend, et le bouton juste à côté était le plus petit élément cliquable de l'écran hors barre. La barre, elle, reste à 36 — la grandir volerait 8 px de contenu sur les quarante écrans de l'application, dont le corps est en overflow:hidden. */ .promo-haut input { flex:1 1 auto; min-width:0; min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); font:inherit; font-size:13px; color:var(--ink); } .promo-haut button { flex:0 0 auto; min-height:44px; padding:0 16px; border:0; border-radius:10px; background:var(--brand); color:#fff; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; } .offres { display:flex; flex-direction:column; gap:9px; } /* ⚠️ LE FOND BLANC EST REVENU (Paul, 20/08 : « chaque offre avait un encadré blanc, peux-tu le remettre ? »). Il avait été retiré le matin même, sur sa demande — et vu en place, l'écran y a perdu : sur le fond teinté de la page, un simple contour ne SÉPARE pas quatre offres, il les aligne. Le blanc en fait des cartes qu'on compare une à une. Aller-retour assumé : c'est à cela que sert l'établi. */ /* ⚠️ LA CARTE N'A PLUS DE REMBOURRAGE EN HAUT : le bandeau doit aller de bord à bord, et un `padding` sur la carte laisserait une lisière blanche autour de lui — une bande sombre encadrée de blanc se lit comme une erreur, pas comme un en-tête. `overflow:hidden` fait suivre les coins arrondis au bandeau. */ .offre { border:1px solid var(--line); border-radius:13px; padding:0 0 12px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; } .offre > *:not(.haut):not(.zone):not(.choix) { margin-left:13px; margin-right:13px; } .offre.tenue { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); } /* ⚠️ LE COÛT PAR BIEN EST DANS LA LIGNE, PAS AU BOUT (Paul, 20/08 : « 10 biens loués (75 €/an/bien) — ne met pas les €/an sur cette ligne au bout »). En note à droite, il s'alignait sous les autres notes et se lisait comme une colonne de valeurs. Entre parenthèses il qualifie le nombre qu'il précède : c'est la même phrase, et elle se lit d'un trait. Plus discret que le nombre, parce qu'il l'explique — il ne le concurrence pas. */ /* ⚠️ `.par-b` et `.offre li em` ONT ÉTÉ RETIRÉES LE 20/08, avec la seule ligne qui les rendait : « (un bien vide ne compte pas) ». Une règle qui ne désigne plus rien n'est pas neutre — elle décrit une mise en page que le produit ne rend pas, et la prochaine session la lit comme une intention à respecter. */ /* ⚠️ CENTRÉ EN HAUTEUR, pas sur la ligne de base : le bloc de prix fait trois lignes quand le nom n'en fait qu'une, et calés sur la même base ils se lisaient comme deux blocs sans rapport. */ /* ═══ LE BANDEAU DE FORMULE ════════════════════════════════════════════════ Paul, 21/08 : « fais un bandeau pour Free 0 %, Starter 2 % 190 € min/an, etc. des bandeaux un peu foncés et du coup le texte en blanc et bleu clair ». ⚠️ IL PORTE LE NOM ET LE PRIX, ET RIEN D'AUTRE. C'est la ligne qu'on compare d'une carte à l'autre : tout ce qu'on y ajoute se paie en temps de lecture sur QUATRE cartes à la fois. ⚠️ ET LE FOND EST CELUI DU HÉROS DE L'ACCUEIL, pas un gris. Les deux pages se suivent dans le parcours : un bandeau d'une autre famille de sombre donnerait l'impression d'avoir changé de site entre l'accueil et les prix. */ .offre .haut { display:flex; align-items:center; gap:7px; padding:11px 13px; margin:0 0 12px; background:linear-gradient(168deg,#171430 0%,#241f45 100%); } .offre .nom { font-size:16px; font-weight:800; letter-spacing:-.03em; color:#fff; } /* ⚠️ `.nom-module` A ÉTÉ RETIRÉE (Paul, 22/08 : « écris-les de la même taille »). Elle ne portait qu'un rapetissement, et son ordre : le module passait APRÈS la formule, en plus petit. Les deux se lisent maintenant d'un poids égal, et c'est `Immobilia` qui ouvre - il nomme le produit, la formule n'en est qu'un palier. */ /* ⚠️ VERT, ET SANS VARIANTE (Paul, 20/08). Il n'y a plus qu'UN macaron sur la grille — « Conseillé », sur Pro — donc plus rien à distinguer : `.eti.val` n'existait que pour teinter le second, « Best value », et sa classe se choisissait dans la vue en comparant le LIBELLÉ. Renommer l'étiquette au catalogue lui aurait fait perdre sa couleur en silence. La couleur appartient maintenant au macaron lui-même. ⚠️ LE VERT PLUTÔT QUE LA COULEUR DE MARQUE : le violet est celui des boutons « S'abonner » juste en dessous, et le macaron s'y fondait — il désignait la formule recommandée avec exactement la teinte que porte chaque carte. */ /* ⚠️ 9 px NE SE LIT PAS SUR UN TÉLÉPHONE, et c'est le macaron qui ORIENTE le choix — « Conseillé », sur Pro. Une recommandation qu'on ne déchiffre pas ne recommande rien. À 10,5 px elle reste plus petite que tout ce qui l'entoure, donc toujours un macaron, mais lisible. */ .offre .eti { font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:999px; background:var(--ok-bg); color:var(--ok-ink); } /* ⚠️ « 49 € PAR MOIS » SUR UNE SEULE LIGNE : sur deux, l'œil devait descendre pour savoir de quoi on parlait — et « 49 » seul, gros et coloré, se lit une fraction de seconde comme le prix annuel. */ .offre .prix { margin-left:auto; text-align:right; white-space:nowrap; line-height:1.2; } .offre .prix b { display:inline; font-size:18px; font-weight:800; letter-spacing:-.04em; color:var(--brand); } /* ⚠️ L'ESPACE ENTRE LE NOMBRE ET SON UNITÉ (Paul, 20/08 : « met de l'espace entre 49 € et "par mois" · idem pour toutes les formules »). 3 px, c'est le crénage d'un caractère : les deux se lisaient comme un seul mot. 7 px les sépare sans les éloigner — et c'est ici, une fois, pour les quatre formules. Une espace insécable écrite dans le gabarit aurait fait la même chose une fois sur quatre, et disparu au premier copier-coller. */ .offre .prix i { display:inline; font-style:normal; font-size:11px; color:var(--muted); margin-left:7px; } .offre .prix s { display:block; font-size:11px; color:var(--muted); } .offre .prix u { display:block; text-decoration:none; margin-top:3px; font-size:11px; font-weight:700; color:var(--ink-soft); } .offre .prix em { font-style:normal; font-weight:800; color:var(--ok-ink); } /* Le trait à MI-LARGEUR : il sépare le prix de ce qu'on gagne en plus, sans fermer la carte comme le ferait un filet pleine largeur. */ .offre .en-plus { margin:10px 0 6px; font-size:11px; font-weight:700; color:var(--muted); position:relative; padding-bottom:7px; } .offre .en-plus::after { content:""; position:absolute; left:0; bottom:0; width:50%; height:1px; background:var(--line); } .offre ul { list-style:none; margin:8px 0 12px; padding:0; } /* ⚠️ PLUS AUCUNE CROIX (Paul, 20/08). Une croix rouge sur une carte qu'on essaie de vendre dit d'abord ce qu'on n'a PAS : sur Starter, trois lignes barrées pesaient plus que les deux acquises. Ce qui n'est pas dans le palier n'y figure plus, et se retrouve en positif sur celui qui l'apporte. */ .offre li { display:flex; align-items:flex-start; gap:7px; padding:3px 0; font-size:12.5px; line-height:1.4; color:var(--ink-soft); } .offre li::before { content:"✓"; flex:0 0 auto; font-weight:800; color:var(--ok-ink); font-size:12px; line-height:1.5; } .offre li span { flex:1 1 auto; min-width:0; } .offre li span b { color:var(--ink); font-weight:700; } .offre li span i { font-style:italic; color:var(--muted); } /* ═══ LA PROTECTION FAIBLES LOYERS - UNE LIGNE, TOUJOURS ═══════════════════ Paul, 22/08 : « "Protection faibles loyers : Abonnement plafonné à 10% des loyers CC" sur une seule ligne ». ⚠️ LA PHRASE FAIT 390 px À LA TAILLE DES AUTRES PUCES, et la carte n'en offre que 280 sur un téléphone de 360. Aucun réglage fixe ne pouvait donc tenir : à 12,5 px elle passait en DEUX lignes sous 480 px, c'est-à-dire exactement là où on la lit. La police suit donc la largeur - mesurée, pas devinée : la phrase occupe 390 px à 12,5 px, elle tient donc sous « 12,5 × largeur / 390 ». D'où le calc ci-dessous, qui reste sous cette courbe de 360 à 520 px, et les deux bornes qui l'arrêtent : 12,5 px quand la place ne manque plus, 7 px quand elle manque tout à fait. ⚠️ ET LE nowrap SEUL AURAIT ÉTÉ UN PIÈGE : sous 340 px, même 7,5 px ne suffit plus - et une ligne insécable qui ne rentre pas ne se replie pas, elle POUSSE la carte et fait glisser la page entière de travers. Le triplet min-width:0 + overflow:hidden + text-overflow:ellipsis fait qu'au pire la phrase se termine par des points de suspension : ça se voit, donc ça se corrige. Une page qui défile latéralement, on ne sait jamais d'où ça vient. ⚠️ LA COCHE SUIT (font-size:1em). Figée à 12 px devant un texte à 9, elle aurait pris l'allure d'une puce de titre : c'est le RAPPORT entre les deux qui fait lire « un item de liste » plutôt que « deux éléments côte à côte ». ⚠️ L'ÉTABLI NE VERRA RIEN DE TOUT ÇA : son écran des tarifs est rendu avec module.css + SUP_TARIFS, pas avec cette feuille. Piège déjà au journal (le plancher tarifaire du 20/08). À reporter quand Paul demandera la mise à jour. */ .offre li.protection { font-size:clamp(7px, calc(3.1vw - 2.6px), 12.5px); } .offre li.protection::before { font-size:1em; } .offre li.protection .une-ligne { white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; } /* Le coût par bien, à droite et discret : c'est une lecture, pas la promesse. ⚠️ EN COLONNE À DROITE et non à la suite du libellé — collé, il se lirait comme un prix par bien À PAYER en plus de l'abonnement. */ /* ⚠️ PAS DE `width:100%` ICI - C'EST CE QUI LE FAISAIT DÉPASSER (Paul, 22/08, capture à l'appui). La carte donne 13 px de marge à gauche et à droite via `.offre > *:not(.haut)…` ; `width:100%` valant 100 % du contenu du PARENT, le bouton mesurait la largeur entière PLUS ses 26 px de marge, et sortait des deux côtés. Un élément `display:block` remplit déjà la place disponible en retranchant ses marges : la largeur imposée ne servait à rien, elle ne faisait que casser le calcul. `box-sizing` n'y pouvait rien - il gère le rembourrage et la bordure, jamais la marge. */ .go-offre { display:block; padding:10px; border-radius:11px; background:var(--brand); color:#fff; font-size:13px; font-weight:700; text-align:center; text-decoration:none; box-sizing:border-box; } .go-offre.doux { background:var(--brand-weak); color:var(--brand-ink); } /* ═══ LA BANDE HAUTE DE LA PAGE PUBLIQUE ═══════════════════════════════ Promue de l'établi le 20/08, après deux passes d'arbitrage de Paul. ⚠️ LE BOUTON EST PLEIN, PAS FANTÔME : c'est la seule autre chose à faire sur cette page que de se connecter, et un contour vide sur un fond teinté se serait lu comme une zone désactivée. ⚠️ LE FOND ET LE FILET FONT LA BARRE. Sans eux la bande est transparente et le bouton flotte : rien ne dit où commence le contenu. */ .entete-pub { position:absolute; top:0; left:0; right:0; height:60px; display:flex; align-items:center; justify-content:flex-end; /* ⚠️ AUCUN REMBOURRAGE À GAUCHE, ET C'EST LA MESURE QUI L'A IMPOSÉ (Paul, 20/08 : « centre sur l'espace entre le BORD GAUCHE et le bouton »). Avec 20 px à gauche, la zone libre commençait à 20 et non à 0 : le mot tombait à 135 là où le milieu réel est 125 — dix pixels, invisibles à l'œil nu, mais exactement ce qui fait qu'un centrage sonne faux. Le bord droit garde ses 20 px : c'est la marge du bouton. */ padding:0 20px 0 0; box-sizing:border-box; background:var(--card); border-bottom:1px solid #c4bddd; } /* ⚠️ « BIENVENUE » EST CENTRÉ DANS L'ESPACE LIBRE, PAS DANS LA BANDE (Paul, 20/08). Centré sur la bande entière, il paraîtrait décalé à gauche, le bouton poussant tout l'équilibre à droite. Et le centrage vient du FLEX, jamais d'un calage en dur : `flex:1` lui donne tout l'espace restant, son `text-align` EN EST le milieu. Un `padding-left` calculé ne vaudrait que pour CE libellé et CETTE largeur de bouton. ⚠️ EN CAPITALES, NI GROS NI GRAS (Paul : « ne met pas en gras le Bienvenue et fais ça moins gros »). C'est un ACCUEIL, pas un titre — le titre de cette page est la marque, juste en dessous. À 24 px et en 800 il lui disputait le regard. 17 px en graisse normale : l'interlettrage suffit à le poser. */ .entete-pub .bienvenue { flex:1 1 auto; min-width:0; text-align:center; font-size:17px; line-height:1; font-weight:400; letter-spacing:.18em; color:var(--muted); box-sizing:border-box; } /* ⚠️ `justify-content:center` ET `line-height:1` EN PLUS d'`align-items` : sans line-height explicite, la boîte du texte hérite de celle du corps (1.5), et le centrage vertical porte alors sur une boîte plus haute que les lettres — le mot descend d'un à deux pixels. Un décalage qu'on ne sait pas nommer, mais qu'on voit. */ .entete-pub .sabonner { display:inline-flex; align-items:center; justify-content:center; height:36px; line-height:1; padding:0 16px; border:0; border-radius:999px; background:var(--brand); color:#fff; font:inherit; font-size:14px; font-weight:650; letter-spacing:-.01em; text-decoration:none; cursor:pointer; } .auth-wrap.avec-entete { padding-top:84px; } /* ✅ POSÉE DANS `views/auth/login.php` LE 21/08/2026. Cette bande avait été retenue tant que `/formules` n'existait pas : livrer un bouton qui répond 404 est ce que le dépôt interdit (« un bouton mort et silencieux se prend pour un bug de l'application »). La page des formules est arrivée avec la vague du 20/08 et répond 200 en production — la condition est levée, le balisage suit. ⚠️ Si `/formules` disparaissait un jour, c'est CE bouton qu'il faudrait retirer d'abord, pas la route. */ /* ⚠️ GESTINEO EST UNE APP MOBILE, ET L'ÉCRAN DE CONNEXION AUSSI (Paul, 21/08 : « je veux que le header soit sur une largeur mobile uniquement »). Sans cette largeur, la bande d'accueil s'étirait sur 1280 px pendant que le reste de l'app tenait dans 480 : la page de connexion était le seul écran du produit qui ne ressemblait pas au produit. ⚠️ ET C'EST `.auth-wrap` QU'ON BORNE, PAS UNE COQUILLE AJOUTÉE AUTOUR : la bande est en `position:absolute` et se cale sur le premier parent positionné — celui-ci. Emboîter une coquille de plus l'aurait laissée sur l'ancien repère, donc pleine largeur, sans que rien ne le dise. */ .auth-wrap { position:relative; min-height:100dvh; max-width:var(--app-large); margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; background:#e3dff2; } /* La carte respire : 26 px de padding pour un écran qui ne porte que trois éléments, c'était une boîte serrée autour d'un formulaire. 34 px en haut et en bas la posent comme une page, ce qu'elle est devenue. */ /* Le contour suit le même raisonnement : `--line` sur du blanc valait 1,19, soit un trait qu'on devine plus qu'on ne le voit. #c4bddd donne 1,80, et l'ombre passe de `--shadow` (2 % d'opacité, invisible sur un fond teinté) à une ombre portée franche — c'est elle qui pose la carte SUR la page au lieu de la laisser dedans. */ .auth-card { width:100%; max-width:380px; background:#fff; border:1px solid #c4bddd; border-radius:18px; box-shadow:0 10px 30px rgba(43,42,61,.10),0 2px 6px rgba(43,42,61,.06); padding:34px 26px; } /* LA MARQUE, DEUX FOIS PLUS GRANDE (Paul, 19/08). Cette page est devenue l'accueil du site : le monogramme et le nom y sont la première chose lue, et la seule avant le formulaire. Le sous-titre a disparu — il décrivait deux champs et une flèche. */ /* ⚠️ L'ÉCART SOUS LA MARQUE VAUT LA HAUTEUR DE LA MARQUE (Paul, 19/08 : « un espace équivalent à la hauteur de Gestineo »). Le bloc mesure 55 px — c'est la taille du monogramme, plus haut que la ligne de texte. La marge est donc écrite `54px` et non `1em` ou `3rem` : elle suit une hauteur mesurée, pas une taille de police. Si le logo change de taille, les deux se règlent au même endroit, quelques lignes plus bas. */ .auth-card .brand { justify-content:center; font-size:38px; letter-spacing:-.03em; gap:12px; margin-bottom:55px; } .auth-card .tagline { text-align:center; color:var(--muted); margin-bottom:20px; font-size:14px; } /* ── Les deux champs et la flèche ────────────────────────────────────── Le libellé est DANS le champ, et l'action longe les deux sur toute leur hauteur. Trois règles seulement, parce qu'il n'y a que trois éléments. `align-items:stretch` (par défaut sur un flex) est ce qui donne au bouton la hauteur des deux champs plus leur écart : la fixer en pixels la désaccorderait au premier changement de `--tap`. */ .connexion { display:flex; gap:10px; } .connexion .champs { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:10px; } /* ⚠️ ET LE BORD DES CHAMPS AVEC, PARCE QUE CELUI-LÀ EST UNE RÈGLE, PAS UN GOÛT. Un contour de champ de saisie doit atteindre 3:1 (WCAG 1.4.11) : c'est lui qui dit OÙ l'on tape. `--line` donnait 1,19 — deux rectangles blancs sur du blanc, sans bord perceptible. #928cb2 donne 3,17. C'est la seule page où le réglage vaut d'être poussé : elle n'a que deux champs, tout le monde y passe, et personne n'y est encore connecté pour demander de l'aide. */ .connexion .champs input { width:100%; min-height:var(--tap); padding:11px 12px; border:1px solid #928cb2; border-radius:var(--radius-sm); font:inherit; color:var(--ink); background:#fff; } .connexion .champs input:focus { outline:2px solid var(--brand-ring); outline-offset:0; border-color:var(--brand); } .connexion .entrer { flex:0 0 auto; width:56px; border:0; border-radius:var(--radius-sm); background:var(--brand); color:#fff; cursor:pointer; display:grid; place-items:center; } .connexion .entrer svg { width:26px; height:26px; } .connexion .entrer:focus-visible { outline:2px solid var(--brand-ring); outline-offset:2px; } /* Le lien de secours, juste sous le mot de passe : c'est là qu'on le cherche, pas en bas de carte. Discret — il ne concurrence pas la flèche d'entrée — mais aligné à droite, sous le champ qu'il secourt. */ /* ⚠️ À GAUCHE (Paul, 20/08). À droite, le lien se rangeait sous le bouton d'entrée et se lisait comme une suite de CE bouton — une variante de « se connecter ». À gauche, il s'aligne sur les champs de saisie, donc sur ce à quoi il se rapporte : le mot de passe qu'on vient de ne pas retrouver. */ .oubli { margin:7px 2px 0; text-align:left; font-size:12.5px; } .oubli a { color:var(--muted); } /* Séparateur « ou » : un trait que le mot interrompt, sans image ni pseudo-hack. */ /* Le « ou » sépare deux façons d'entrer : il lui faut l'air de séparer. 16/12 px le collaient au champ du dessus. */ .auth-sep { display:flex; align-items:center; gap:10px; margin:28px 0 26px; color:var(--muted); font-size:13px; } .auth-sep::before, .auth-sep::after { content:""; flex:1; height:1px; background:var(--line); } /* Bouton Google : blanc à liseré, conformément aux règles d'usage de la marque. */ .btn-google { background:#fff; color:#3c4043; border-color:#dadce0; font-weight:600; } .btn-google svg { width:18px; height:18px; } /* États vides : un message + une action, jamais un cul-de-sac */ .empty { text-align:center; color:var(--muted); padding:24px 8px; } .empty .ic { width:44px; height:44px; margin:0 auto 10px; border-radius:14px; display:grid; place-items:center; background:var(--brand-weak); color:var(--muted); } .empty .ic svg { width:22px; height:22px; } .empty p { margin:0 0 14px; font-size:14px; } .empty .btn { display:inline-flex; width:auto; } .mt0{margin-top:0}.mb0{margin-bottom:0}.muted{color:var(--muted)}.small{font-size:13px} .right{text-align:right}.strong{font-weight:700} .row-between{display:flex;align-items:center;justify-content:space-between;gap:10px} .stack{display:flex;flex-direction:column;gap:8px} /* ===== Épuration UX ===== */ /* Titre de section hors carte */ .section-h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin:20px 2px 10px; } .section-h:first-child { margin-top:4px; } /* Tuiles d'accès (dashboard) */ .tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .tile { display:flex; flex-direction:column; gap:9px; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); color:var(--ink); transition:transform .08s ease; position:relative; } .tile:active { transform:scale(.98); } .tile .ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--brand-weak); color:var(--brand); } .tile .ic svg { width:21px; height:21px; } .tile .tl { font-weight:650; font-size:14px; letter-spacing:-.2px; } .tile .ts { font-size:11.5px; color:var(--muted); line-height:1.35; } /* Pastille de comptage sur une tuile (ex : 3 documents à signer) */ .tile .pastille { position:absolute; top:10px; right:10px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--danger); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; } /* Menu (page « Plus ») */ .menu { list-style:none; margin:0 0 14px; padding:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; } /* Un
n'est qu'un conteneur : c'est son