@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jakarta-400.ec6d5973505b.ttf") format('truetype'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jakarta-500.304f6bea61bc.ttf") format('truetype'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jakarta-600.03a280e14937.ttf") format('truetype'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/jakarta-700.d19e33cac5f6.ttf") format('truetype'); } /* Et si enfin : Simplicité complice. Retour utilisateur du 2026-10-04 : "surtout la 2 : simplicité complice". Charbon chaud, textes doux et émeraude pour les actions. */ * { box-sizing: border-box; } :root { --bg: #1C1B1A; --surface: #292725; --surface-vive: #33302D; --ink: #F3EEE8; --ink-muted: #C1BBB5; --accent: #8CCBB0; /* retour utilisateur du 2026-10-16 : retour au vert menthe (le corail du 2026-10-06 est abandonné ; il reste en seconde couleur sur la page publique) */ --heart: oklch(0.55 0.17 15); --border: #49433F; } /* Retour utilisateur du 2026-09-03 : "on va supprimer la possibilité de modifier l'apparence [...] on va garder la vue par défaut sombre pour tous" — retire le mode Clair / Automatique (Réglages > Apparence, retour utilisateur du 2026-09-02, base.html ne pose plus jamais data-theme). :root ci-dessus reste la seule palette, pour tout le monde. */ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif; } /* Retour utilisateur du 2026-09-18 : "toujours ce probleme de decalage [...] tantot le menu en bas n'est pas disponible, tantot c'est l'en-tete" — sans le overflow:hidden ci-dessous, si .screen se calculait ne serait-ce qu'un peu plus haut que le viewport RÉELLEMENT visible (fréquent sur Android en mode standalone, où 100dvh/100vh peuvent se recalculer de travers selon la barre de navigation gestuelle du système), la PAGE elle-même devenait défilable — masquant l'en-tête ou le menu du bas selon la position de défilement au moment de la capture, alors que .screen (overflow:hidden) était censé les garder fixes. Scopé à body.ecran-app (posé uniquement par base.html, jamais par la console admin — retour utilisateur du 2026-09-18 : "la vue admin est figée [...] je ne peux plus défiler" — une première version bloquait le défilement sur TOUT le document, y compris .admin-page, qui n'a pas de .zone-scrollable interne et compte au contraire sur le défilement normal de la page). */ body.ecran-app { overflow: hidden; } /* Retour utilisateur du 2026-10-16 : motifs africains (losanges, zigzags, triangles) en filigrane, très discrets (3,5 % d'opacité), fixes derrière tout l'écran ; les cartes ont leur propre fond et restent lisibles. Posé sur le body seul (jamais sur .screen/.zone-scrollable : les couches se superposeraient). Pas dans la console admin. */ body.ecran-app, body.page-publique { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2296%22 viewBox=%220 0 96 96%22 fill=%22none%22 stroke=%22%238CCBB0%22 stroke-opacity=%220.035%22 stroke-width=%221.3%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M24 9L39 24 24 39 9 24Z%22/%3E%3Cpath d=%22M24 17L31 24 24 31 17 24Z%22/%3E%3Ccircle cx=%2224%22 cy=%2224%22 r=%221.4%22 fill=%22%238CCBB0%22 fill-opacity=%220.035%22/%3E%3Cpath d=%22M72 57L87 72 72 87 57 72Z%22/%3E%3Cpath d=%22M72 65L79 72 72 79 65 72Z%22/%3E%3Ccircle cx=%2272%22 cy=%2272%22 r=%221.4%22 fill=%22%238CCBB0%22 fill-opacity=%220.035%22/%3E%3Cpath d=%22M54 12l5-7 5 7 5-7 5 7 5-7 5 7%22/%3E%3Cpath d=%22M72 19v10M67 24h10%22/%3E%3Cpath d=%22M6 90l7-12 7 12Z%22/%3E%3Cpath d=%22M24 90l7-12 7 12Z%22/%3E%3Cpath d=%22M52 46h12M52 50h12M56 54h4%22/%3E%3Ccircle cx=%228%22 cy=%2252%22 r=%221.2%22/%3E%3Ccircle cx=%2240%22 cy=%2258%22 r=%221.2%22/%3E%3Ccircle cx=%2288%22 cy=%2240%22 r=%221.2%22/%3E%3C/svg%3E"); background-size: 96px 96px; } /* Les éléments de formulaire n'héritent pas de la police du site par défaut (comportement natif des navigateurs) — sans cette règle, tout bouton retombe sur la police système (souvent Arial), même si le CSS du bouton ne définit rien d'autre. Une seule règle ici plutôt que de la répéter sur chaque classe de bouton. */ button, input, select, textarea { font-family: inherit; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 20px; height: 20px; } a { color: var(--accent); } .screen { max-width: 480px; margin: 0 auto; height: 100vh; /* repli navigateurs sans unites de viewport dynamiques */ height: 100svh; /* retour utilisateur du 2026-09-18 : la variante "small" (plus petite hauteur garantie, barres du navigateur pleinement deployees) plutot que 100dvh — dvh se recalcule EN DIRECT quand les barres systeme apparaissent/disparaissent, ce qui pouvait laisser .screen momentanement plus grand que le viewport reellement visible pendant ce recalcul (glitch connu sur Android, notamment en mode standalone) ; svh est une valeur fixe, jamais plus grande que l'espace garanti, donc jamais de decalage — au pire une petite bande vide en bas quand les barres se cachent, largement preferable a un en-tete ou un menu du bas qui disparait. */ display: flex; flex-direction: column; overflow: hidden; /* header/navbar restent fixes ; seule .zone-scrollable defile (retour utilisateur du 2026-08-26) */ /* Retour utilisateur du 2026-08-28 : une fois l'appli installée (mode standalone), certains téléphones Android dessinent le contenu jusque sous la barre de navigation gestuelle du système — le menu du bas se retrouvait caché, invisible sans défiler. env(safe-area-inset-*) vaut 0 partout ailleurs (navigateur normal, iPhone sans encoche) donc sans risque ; actif seulement là où c'est nécessaire. Nécessite viewport-fit=cover dans la balise meta viewport (base.html) pour être pris en compte du tout. */ padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .zone-scrollable { flex: 1; min-height: 0; /* sans ca, un flex-item ne se laisse jamais retrecir sous sa taille de contenu — le defilement interne ne se declencherait jamais */ overflow-y: auto; overflow-x: hidden; /* sans ca, tout contenu un peu trop large fait "trembler" l'ecran a gauche/droite au lieu d'etre simplement contraint (retour utilisateur du 2026-08-27) */ display: flex; flex-direction: column; } /* --- En-têtes --- */ .header { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 10px; } .icon-btn { width: 40px; height: 40px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; text-decoration: none; } .icon-btn svg { width: 20px; height: 20px; stroke: var(--ink); } .logobar { display: flex; align-items: center; justify-content: center; padding: 22px 0 4px; } .logobar svg { width: 26px; height: 26px; } .header-center { flex-shrink: 0; } .header-center svg { width: 24px; height: 24px; } .title-header { padding: 14px 20px 14px; } .title-header h1 { font-size: 28px; font-weight: 500; letter-spacing: -0.035em; margin: 0; } .subtitle { font-size: 13.5px; color: var(--ink-muted); margin-top: 4px; } .libelle-portee-unique { padding: 14px 20px 0; font-weight: 600; } /* --- Contenu Accueil (profil du jour) --- */ /* Retour utilisateur du 2026-09-03 : "la bulle notre suggestion [...] est trop proche du menu du bas" — .content n'avait aucun padding en bas (dernier enfant collé au bord de .zone-scrollable, juste au-dessus de .navbar). Concerne toutes les pages qui finissent sur .content sans .actions-fixe en dessous (rendez_vous_detail.html en particulier), pas seulement l'onglet Rendez-vous. */ .content { padding: 6px 20px 24px; display: flex; flex-direction: column; gap: 22px; } .photo { width: 100%; height: 372px; border-radius: 24px; position: relative; overflow: hidden; background: linear-gradient(160deg, oklch(0.62 0.09 55), oklch(0.48 0.10 40) 60%, oklch(0.38 0.09 35)); flex-shrink: 0; } .photo img { width: 100%; height: 100%; object-fit: cover; } .photo svg { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 200px; height: 220px; opacity: 0.85; } .name-row { display: flex; align-items: baseline; gap: 10px; } .name-row .name { font-size: 30px; font-weight: 600; } /* Retour utilisateur du 2026-09-03 : "réduis la taille de l'âge et de la taille" — la taille (en cm) a rejoint l'âge la veille dans ce même span (name-row/.age, ex. "32 ans, 180 cm"), plus long qu'un simple "32 ans" ; 22px→16px pour qu'il reste net à côté du prénom (30px) plutôt que de rivaliser avec lui. */ .name-row .age { font-size: 16px; color: var(--ink-muted); } /* Retour utilisateur du 2026-09-03 : "métier et ville, pays en gras" — seul usage réel de .meta dans l'app (métier + ville/pays sous le nom, _profil_public.html/accueil.html), sans risque ailleurs. */ .meta { color: var(--ink-muted); font-size: 15px; font-weight: 600; } /* Retour utilisateur du 2026-09-02 : essai en filet vertical sans fond ("pas épuré [...] les bulles"), puis retour en arrière le jour même ("le précédent avec les bulles et tout était plus épuré") — le pavé arrondi rempli d'origine revient tel quel. margin-top ajouté le même jour ("gère bien les espacements entre les questions et les réponses") — sans lui, le libellé (.subtitle) touchait directement la bulle (mesuré à 0px), alors que .content espaçait déjà chaque paire de 16px (22px désormais) : l'écart devait être petit près de sa propre réponse, plus grand avant la question suivante — pas l'inverse. */ .signature { /* Historique du 2026-09-02/03 : "une couleur plus vivante" (vert, rejeté) → bleu-gris doux (--surface-vive) → "remets [...] comme au niveau des idées de date" (retour à var(--surface), identique à .description-idee) → "mets une nuance" : --surface-vive revient, mais plus discret qu'avant (chroma/écart de clarté réduits par rapport à --surface — une nuance, pas une couleur franche). */ background: var(--surface-vive); border-radius: 18px; padding: 16px 18px; margin-top: 8px; font-size: 18px; line-height: 1.4; color: var(--ink); } /* Retour utilisateur du 2026-10-16 : les réponses du profil (bio, animal, questions signature) prennent la forme de cartes encadrées : petit libellé corail, réponse en grand, dessin au trait à droite (inspiré d'une maquette fournie, aux couleurs du site). Le dessin est un masque SVG teinté par --accent, donc il suit la palette. */ .carte-reponse { position: relative; border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 22px; padding: 16px 78px 18px 20px; background: var(--surface); min-height: 82px; } .carte-reponse::after { content: ""; position: absolute; right: 18px; top: 50%; width: 42px; height: 42px; transform: translateY(-50%); background-color: var(--accent); opacity: 0.85; -webkit-mask: var(--carte-dessin) center / contain no-repeat; mask: var(--carte-dessin) center / contain no-repeat; } .carte-reponse.longue { padding-right: 20px; } .carte-reponse.longue::after { top: 16px; transform: none; width: 30px; height: 30px; right: 18px; } .carte-reponse.longue .carte-question { padding-right: 42px; } .carte-question { font-size: 13.5px; font-weight: 600; color: var(--accent); letter-spacing: 0.01em; } .carte-texte { margin-top: 6px; font-size: 20px; line-height: 1.35; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .carte-reponse.longue .carte-texte { font-size: 17px; font-weight: 500; line-height: 1.45; white-space: pre-line; } .carte-precision { margin-top: 4px; font-size: 14.5px; color: var(--ink-muted); } .carte-reponse.ico-coeur { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M24 40S7 29.5 7 17.8C7 12.4 11 9 15.5 9c3.6 0 6.5 2.1 8.5 5.2C26 11.1 28.9 9 32.5 9 37 9 41 12.4 41 17.8 41 29.5 24 40 24 40Z%22/%3E%3C/svg%3E"); } .carte-reponse.ico-etoiles { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 8l3.5 9.5L33 21l-9.5 3.5L20 34l-3.5-9.5L7 21l9.5-3.5Z%22/%3E%3Cpath d=%22M36 28l1.8 4.7 4.7 1.8-4.7 1.8L36 41l-1.8-4.7-4.7-1.8 4.7-1.8Z%22/%3E%3C/svg%3E"); } .carte-reponse.ico-drapeau { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 43V6%22/%3E%3Cpath d=%22M12 8h27l-6 9 6 9H12%22/%3E%3C/svg%3E"); } .carte-reponse.ico-livre { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M24 12C19 8 11 8 6 10v28c5-2 13-2 18 2 5-4 13-4 18-2V10c-5-2-13-2-18 2Z%22/%3E%3Cpath d=%22M24 12v28%22/%3E%3C/svg%3E"); } .carte-reponse.ico-claquette { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 21h36v19H6Z%22/%3E%3Cpath d=%22M6 21l-1-9 37-5 1 9%22/%3E%3Cpath d=%22M15 10l5 9M25 9l5 9M35 7.500l5 9%22/%3E%3Cpath d=%22M6 21l1-5%22/%3E%3Cpath d=%22M14 30h20%22/%3E%3C/svg%3E"); } .carte-reponse.ico-note { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 36V10l20-4v26%22/%3E%3Ccircle cx=%2213%22 cy=%2236%22 r=%225%22/%3E%3Ccircle cx=%2233%22 cy=%2232%22 r=%225%22/%3E%3Cpath d=%22M18 18l20-4%22/%3E%3C/svg%3E"); } .carte-reponse.ico-sourire { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2224%22 cy=%2224%22 r=%2217%22/%3E%3Cpath d=%22M16 28c2 4 6 6 8 6s6-2 8-6%22/%3E%3Cpath d=%22M17 19v2M31 19v2%22/%3E%3C/svg%3E"); } .carte-reponse.ico-balance { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M24 8v32M14 40h20M10 14h28%22/%3E%3Cpath d=%22M10 14l-6 14a6 6 0 0 0 12 0Z%22/%3E%3Cpath d=%22M38 14l-6 14a6 6 0 0 0 12 0Z%22/%3E%3C/svg%3E"); } .carte-reponse.ico-etoile { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M24 6l5.2 11 12 1.6-8.8 8.3 2.2 11.9L24 33l-10.6 5.8 2.2-11.9-8.8-8.3 12-1.6Z%22/%3E%3C/svg%3E"); } .carte-reponse.ico-flamme { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M24 5c2 8 12 12 12 23a12 12 0 0 1-24 0c0-6 4-9 6-14 3 2 4 5 4 8 2-4 3-10 2-17Z%22/%3E%3C/svg%3E"); } .carte-reponse.ico-trophee { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 8h16v10a8 8 0 0 1-16 0Z%22/%3E%3Cpath d=%22M16 11H9c0 7 3 10 8 10M32 11h7c0 7-3 10-8 10%22/%3E%3Cpath d=%22M24 26v8M19 40h10M20 34h8v6h-8Z%22/%3E%3C/svg%3E"); } .carte-reponse.ico-avion { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M44 24c0 2-2 3-4 3H28l-8 14h-4l4-14H10l-4 5H3l3-8-3-8h3l4 5h10l-4-14h4l8 14h12c2 0 4 1 4 3Z%22/%3E%3C/svg%3E"); } .carte-reponse.ico-couverts { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 6v13a4 4 0 0 0 8 0V6M17 6v36%22/%3E%3Cpath d=%22M35 42V6c-5 3-8 9-8 17h8%22/%3E%3C/svg%3E"); } .carte-reponse.ico-animal-lion { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M39.5 24.0A4.6 4.6 0 0 1 37.4 31.8A4.6 4.6 0 0 1 31.8 37.4A4.6 4.6 0 0 1 24.0 39.5A4.6 4.6 0 0 1 16.3 37.4A4.6 4.6 0 0 1 10.6 31.8A4.6 4.6 0 0 1 8.5 24.0A4.6 4.6 0 0 1 10.6 16.3A4.6 4.6 0 0 1 16.2 10.6A4.6 4.6 0 0 1 24.0 8.5A4.6 4.6 0 0 1 31.8 10.6A4.6 4.6 0 0 1 37.4 16.2A4.6 4.6 0 0 1 39.5 24.0Z%22/%3E%3Ccircle cx=%2224%22 cy=%2224%22 r=%229%22/%3E%3Cpath d=%22M20 22v1.5M28 22v1.5%22/%3E%3Cpath d=%22M22 27h4l-2 2.2Z%22/%3E%3Cpath d=%22M20.5 31c1.8 1.4 5.2 1.4 7 0%22/%3E%3C/svg%3E"); } .carte-reponse.ico-animal-chat { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 20 11 6l9 7a14 14 0 0 1 8 0l9-7 1 14c2 9-4 20-14 20S8 29 10 20Z%22/%3E%3Cpath d=%22M4 26l8 2M4 33l8-3M44 26l-8 2M44 33l-8-3%22/%3E%3Cpath d=%22M18 21v2.5M30 21v2.5%22/%3E%3Cpath d=%22M22 29h4l-2 2.5Z%22/%3E%3C/svg%3E"); } .carte-reponse.ico-animal-hibou { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 8l7 5h14l7-5v22c0 8-6 14-14 14S10 38 10 30Z%22/%3E%3Ccircle cx=%2217%22 cy=%2221%22 r=%225%22/%3E%3Ccircle cx=%2231%22 cy=%2221%22 r=%225%22/%3E%3Cpath d=%22M22 28l2 5 2-5Z%22/%3E%3Cpath d=%22M18 40l6-4 6 4%22/%3E%3C/svg%3E"); } .carte-reponse.ico-animal-tortue { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 33a16 14 0 0 1 32 0Z%22/%3E%3Cpath d=%22M24 20v13M15 33l3-9M33 33l-3-9%22/%3E%3Ccircle cx=%2243%22 cy=%2228%22 r=%223.5%22/%3E%3Cpath d=%22M40 31l-1 2M14 33v5M33 33v5M8 33l-4 3%22/%3E%3C/svg%3E"); } .carte-reponse.ico-animal-biche { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M24 43c-6 0-9-6-9-12 0-5 3-9 9-9s9 4 9 9c0 6-3 12-9 12Z%22/%3E%3Cpath d=%22M16 26 6 18l8-2 5 6M32 26l10-8-8-2-5 6%22/%3E%3Cpath d=%22M20 22 17 9M28 22l3-13M17 13l-5-3M31 13l5-3%22/%3E%3Cpath d=%22M19 30v2M29 30v2%22/%3E%3Ccircle cx=%2224%22 cy=%2238%22 r=%221.6%22/%3E%3C/svg%3E"); } .carte-reponse.ico-animal-renard { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 6l12 9h14l12-9-1 20-17 17L6 26Z%22/%3E%3Cpath d=%22M15 25l5 2M33 25l-5 2%22/%3E%3Cpath d=%22M21 37h6l-3 4Z%22/%3E%3C/svg%3E"); } .carte-reponse.ico-animal-elephant { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2224%22 cy=%2220%22 r=%2210%22/%3E%3Cpath d=%22M15 13C4 7 1 26 12 30%22/%3E%3Cpath d=%22M33 13C44 7 47 26 36 30%22/%3E%3Cpath d=%22M20 30c-1 8-3 11 1 12 5 0 5-5 4-12%22/%3E%3Cpath d=%22M19.500 19v1.600M28.500 19v1.600%22/%3E%3Cpath d=%22M17 31c-4 3-4 6-2 8M31 31c4 3 4 6 2 8%22/%3E%3C/svg%3E"); } .carte-reponse.ico-animal-dauphin { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 31C5 27 10 24 15 20 20 12 30 8 36 12 41 16 40 21 38 26 36 31 38 36 44 38 37 40 31 38 29 33 24 36 18 37 13 36 9 35 4 34 4 31Z%22/%3E%3Cpath d=%22M26 10C26 5 30 3 33 3 31 6 31 8 32 11%22/%3E%3Ccircle cx=%2211%22 cy=%2229%22 r=%221%22/%3E%3C/svg%3E"); } .carte-reponse.ico-animal-phenix { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2224%22 cy=%2211%22 r=%224%22/%3E%3Cpath d=%22M24 15v12%22/%3E%3Cpath d=%22M24 18C16 17 8 13 4 6c2 10 8 18 20 20%22/%3E%3Cpath d=%22M24 18c8-1 16-5 20-12-2 10-8 18-20 20%22/%3E%3Cpath d=%22M24 27c-3 5-5 8-3 15 3-3 3-8 3-10 0 2 0 7 3 10 2-7 0-10-3-15Z%22/%3E%3C/svg%3E"); } .carte-reponse.ico-animal-perroquet { --carte-dessin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2227%22 cy=%2213%22 r=%228%22/%3E%3Cpath d=%22M20 11c-7 0-9 6-7 9 3 0 6-2 7-5%22/%3E%3Ccircle cx=%2228%22 cy=%2212%22 r=%221.3%22/%3E%3Cpath d=%22M21 20C16 29 18 38 26 42c8-2 11-14 7-22%22/%3E%3Cpath d=%22M24 27c4 2 6 6 5 11%22/%3E%3Cpath d=%22M26 42v5M30 41l3 5%22/%3E%3C/svg%3E"); } .description-idee { background: var(--surface); border-radius: 18px; padding: 16px 18px; font-size: 15.5px; line-height: 1.5; color: var(--ink); text-align: justify; } /* Fiche "Idée de date" (retour utilisateur du 2026-08-27) : le lieu proposé mis en valeur dans sa propre carte, sous la description, plutôt qu'une ligne de texte brute juste sous le titre. */ .carte-suggestion { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; } .suggestion-entete { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); } .suggestion-entete svg { stroke: var(--accent); flex-shrink: 0; } .suggestion-lieu { font-size: 16.5px; line-height: 1.4; color: var(--ink); } .actions { display: flex; justify-content: center; gap: 28px; padding: 6px 0 18px; } .actions-fixe { flex-shrink: 0; border-top: 1px solid var(--border); background: var(--bg); padding-top: 14px; } .action-btn { width: 64px; height: 64px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .action-btn svg { width: 26px; height: 26px; stroke: var(--ink); fill: none; } .action-btn.heart.picked { background: var(--heart); border-color: var(--heart); } .action-btn.heart.picked svg { stroke: white; fill: white; } .action-btn.cross.picked { background: var(--ink); border-color: var(--ink); } .action-btn.cross.picked svg { stroke: var(--bg); } .action-btn:disabled { opacity: 0.6; cursor: default; } .action-btn.pulse { animation: pulse-action 0.35s ease; } @keyframes pulse-action { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } } .action-form { display: contents; } .action-form button { border: none; background: none; padding: 0; } /* --- États centrés (pause, pas de profil, tampon) --- */ .middle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 44px; gap: 22px; } .badge { width: 76px; height: 76px; border-radius: 999px; background: var(--surface); display: flex; align-items: center; justify-content: center; } .badge svg { width: 34px; height: 34px; stroke: var(--accent); } .headline { font-size: 30px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.15; } .body-text { font-size: 15.5px; line-height: 1.55; color: var(--ink-muted); max-width: 260px; } .bouton { display: inline-block; margin-top: 4px; padding: 12px 24px; border-radius: 999px; background: var(--accent); color: oklch(0.14 0.02 250); font-weight: 700; text-decoration: none; border: none; cursor: pointer; font-size: 14px; } /* --- Listes (Mes matchs, Profils ratés, 2ème chance) --- */ .list { flex: 1; overflow-y: auto; } .row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; } .avatar { width: 56px; height: 56px; border-radius: 999px; flex-shrink: 0; position: relative; overflow: hidden; background: linear-gradient(160deg, oklch(0.62 0.09 55), oklch(0.48 0.10 40) 60%, oklch(0.38 0.09 35)); } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar.small { width: 52px; height: 52px; } .avatar svg { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); width: 46px; height: 50px; opacity: 0.85; } /* Aperçu de cadrage dans la gestion des photos (retour utilisateur du 2026-08-31) : carré et assez grand pour juger le cadrage, plutôt que le petit rond de .avatar qui ne ressemble pas à la vraie vignette affichée (voir .ligne-pyramide img, carrée elle aussi dès qu'il y a plus de 2 photos). */ .apercu-vignette { width: 92px; height: 92px; border-radius: 16px; flex-shrink: 0; position: relative; overflow: hidden; background: linear-gradient(160deg, oklch(0.62 0.09 55), oklch(0.48 0.10 40) 60%, oklch(0.38 0.09 35)); } .apercu-vignette img { width: 100%; height: 100%; object-fit: cover; } .info { flex: 1; min-width: 0; } .info .name { font-weight: 700; font-size: 16px; } .info .preview, .info .caption { font-size: 14px; color: var(--ink-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .btn-lien { flex-shrink: 0; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--accent); background: none; color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer; } .lien-mini { background: none; border: none; padding: 0; margin-top: 2px; color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; } /* --- Idées de dates : grille par catégorie + galerie photo --- */ .grille-cartes { display: grid; grid-template-columns: 1fr 1fr; row-gap: 10px; column-gap: 16px; padding: 16px 20px; overflow-y: auto; flex: 1; } .carte-icone { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; } .carte-icone .vignette { width: 100%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; position: relative; background: linear-gradient(160deg, oklch(0.62 0.09 55), oklch(0.48 0.10 40) 60%, oklch(0.38 0.09 35)); } .carte-icone .vignette img { width: 100%; height: 100%; object-fit: cover; } .carte-icone .nom { font-size: 14px; font-weight: 700; text-align: center; line-height: 1.3; /* Retour utilisateur du 2026-08-28 : une précédente tentative réservait une hauteur fixe de 2 lignes (min-height en em) pour aligner les rangées entre catégories aux noms courts/longs. Retiré : sur un téléphone avec une taille de police système agrandie (accessibilité), cette réservation gonflait bien plus que les photos (dimensionnées en px, indifférentes à ce réglage), créant un vide énorme avant la rangée suivante — pire que le problème d'origine. On garde seulement la limite à 2 lignes (jamais plus), sans forcer de hauteur minimale : une rangée de noms courts reste compacte, un nom long ne déborde pas. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Fiche "Idée de date" (retour utilisateur du 2026-08-27) : titre centré plutôt qu'aligné à gauche par défaut. Les photos utilisent désormais .galerie-pyramide (retour utilisateur du 2026-09-01, voir _galerie_pyramide.html) — la vieille .galerie (rangée défilante) n'a plus d'usage. */ .name-row-centree { justify-content: center; text-align: center; } /* Retour utilisateur du 2026-09-05 : compteur (jusqu'à 3 profils/jour par tirage), rendu en barre segmentée façon story plutôt qu'en texte "1/3" brut ("rends le 1/3, 2/3 plus esthétique") — au-dessus de la fiche du profil du jour, affiché seulement quand pertinent (accueil.html). */ .ligne-compteur-profil { display: flex; align-items: center; gap: 10px; margin-bottom: -6px; } .compteur-profil { display: flex; gap: 5px; flex: 1; max-width: 120px; } .segment-profil { flex: 1; height: 4px; border-radius: 999px; background: var(--border); transition: background-color 0.2s ease; } .segment-profil.rempli { background: var(--accent); } .badge-bonus { /* Retour utilisateur du 2026-09-18 : réintroduit pour la redistribution automatique des profils sans proposition (MatchDuJour.est_bonus) — retiré le 2026-09-17 pour les ajouts manuels de l'équipe uniquement, qui restent sans étiquette. */ font-size: 12px; font-weight: 600; color: var(--accent); background: color-mix(in oklch, var(--accent) 16%, transparent); padding: 2px 9px; border-radius: 999px; } /* --- Galerie photo en pyramide (1/2/3) + visionneuse plein ecran (retour utilisateur du 2026-08-26) : la photo principale seule sur la premiere ligne, puis 2, puis jusqu'a 3 — chaque photo cliquable ouvre la visionneuse (lightbox.js), avec defilement au clic ou au doigt. */ /* Retour utilisateur du 2026-09-02 : "réduire un peu la taille de ces photos dans la vue de profil" — resserre juste la galerie (pas le reste de la fiche, toujours pleine largeur) par rapport au padding standard de .content, plutôt que de rapetisser chaque photo individuellement (la logique de pyramide 1/2/3 continue de répartir l'espace disponible). */ /* Retour utilisateur du 2026-10-16 : photos et en-tête encadrés comme les cartes de réponses. */ .galerie-profil { padding: 12px; border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 22px; background: var(--surface); } .galerie-pyramide { display: flex; flex-direction: column; gap: 8px; } .ligne-pyramide { display: flex; gap: 8px; } .ligne-pyramide img { flex: 1; min-width: 0; border-radius: 18px; object-fit: cover; cursor: pointer; } /* Format large pour une ligne a une seule photo (la principale, ou la 2e ligne quand il n'y a que 2 photos au total — retour utilisateur du 2026-08-26 : les deux doivent alors avoir la meme taille affichee) ; format carre uniquement pour une vraie ligne de miniatures (2-3 photos). */ .ligne-pyramide img:only-child { aspect-ratio: 4 / 3; } .ligne-pyramide img:not(:only-child) { aspect-ratio: 1 / 1; } /* Recadrage manuel de la vignette (retour utilisateur du 2026-08-27) : ne change jamais le fichier original (la lightbox ci-dessous montre toujours la photo entière via object-fit:contain), seulement quelle portion la vignette "cover" garde visible verticalement. */ /* Générique (pas seulement .ligne-pyramide) : retour utilisateur du 2026-08-28, réutilisé pour l'aperçu miniature de Modifier mon profil, qui doit refléter en direct le cadrage choisi lui aussi. */ /* Retour utilisateur du 2026-10-16 : "les courbes des lignes suivent la forme des photos" — plus de cadre commun : chaque photo garde ses coins arrondis et porte son propre filet, légèrement décalé (outline-offset), qui épouse exactement sa forme. */ .galerie-profil { padding: 6px; border: 0; background: none; border-radius: 0; overflow: visible; } .galerie-profil .galerie-pyramide, .galerie-profil .ligne-pyramide { gap: 13px; } .galerie-profil .ligne-pyramide img { border-radius: 18px; outline: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 4px; } img.pos-haut { object-position: center top; } img.pos-bas { object-position: center bottom; } .lightbox-overlay { position: fixed; inset: 0; background: oklch(0.05 0 0 / 0.92); display: none; align-items: center; justify-content: center; z-index: 1000; } .lightbox-overlay.ouvert { display: flex; } .lightbox-image { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 12px; } .lightbox-fermer, .lightbox-precedent, .lightbox-suivant { position: absolute; width: 44px; height: 44px; border-radius: 999px; background: oklch(0.22 0.028 250 / 0.85); border: 1px solid var(--border); color: var(--ink); font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .lightbox-fermer { top: 16px; right: 16px; } .lightbox-precedent { left: 12px; top: 50%; transform: translateY(-50%); } .lightbox-suivant { right: 12px; top: 50%; transform: translateY(-50%); } /* --- Confirmation avant disparition d'un profil (retour utilisateur du 2026-09-03, "j'aime pas" — voir _modal_confirmation_disparition.html) --- */ .overlay-confirmation { position: fixed; inset: 0; background: oklch(0.05 0 0 / 0.72); display: none; align-items: flex-end; justify-content: center; z-index: 1100; padding: 0 16px 16px; } .overlay-confirmation.ouvert { display: flex; } .carte-confirmation { width: 100%; max-width: 448px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 28px oklch(0 0 0 / 0.35); } .carte-confirmation .body-text { margin: 0; text-align: center; } .actions-confirmation { display: flex; gap: 10px; } .actions-confirmation button { flex: 1; padding: 12px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; border: none; } .actions-confirmation .annuler { background: transparent; border: 1px solid var(--border); color: var(--ink); } .actions-confirmation .confirmer { background: var(--heart); color: oklch(0.97 0.01 95); } /* --- Historique : onglets Profils ratés / Profils aimés (retour utilisateur du 2026-09-03 : "fais ça comme si c'étaient 2 onglets" — remplace l'ancien duo de pastilles pleines par un vrai bandeau d'onglets, texte + soulignement sur celui actif). --- */ .tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 20px; } .tab { flex: 1; text-align: center; padding: 12px 4px; margin-bottom: -1px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-muted); font-weight: 600; font-size: 14px; cursor: pointer; } .tab.actif { color: var(--ink); border-bottom-color: var(--accent); } /* Ligne "Profils aimés" (retour utilisateur du 2026-09-03) : le bouton "Demander une 2ème chance" a été déplacé ici depuis Réglages > 2ème chance en libre-service — .row-aime empile la fiche cliquable (.row-lien, même contenu qu'une ligne .row normale) et le bouton plutôt que d'imbriquer un
dans un (invalide en HTML). */ .row-aime { flex-direction: column; align-items: stretch; } .row-aime .row-lien { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; } .form-2eme-chance { align-self: flex-start; } .bouton-2eme-chance { align-self: flex-start; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer; } .bouton-2eme-chance .quota { font-weight: 400; color: var(--ink-muted); } .bouton-2eme-chance:disabled { color: var(--ink-muted); cursor: default; } /* Retour utilisateur du 2026-09-03 : délai de 16h le lendemain avant de pouvoir demander une 2ème chance, et confirmation "vous avez demandé" une fois envoyée — texte simple à la place du bouton dans ces deux cas. */ .info-2eme-chance { font-size: 13px; color: var(--ink-muted); } .time { font-size: 12px; color: var(--ink-muted); } .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--accent); } .chevron svg { width: 18px; height: 18px; stroke: var(--ink-muted); flex-shrink: 0; } .empty-state { padding: 60px 30px; text-align: center; color: var(--ink-muted); } /* --- Barre de navigation --- */ .navbar { display: flex; border-top: 1px solid var(--border); background: var(--surface); padding: 10px 2px 18px; } .navitem { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; } .navitem svg { width: 22px; height: 22px; stroke: var(--ink-muted); flex-shrink: 0; } .navitem span { font-size: 9.5px; color: var(--ink-muted); font-weight: 500; white-space: nowrap; letter-spacing: -0.01em; } .icone-avec-badge { position: relative; display: inline-flex; } .point-badge { position: absolute; top: -2px; right: -3px; width: 9px; height: 9px; border-radius: 999px; background: var(--heart); border: 1.5px solid var(--surface); } .navitem.active svg { stroke: var(--accent); } .navitem.active span { color: var(--accent); font-weight: 700; } /* --- Formulaires --- */ .form-page { padding: 32px 24px; max-width: 420px; margin: 0 auto; } .form-page h1 { font-size: 30px; font-weight: 500; letter-spacing: -0.035em; margin-bottom: 24px; } .champ { margin-bottom: 18px; } .champ label { display: block; font-size: 13px; color: var(--ink-muted); margin-bottom: 6px; } .champ input, .champ textarea, .champ select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-family: inherit; font-size: 16px; } .champ textarea { min-height: 100px; resize: vertical; } /* Retour utilisateur du 2026-09-18 : "sur 2 lignes les cases [...] à côté, il y aura le nombre de profils à proposer" — Réglages > Préférences (preference_age.html) : une case à cocher par ligne (même pays, international) avec son sélecteur de nombre de profils/jour juste à côté, plutôt que l'ancien choix unique national/international/les deux. */ .ligne-portee { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .ligne-portee:last-child { border-bottom: none; } .champ .case-portee { display: flex; align-items: center; gap: 10px; width: auto; margin: 0; font-size: 15px; color: var(--ink); cursor: pointer; } .case-portee input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; } .nb-profils-portee { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); flex-shrink: 0; } .nb-profils-portee select { width: auto; padding: 8px 10px; } .erreurs { background: oklch(0.3 0.1 25 / 0.3); border: 1px solid var(--heart); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; color: var(--ink); font-size: 14px; } .messages-globaux { padding: 16px 20px 0; } .confirmation { background: oklch(0.3 0.06 165 / 0.3); border: 1px solid var(--accent); border-radius: 12px; padding: 12px 16px; margin-bottom: 4px; color: var(--ink); font-size: 14px; } .bouton-principal { width: 100%; padding: 14px; border-radius: 999px; border: none; background: var(--accent); color: oklch(0.14 0.02 250); font-weight: 700; font-size: 15px; cursor: pointer; } .lien-secondaire { display: block; text-align: center; margin-top: 16px; font-size: 14px; color: var(--ink-muted); } /* --- Pages légales (confidentialité, mentions légales) --- */ .page-legale { padding: 8px 24px 32px; max-width: 560px; } .page-legale h2 { font-size: 20px; margin: 28px 0 8px; } .page-legale p { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); } .a-completer { display: inline-block; font-size: 13px; font-style: italic; color: var(--accent); background: oklch(0.55 0.09 165 / 0.12); border-radius: 8px; padding: 6px 12px; margin: 4px 0; } /* --- Conversation --- */ .chat-header { display: flex; align-items: center; gap: 12px; padding: 4px 16px 14px; } .chat-avatar { width: 38px; height: 38px; border-radius: 999px; position: relative; overflow: hidden; flex-shrink: 0; background: linear-gradient(160deg, oklch(0.62 0.09 55), oklch(0.48 0.10 40) 60%, oklch(0.38 0.09 35)); } .chat-avatar img { width: 100%; height: 100%; object-fit: cover; } .chat-name { font-weight: 700; font-size: 16px; flex: 1; } .menu-conversation { position: relative; } .menu-conversation summary { list-style: none; cursor: pointer; } .menu-conversation summary::-webkit-details-marker { display: none; } .menu-conversation summary svg { width: 20px; height: 20px; fill: var(--ink); } .menu-liste { position: absolute; right: 0; top: 48px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; z-index: 10; min-width: 200px; box-shadow: 0 12px 28px oklch(0.1 0.02 250 / 0.45); } .menu-liste form { display: contents; } .menu-liste button, .menu-liste > a { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 14px 18px; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease; } .menu-liste button:hover, .menu-liste > a:hover { background: var(--bg); } .menu-liste form:last-child button, .menu-liste > a:last-child { border-bottom: none; } .menu-liste button.danger, .menu-liste > a.danger { color: var(--heart); } .messages { flex: 1; overflow-y: auto; padding: 4px 16px; display: flex; flex-direction: column; gap: 12px; } .bubble-row { display: flex; flex-direction: column; width: fit-content; max-width: 76%; } .bubble-row:not(.mine) { margin-right: auto; align-items: flex-start; } .bubble-row.mine { margin-left: auto; align-items: flex-end; } .bubble { padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.4; overflow-wrap: break-word; word-break: break-word; } .bubble-row:not(.mine) .bubble { background: var(--surface); border-bottom-left-radius: 4px; } .bubble-row.mine .bubble { background: var(--accent); color: oklch(0.14 0.02 250); border-bottom-right-radius: 4px; } .bubble-time { font-size: 10.5px; color: var(--ink-muted); margin-top: 3px; padding: 0 4px; } .composer { display: flex; align-items: center; gap: 10px; padding: 12px 16px 22px; border-top: 1px solid var(--border); } .composer input { flex: 1; min-width: 0; height: 42px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); padding: 0 16px; font-size: 14px; color: var(--ink); font-family: inherit; } .send-btn { width: 42px; height: 42px; border-radius: 999px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: none; cursor: pointer; -webkit-appearance: none; appearance: none; /* retour utilisateur du 2026-08-28 : sans ça, certains navigateurs mobiles conservent un habillage natif qui mord sur le fond rond personnalisé */ } .send-btn svg { width: 19px; height: 19px; stroke: oklch(0.14 0.02 250); } /* --- Console admin (plus large, pas de barre de navigation dater) --- */ .admin-page { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; } .admin-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; } .admin-nav a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; color: var(--ink-muted); font-size: 13.5px; font-weight: 600; } .admin-nav a.active { background: var(--accent); color: oklch(0.14 0.02 250); border-color: var(--accent); } .admin-section { margin-bottom: 12px; } .admin-section h2 { font-size: 22px; margin: 24px 0 12px; } .carte-admin { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .carte-admin .infos { flex: 1; min-width: 200px; } .carte-admin .infos a { color: var(--ink); font-weight: 700; text-decoration: none; } .contact-admin { font-size: 13px; color: var(--ink-muted); margin-top: 2px; } .carte-admin .actions-admin { display: flex; gap: 8px; } .btn-admin { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--ink); font-size: 13px; cursor: pointer; text-decoration: none; font-weight: 600; } .btn-admin.danger { border-color: var(--heart); color: var(--heart); } .btn-admin.primaire { background: var(--accent); border-color: var(--accent); color: oklch(0.14 0.02 250); } .btn-admin.icone { padding: 8px; display: inline-flex; align-items: center; justify-content: center; } .btn-admin.icone svg { stroke: currentColor; } /* Réglages > Modifier mon profil > recadrage de la vignette (retour utilisateur du 2026-08-27) */ .recadrage-photo { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; padding: 0 0 12px; margin-top: -6px; } .libelle-recadrage { font-size: 11px; color: var(--ink-muted); margin-right: 1px; white-space: nowrap; flex-shrink: 0; } .segment { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--ink-muted); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .segment.actif { background: var(--accent); border-color: var(--accent); color: oklch(0.14 0.02 250); } /* Bannière "Ajouter à l'écran d'accueil" (retour utilisateur du 2026-08-28, static/matching/install_prompt.js) — flottante au-dessus de tout, y compris la barre de navigation, jamais dans le flux normal de la page. */ .banniere-installation { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; max-width: 448px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 8px 28px oklch(0 0 0 / 0.35); } .banniere-installation-texte { display: flex; flex-direction: column; gap: 4px; } .banniere-installation-texte strong { font-size: 15px; } .banniere-installation-texte span { font-size: 13px; color: var(--ink-muted); line-height: 1.4; } .banniere-installation-actions { display: flex; justify-content: flex-end; gap: 10px; } .banniere-installation-actions button { border: none; border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; } .banniere-installation-plus-tard { background: transparent; color: var(--ink-muted); } .banniere-installation-oui { background: var(--accent); color: oklch(0.14 0.02 250); } /* Retour utilisateur du 2026-10-05 : "j'accepte toutes tes modifications". Navigation à quatre entrées, rattrapage contextuel et profil accessible. */ .navbar .navitem { min-height: 44px; justify-content: center; } .navbar .navitem span { font-size: 11px; } .acces-historique { display: inline-flex; position: relative; align-items: center; min-height: 44px; color: var(--ink-muted); text-decoration: none; font-size: 13px; } .acces-historique .point-badge { right: -8px; top: 9px; } .profil-resume { display: flex; align-items: center; gap: 14px; margin: 0 20px 20px; padding: 18px; border-radius: 20px; background: var(--surface); color: var(--ink); text-decoration: none; } .profil-resume .avatar { background: var(--surface-vive); } .profil-resume strong { display: block; font-size: 20px; font-weight: 500; } .profil-resume span { display: block; margin-top: 6px; color: var(--ink-muted); font-size: 12px; line-height: 1.5; } .carte-demandes { display: flex; flex-direction: column; gap: 9px; margin: 0 20px 12px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; text-decoration: none; color: var(--ink); } .carte-demandes[hidden] { display: none; } .carte-demandes strong { font-size: 16px; font-weight: 500; } .carte-demandes > span { font-size: 13px; line-height: 1.5; color: var(--ink-muted); } .carte-demandes .carte-demandes-action { color: var(--accent); } .acces-demandes { margin: 0 20px 12px; min-height: 44px; display: flex; align-items: center; font-size: 13px; } .acces-demandes[hidden] { display: none; } #nombre-demandes { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 99px; background: var(--accent); color: var(--bg); font-size: 12px; } .profil-resume .avatar { display: grid; place-items: center; } .profil-resume .avatar > span { font-size: 23px; color: var(--ink); margin: 0; } /* En-têtes complets et accessibles sur toutes les vues connectées. */ .header { display: grid; grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr); gap: 8px; } .header > :first-child { justify-self: start; } .header > :last-child { justify-self: end; } .header .header-center { min-width: 0; text-align: center; overflow-wrap: anywhere; } .header .icon-btn { min-width: 44px; min-height: 44px; } /* Retour utilisateur du 2026-10-06 : bouton "Date sur mesure" fixé en bas d'Idées de date, et page FAQ côté utilisateur. */ .actions-sur-mesure { padding: 14px 20px 16px; text-align: center; } .actions-sur-mesure .bouton { margin-top: 0; width: 100%; padding: 14px 24px; } .faq { padding: 0 20px 24px; } .faq details { border-bottom: 1px solid var(--border); } .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; font-weight: 600; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--accent); font-size: 20px; font-weight: 400; flex-shrink: 0; } .faq details[open] summary::after { content: "−"; } .faq details p { margin: 0 0 16px; color: var(--ink-muted); font-size: 14.5px; line-height: 1.55; } /* Retour utilisateur du 2026-10-06 : en-tête de profil réorganisé (voir _entete_profil.html) — nom et métier à gauche, âge/taille et ville/pays à droite. */ /* Retour utilisateur du 2026-10-16 : deux lignes alignées, nom ↔ âge/taille puis métier ↔ ville, séparées par un filet. */ .entete-profil { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 14px; border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 22px; background: var(--surface); } .entete-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; } .entete-ligne .name { font-size: 30px; font-weight: 600; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; } .entete-ligne .age { font-size: 17px; font-weight: 500; color: var(--ink); white-space: nowrap; flex-shrink: 0; } .entete-ligne-bas { align-items: center; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); } .meta-ligne { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; } .meta-ligne span { overflow-wrap: anywhere; } .meta-lieu { justify-content: flex-end; text-align: right; margin-left: auto; flex-shrink: 0; white-space: nowrap; } .entete-ligne-bas .meta { font-size: 14.5px; } .meta-ligne svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--accent); fill: none; } /* « Le petit mot d’Et si enfin » : bouton plein vert (retour utilisateur du 2026-10-16), page de l'avis dans un cadre. */ .carte-regard { border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 22px; background: var(--surface); padding: 20px 22px; font-size: 17px; line-height: 1.55; color: var(--ink); white-space: pre-line; } /* Retour utilisateur du 2026-10-07 : sélecteur de date en feuille — un appui choisit et ferme, sans bouton « Terminé » (inscription_etape1.html). Le