/* ============================================================= Système de design — couche « produit » Partagé par toutes les pages. Extrait du code réellement en place dans index.html, pas réinventé. À ne pas confondre avec la couche « imitation LinkedIn » (--bg, --card, --blue…), qui reste locale à la carte du post : elle doit ressembler à LinkedIn, pas à nous. ============================================================= */ /* ============================================================= THÈME Toutes les couleurs du produit passent par ces tokens : c'est ce qui rend le mode sombre possible sans réécrire les écrans. Une couleur en dur dans une page est un écran qui restera clair. Trois états, décidés dans Paramètres : auto (défaut) suit le réglage du système clair impose le clair sombre impose le sombre L'attribut data-theme est posé sur avant le premier rendu (script en tête de page) : sans ça, l'écran clignoterait en blanc avant de virer au sombre. ============================================================= */ :root{ /* --- encre --- */ --ink: #1a1a2e; /* texte principal, accents pleins */ --ink-2: #8a8a92; /* texte secondaire, libellés */ --ink-3: #b4b4bc; /* texte désactivé */ /* --- surfaces --- */ --page: #f0f0f3; /* fond de page */ --panel: #ffffff; /* cartes, modales */ --surface: #f2f2f5; /* champs, boutons neutres */ --surface-2: #e6e6ea; /* survol d'un bouton neutre */ --surface-3: #f8f8fa; /* champ posé sur le gris de la page */ --line: #00000014; /* filets de séparation */ /* Le squelette est sa propre matière, et non celle des champs : il se pose AUSSI BIEN sur une carte blanche que sur le gris de la page, ce qu'aucune des surfaces ci-dessus ne fait — --surface (#f2f2f5) et --page (#f0f0f3) sont à trois points l'un de l'autre, un squelette à même la page y était invisible. D'où une teinte franchement plus basse que les deux. */ --sk-base: #e2e2e8; --sk-lueur: #f1f1f4; /* la crête du balayage */ /* --- accents --- */ --red: #e0384f; /* week-ends, badges, suppression */ --blue-ios: #0a84ff; /* sélection (check « Utilisé ») */ --blue-link: #0a66c2; /* mentions, liens */ /* --- surface inversée : boutons pleins, lien actif, jour choisi --- Ne PAS écrire background:var(--ink); color:#fff : en sombre --ink est clair, et le texte blanc disparaîtrait sur un bouton clair. */ --solid-bg: #1a1a2e; --solid-ink: #ffffff; --solid-bg-2: #2a2a44; /* survol */ /* --- pastilles d'état --- */ --tag-bg: var(--surface); --tag-ink: var(--ink-2); --tag-wait-ink: #6b6b73; --tag-action-bg: #fdecef; --tag-action-ink: var(--red); --tag-ok-bg: #e7f5ee; --tag-ok-ink: #0d7a4f; --tag-live-bg: #e8f0fb; --tag-live-ink: var(--blue-link); /* --- avertissement (données locales) --- */ --warn-bg: #fff9e6; --warn-ink: #7a5b00; /* --- action destructrice --- */ --danger-bg: #fdecef; --danger-bg-2: #fbdae0; /* --- double bordure : ce qui est POSÉ --- */ --edge: #d0d0d6; --edge-w: 2px; --edge-gap: 4px; /* --- rayons --- */ --r-panel: 20px; /* modales, grandes cartes */ --r-card: 18px; /* carte du post */ --r-field: 12px; /* champs de saisie */ --r-btn: 10px; /* boutons */ --r-pill: 999px; /* pastilles, toggles */ /* --- élévation : ce qui FLOTTE --- */ --lift: 0 18px 44px -12px #00000045; /* --- bascules (toggle) : valeurs du toggle des visuels --- */ --toggle-track: #e4e4e8; /* la piste */ --toggle-off: #6a6a72; /* option non choisie */ --toggle-lift: 0 1px 3px #0000001f; /* l'ombre courte de la pastille */ /* --- rythme --- */ --gap: 8px; /* écart intérieur des panneaux */ --edge-margin: 10px; /* marge aux bords d'écran */ } /* ============================================================= Palette sombre Des gris neutres, jamais de noir pur : sur un écran OLED le noir absolu fait baver le texte clair et écrase la hiérarchie. On monte par paliers — page, panneau, champ — pour retrouver exactement les rapports du clair. Les accents sont éclaircis et désaturés : le rouge du clair (#e0384f) vibre sur fond sombre et devient illisible en petit. Le bloc est écrit deux fois — pour le réglage manuel et pour celui du système. CSS ne sait pas partager un bloc entre deux sélecteurs sans les lister tous les deux ; les valeurs, elles, restent au même endroit. ============================================================= */ :root[data-theme="sombre"]{ --ink: #ececec; --ink-2: #a0a0a5; --ink-3: #6e6e73; --page: #171717; /* le fond le plus bas */ --panel: #212121; /* la carte se détache d'un cran */ --surface: #2f2f2f; /* champ ou bouton neutre, un cran de plus */ --surface-2: #3d3d3d; /* survol */ --surface-3: #1c1c1c; /* champ creusé DANS une carte : plus bas qu'elle */ --line: #ffffff14; /* En sombre, le squelette monte au lieu de descendre : il reste plus clair que la carte (#212121) comme que le fond (#171717). */ --sk-base: #2e2e2e; --sk-lueur: #3c3c3c; --solid-bg: #ececec; --solid-ink: #171717; --solid-bg-2: #ffffff; --red: #ff6b73; --blue-ios: #4d9fff; --blue-link: #7cb9ff; --tag-wait-ink: #b9b9c0; --tag-action-bg: #3a2027; --tag-action-ink: #ff8a92; --tag-ok-bg: #142b21; --tag-ok-ink: #5fd39b; --tag-live-bg: #15293d; --tag-live-ink: #7cbaff; --warn-bg: #2b2412; --warn-ink: #e6c169; --danger-bg: #3a2027; --danger-bg-2: #4a2830; --edge: #3a3a3a; --lift: 0 18px 44px -12px #000000cc; --toggle-track: #3a3a3a; --toggle-off: #a0a0a5; --toggle-lift: 0 1px 3px #00000073; } @media (prefers-color-scheme: dark){ :root:not([data-theme="clair"]):not([data-theme="sombre"]){ --ink: #ececec; --ink-2: #a0a0a5; --ink-3: #6e6e73; --page: #171717; --panel: #212121; --surface: #2f2f2f; --surface-2: #3d3d3d; --surface-3: #1c1c1c; --line: #ffffff14; --sk-base: #2e2e2e; --sk-lueur: #3c3c3c; --solid-bg: #ececec; --solid-ink: #171717; --solid-bg-2: #ffffff; --red: #ff6b73; --blue-ios: #4d9fff; --blue-link: #7cb9ff; --tag-wait-ink: #b9b9c0; --tag-action-bg: #3a2027; --tag-action-ink: #ff8a92; --tag-ok-bg: #142b21; --tag-ok-ink: #5fd39b; --tag-live-bg: #15293d; --tag-live-ink: #7cbaff; --warn-bg: #2b2412; --warn-ink: #e6c169; --danger-bg: #3a2027; --danger-bg-2: #4a2830; --edge: #3a3a3a; --lift: 0 18px 44px -12px #000000cc; --toggle-track: #3a3a3a; --toggle-off: #a0a0a5; --toggle-lift: 0 1px 3px #00000073; } } *{ box-sizing:border-box; } /* Les contrôles natifs (curseur de saisie, sélection, ascenseurs) suivent le thème : sans ça, un champ sombre garde un curseur pensé pour le blanc. */ :root[data-theme="sombre"]{ color-scheme:dark; } :root[data-theme="clair"]{ color-scheme:light; } :root:not([data-theme]){ color-scheme:light dark; } body{ margin:0; background:var(--page); color:var(--ink); font-family:'Manrope',sans-serif; -webkit-font-smoothing:antialiased; } /* ============================================================= Deux règles structurantes, dégagées de l'app existante : ce qui FLOTTE porte une ombre, ce qui est POSÉ porte la double bordure. Jamais les deux. ============================================================= */ /* posé sur la page */ .u-set{ background:var(--panel); border-radius:var(--r-panel); outline:var(--edge-w) solid var(--edge); outline-offset:var(--edge-gap); } /* flottant au-dessus */ .u-float{ background:var(--panel); border-radius:var(--r-panel); box-shadow:var(--lift); } /* simple carte, sans l'un ni l'autre */ .u-plain{ background:var(--panel); border-radius:var(--r-panel); } /* --- typographie --- */ .t-title{ font-size:22px; font-weight:800; letter-spacing:-.3px; } .t-head { font-size:15px; font-weight:700; } .t-body { font-size:14px; font-weight:500; line-height:1.45; } .t-label{ font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-2); } .t-muted{ font-size:13px; font-weight:500; color:var(--ink-2); } /* --- boutons --- */ .u-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; font-family:'Manrope',sans-serif; font-size:14px; font-weight:700; padding:10px 16px; border-radius:var(--r-btn); transition:background .12s, transform .1s; } .u-btn:active{ transform:scale(.97); } .u-btn--solid{ background:var(--solid-bg); color:var(--solid-ink); } .u-btn--solid:hover{ background:var(--solid-bg-2); } .u-btn--soft{ background:var(--surface); color:var(--ink); } .u-btn--soft:hover{ background:var(--surface-2); } .u-btn--ghost{ background:none; color:var(--ink-2); } .u-btn--ghost:hover{ background:var(--surface); color:var(--ink); } /* ============================================================= Bascule — la forme du toggle des visuels, partagée Piste grise, pastille blanche à ombre courte. C'est le toggle de la page publication qui donne le ton ; ses valeurs sont reprises ici pour que les autres ne dérivent pas. ============================================================= */ .u-toggle{ display:inline-flex; padding:4px; background:var(--toggle-track); border-radius:var(--r-pill); } .u-toggle button{ border:none; background:transparent; cursor:pointer; padding:9px 22px; border-radius:var(--r-pill); font-family:'Manrope',sans-serif; font-size:14px; font-weight:600; color:var(--toggle-off); white-space:nowrap; transition:color .2s, background .2s, box-shadow .2s; } .u-toggle button[aria-pressed="true"]{ background:var(--panel); color:var(--ink); box-shadow:var(--toggle-lift); } /* Bouton seul qui doit se lire comme une bascule : la pastille blanche, posée sur un anneau de la couleur de la piste. Deux ombres plutôt que deux éléments — l'anneau est une ombre sans flou. */ .u-toggle-solo{ border:none; cursor:pointer; padding:9px 22px; border-radius:var(--r-pill); background:var(--panel); color:var(--ink); font-family:'Manrope',sans-serif; font-size:14px; font-weight:600; white-space:nowrap; box-shadow:var(--toggle-lift), 0 0 0 4px var(--toggle-track); transition:transform .1s; } .u-toggle-solo:active{ transform:scale(.97); } /* --- icônes : trait, jamais plein (style Feather) --- */ .u-icon{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .u-icon--sm{ width:16px; height:16px; } .u-icon--lg{ width:24px; height:24px; } /* --- pastilles d'état --- */ .u-tag{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-pill); font-size:11px; font-weight:700; letter-spacing:.2px; background:var(--tag-bg); color:var(--tag-ink); } .u-tag--action{ background:var(--tag-action-bg); color:var(--tag-action-ink); } /* Gris, pas rouge : le client n'est pas en retard, la publication attend simplement son tour. Le texte est plus soutenu que --ink-2 pour rester lisible sur le gris du fond. */ .u-tag--wait { background:var(--tag-bg); color:var(--tag-wait-ink); } .u-tag--ok { background:var(--tag-ok-bg); color:var(--tag-ok-ink); } .u-tag--live { background:var(--tag-live-bg); color:var(--tag-live-ink); } /* --- champ de saisie riche --- */ .u-field{ width:100%; min-height:56px; background:var(--surface); border-radius:var(--r-field); padding:10px 12px; outline:none; font-family:'Manrope',sans-serif; /* 16px minimum : en dessous, iOS zoome au focus, y compris sur un contenteditable */ font-size:16px; line-height:1.45; white-space:pre-wrap; word-break:break-word; } .u-field:empty::before{ content:attr(data-ph); color:var(--ink-2); pointer-events:none; } .u-field:focus{ box-shadow:inset 0 0 0 2px var(--surface-2); } /* --- barre de navigation haute, commune aux pages --- */ .nav{ display:flex; align-items:center; justify-content:space-between; width:100%; max-width:640px; margin:0 auto; padding:0 4px; } .nav__btn{ width:40px; height:40px; padding:0; border:none; background:transparent; cursor:pointer; color:var(--ink); display:flex; align-items:center; justify-content:center; transition:transform .1s; } .nav__btn:active{ transform:scale(.92); } /* ============================================================= Navigation — deux formes selon la largeur, jamais les deux : · large : barre latérale toujours ouverte (.side) · étroit : burger + tiroir (.nav / .drawer) Le seuil est unique (860px) pour que l'une prenne exactement le relais de l'autre. ============================================================= */ /* Colonnes reprises de la page publication ; l'écart, lui, est plus large. --shell suit l'écart : c'est la somme des trois colonnes plus les deux gouttières. Le laisser à 1128 aurait fait rétrécir la colonne centrale d'exactement ce qu'on ajoute entre les colonnes. */ :root{ --col-side:225px; --col-main:555px; --col-aside:300px; --shell-gap:45px; --shell:calc(var(--col-side) + var(--col-main) + var(--col-aside) + var(--shell-gap) * 2); --nav-bp:860px; --brand-h:36px; } /* ============================================================= Coquille de page — reprend la grille de la page publication : colonne centrale encadrée de deux colonnes de cartes. Les colonnes latérales tombent avant le contenu quand la place manque : ce sont des accompagnements, pas le sujet. ============================================================= */ .shell{ width:100%; max-width:var(--shell); margin:0 auto; } .topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; max-width:var(--shell); margin:0 auto 16px; } /* ============================================================= Youkio — le mot, pas une image Écrit en texte : il reste net à toute taille, suit le thème, et se lit par les lecteurs d'écran. Une image aurait figé sa couleur. La recette d'origine (from-white via-white to-gray-400) est pensée pour un fond noir : telle quelle, le mot disparaîtrait sur le thème clair. Le dégradé part donc de l'encre en clair, du blanc en sombre, et descend vers le gris dans les deux cas. ============================================================= */ /* Le mot est un LIEN vers l'accueil. C'est la convention du web, et sur la page publication c'est ce qui reprend le travail de la flèche retour quand elle s'efface au profit du logo. */ .topbar__brand{ /* Visible partout. En étroit il se pose AU CENTRE, entre le burger et le calendrier : les deux font 40px, donc avec space-between le mot tombe pile au milieu de la barre — sans calcul, et sans cesser de suivre si l'un des deux disparaît. En large, le burger s'efface et le mot prend naturellement la gauche. */ display:block; flex:none; text-decoration:none; font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size:var(--brand-h); font-weight:700; letter-spacing:-.035em; /* tracking-tight */ line-height:1; background-image:linear-gradient(to bottom, #1a1a2e 0%, #1a1a2e 55%, #6b7280 100%); -webkit-background-clip:text; background-clip:text; color:transparent; user-select:none; } :root[data-theme="sombre"] .topbar__brand{ background-image:linear-gradient(to bottom, #fff 0%, #fff 55%, #9ca3af 100%); } @media (prefers-color-scheme: dark){ :root:not([data-theme="clair"]):not([data-theme="sombre"]) .topbar__brand{ background-image:linear-gradient(to bottom, #fff 0%, #fff 55%, #9ca3af 100%); } } .layout3{ display:grid; grid-template-columns:1fr; /* l'écart large est celui ENTRE LES COLONNES ; empilé, 45px de vide entre deux blocs creuserait la page pour rien */ column-gap:var(--shell-gap); row-gap:24px; width:100%; max-width:var(--shell); margin:0 auto; align-items:start; } /* Pages dont le titre est une rangée de la grille : le titre, puis la colonne de droite, puis le contenu. L'admin, qui garde son titre dans la colonne centrale, n'est pas concerné — d'où le :has(). */ .layout3:has(> .hello){ grid-template-areas:'head' 'rail' 'main'; } /* Sans colonne de droite (idées, profil, paramètres), la rangée « rail » n'a pas lieu d'exister : laissée là, elle ajouterait son écart de 24px entre le titre et le contenu. */ .layout3:has(> .hello):not(:has(.rail)){ grid-template-areas:'head' 'main'; } .layout3:has(> .hello) > .hello{ grid-area:head; } .layout3:has(> .hello) > .page{ grid-area:main; } .layout3:has(> .hello) > .rail{ grid-area:rail; } .layout3:has(> .hello) > .side{ grid-area:side; } /* --- le chargement --- Les données viennent de Supabase : entre le premier pixel et la réponse, il y a un aller-retour réseau. Sans rien, la page peint sa coquille vide — une sidebar sans liens, « Bonjour » sans personne. Le squelette occupe cette place : mêmes formes, mêmes tailles, sans le contenu. Rien ne saute quand les vraies valeurs arrivent. Le balayage va du clair au plus clair et revient : c'est un objet en attente, pas une alerte. */ @keyframes sk-balaye{ to{ background-position-x:-200%; } } .sk{ background:linear-gradient(90deg, var(--sk-base) 0%, var(--sk-lueur) 40%, var(--sk-base) 80%); background-size:200% 100%; animation:sk-balaye 1.4s linear infinite; border-radius:999px; color:transparent; /* si un texte traîne dessous, il se tait */ user-select:none; pointer-events:none; } /* Une animation qui ne s'arrête jamais est exactement ce que ce réglage système demande de ne pas faire. */ @media (prefers-reduced-motion:reduce){ .sk{ animation:none; } } .sk-ligne{ display:block; height:10px; margin:3px 0; } .sk-rond{ border-radius:50%; } /* Les lignes n'ont pas toutes la même longueur : un empilement de barres identiques ne ressemble à aucun texte. */ .sk-lien{ height:38px; border-radius:var(--r-field); margin-bottom:4px; } .sk-lien:nth-child(2){ width:82%; } .sk-lien:nth-child(4){ width:74%; } /* Les cartes en attente reprennent le gabarit des vraies — .row, .stat, la carte de publication. C'est tout l'intérêt : quand les données arrivent, elles se posent là où le squelette était, sans rien bousculer. Le fond reste celui du panneau, seul le contenu balaye : c'est la carte qui attend son texte, pas la carte qui n'existe pas encore. */ .sk-bloc{ display:flex; flex-direction:column; gap:14px; } .sk-row{ display:flex; align-items:center; gap:12px; background:var(--panel); border-radius:var(--r-field); padding:10px; } .sk-row__vis{ width:56px; height:56px; flex:none; border-radius:10px; } .sk-row__txt{ flex:1; min-width:0; } /* display:block : sans lui, un reste en ligne et ignore sa hauteur. Il ne tenait que parce que .stats est une grille, qui blockifie ses enfants — une dépendance invisible au parent. */ .sk-stat{ display:block; height:72px; border-radius:var(--r-field); } /* La carte de publication : un grand pavé, à la hauteur du vrai. */ .sk-carte{ background:var(--panel); border-radius:var(--r-panel); padding:18px; } /* Dépôt d'idée : les trois cartes de type, puis le champ. Mêmes mesures que .types / .type / .box (idees.html) — si celles-ci bougent, celles-là doivent suivre. */ .sk-types{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 6px 22px; } .sk-type{ display:block; height:118px; border-radius:16px; } .sk-box{ background:var(--panel); border-radius:var(--r-panel); padding:8px; outline:var(--edge-w) solid var(--edge); outline-offset:var(--edge-gap); margin-bottom:32px; } .sk-champ{ display:block; height:140px; border-radius:var(--r-field); } /* Le bouton « Déposer une idée » : 16px de marge, une pastille de 40, 16px encore — 72 en tout (voir .drop dans dashboard.html). */ .sk-drop{ display:block; height:72px; border-radius:var(--r-panel); } /* --- barre latérale --- POSÉE, comme la carte de publication : double bordure, pas d'ombre. Elle est à côté du contenu, pas au-dessus — lui donner l'ombre des modales la faisait décoller du reste de l'app. */ .side{ display:none; } /* Identité du connecté. La sidebar montrait une photo sans dire qui c'était — le tiroir, lui, l'a toujours nommé. */ .side__who{ display:flex; align-items:center; gap:10px; padding:2px 6px 12px; margin-bottom:6px; border-bottom:1px solid var(--line); } .side__av{ width:36px; height:36px; flex:none; border-radius:50%; object-fit:cover; background:var(--surface); } .side__id{ min-width:0; } .side__nom{ display:block; font-size:13.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .side__maison{ display:block; font-size:11.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Pastille de rappel : ce qui attend l'avis du client */ .side__n{ margin-left:auto; flex:none; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--red); color:var(--panel); font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; } .side__link[aria-current="page"] .side__n, .drawer a[aria-current="page"] .side__n{ background:var(--solid-ink); color:var(--solid-bg); } .drawer .side__n{ margin-left:auto; } .drawer .side__label{ display:inline; } .side__link{ width:100%; height:44px; padding:0 12px; flex:none; border:none; background:none; cursor:pointer; border-radius:var(--r-btn); display:flex; align-items:center; gap:10px; color:var(--ink-2); text-decoration:none; font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:700; transition:background .12s, color .12s; } .side__link:hover{ background:var(--surface); color:var(--ink); } .side__link[aria-current="page"]{ background:var(--solid-bg); color:var(--solid-ink); } .side__spacer{ flex:1; } /* La sortie n'est pas une destination : elle est séparée du reste, en bas, et vire au rouge au survol pour qu'on ne la confonde pas avec un lien. */ .side__sortie{ width:100%; height:44px; padding:0 12px; flex:none; margin-top:6px; border:none; background:none; cursor:pointer; border-radius:var(--r-btn); display:flex; align-items:center; gap:10px; color:var(--ink-2); text-decoration:none; font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:700; border-top:1px solid var(--line); border-radius:0 0 var(--r-btn) var(--r-btn); transition:background .12s, color .12s; } .side__sortie:hover{ background:var(--danger-bg); color:var(--red); } .drawer .side__sortie{ margin-top:10px; } /* Retour à l'admin — même famille que la sortie : on quitte l'écran, on n'y va pas. Mais ce n'est pas un geste risqué, d'où le survol neutre et pas le rouge. */ .side__admin{ width:100%; height:44px; padding:0 12px; flex:none; margin-top:6px; border:none; background:none; cursor:pointer; border-radius:var(--r-btn); display:flex; align-items:center; gap:10px; color:var(--ink-2); text-decoration:none; font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:700; border-top:1px solid var(--line); border-radius:0; transition:background .12s, color .12s; } .side__admin:hover{ background:var(--surface); color:var(--ink); } /* Deux traits collés feraient une double ligne : celui du haut suffit à détacher le bloc du reste. */ .side__admin + .side__sortie{ border-top:none; margin-top:0; } .drawer .side__admin{ margin-top:10px; } .drawer .side__admin + .side__sortie{ margin-top:0; } /* Colonne de droite. Tant que les trois colonnes ne tiennent pas, elle ne disparaît pas : elle se glisse sous le titre. Elle porte des chiffres qu'on ne trouve nulle part ailleurs — les masquer en étroit les rendrait introuvables sur téléphone. L'écart vient du row-gap de la grille, pas d'une marge. */ /* Les deux paliers vont du plus étroit au plus large, et PAS l'inverse : à 1280px les deux media queries s'appliquent, c'est la dernière écrite qui l'emporte. Inversées, le palier 860 (deux colonnes) écrasait le palier 1080 (trois colonnes) et la colonne de droite retombait sous la sidebar. */ /* --- moyen : sidebar + contenu, sans la colonne de droite --- */ @media (min-width:860px){ .side{ display:flex; flex-direction:column; align-items:stretch; position:sticky; top:24px; gap:4px; padding:18px 12px; background:var(--panel); border-radius:var(--r-panel); outline:var(--edge-w) solid var(--edge); outline-offset:var(--edge-gap); } .layout3{ grid-template-columns:var(--col-side) minmax(0,1fr); } .layout3:has(> .hello){ grid-template-areas:'side head' 'side rail' 'side main'; } .layout3:has(> .hello):not(:has(.rail)){ grid-template-areas:'side head' 'side main'; } /* la sidebar remplace le burger : il n'a plus lieu d'être — et le mot, qui était au centre, glisse de lui-même à gauche */ .nav__burger{ display:none; } } /* --- large : les trois colonnes --- */ @media (min-width:1080px){ .layout3:has(.rail){ grid-template-columns:var(--col-side) minmax(0,var(--col-main)) var(--col-aside); } /* En large la colonne de droite retrouve sa place : à droite, sur toute la hauteur, titre compris. */ .layout3:has(> .hello){ grid-template-areas:'side head rail' 'side main rail'; } /* deux colonnes seulement : le contenu prend la place du calendrier absent */ .layout3:has(> .hello):not(:has(.rail)){ grid-template-areas:'side head' 'side main'; } .rail{ margin-top:0; position:sticky; top:24px; } } /* ============================================================= Mini calendrier (colonne de droite) Reprend la grille du calendrier de la page publication, en carte posée. Repliable : semaine en cours seule, ou mois entier. ============================================================= */ .mc{ background:var(--panel); border-radius:var(--r-panel); outline:var(--edge-w) solid var(--edge); outline-offset:var(--edge-gap); padding:14px; } .mc__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding:0 2px; } /* Replié, le calendrier ne montre qu'une semaine : le mois et ses flèches n'ont plus de sens — on ne navigue pas dans un mois qu'on ne voit pas. */ .mc:not(.is-open) .mc__head{ display:none; } .mc__title{ font-size:14px; font-weight:800; text-transform:capitalize; } .mc__nav{ display:flex; gap:4px; } .mc__btn{ width:28px; height:28px; border:none; border-radius:8px; background:var(--surface); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s; } .mc__btn:hover{ background:var(--surface-2); } .mc__dows{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px; } .mc__dows span{ text-align:center; font-size:10px; font-weight:700; letter-spacing:.3px; color:var(--ink-2); padding:3px 0; } .mc__dows span.we{ color:var(--red); } /* Fenêtre du volet : c'est elle qu'on ouvre et ferme. La grille en dessous dessine toujours le mois entier et coulisse dessous. */ .mc__vue{ overflow:hidden; } /* .is-pret : posé après la première mesure. Avant, aucune transition — le volet doit apparaître à sa hauteur, pas s'y rendre. La grille n'anime QUE sa translation : sa hauteur, elle, est la mesure de référence du volet. La faire transiter la rendait mouvante pendant qu'on la mesurait, et le volet se figeait sur une valeur de passage. */ .mc.is-pret .mc__vue{ transition:height .28s cubic-bezier(.4,0,.2,1); } .mc.is-pret .mc__grid{ transition:transform .28s cubic-bezier(.4,0,.2,1); } /* pendant le glissement, le volet colle au doigt : aucune animation */ .mc.is-drag .mc__vue, .mc.is-drag .mc__grid{ transition:none; } .mc__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .mc__d{ position:relative; aspect-ratio:1/1; border:none; background:none; border-radius:9px; font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s; } .mc__d:hover:not(.is-sel){ background:var(--surface); } .mc__d.is-out{ color:var(--ink-3); } .mc__d.is-we{ color:var(--red); } .mc__d.is-today{ box-shadow:inset 0 0 0 1.5px var(--ink); } .mc__d.is-sel{ background:var(--solid-bg); color:var(--solid-ink); box-shadow:none; } /* Une publication ce jour-là. Le point hérite de la couleur du texte : sur un jour sélectionné (fond encre) il passe en blanc tout seul. */ .mc__d[data-post]::after{ content:''; position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%; background:currentColor; } .mc__d.is-out[data-post]::after{ opacity:.45; } /* Poignée du volet. touch-action:none : sans ça, iOS fait défiler la page au lieu de laisser le doigt tirer le volet. */ .mc__foot{ display:flex; align-items:center; justify-content:center; width:100%; margin-top:6px; padding:9px 7px 5px; border:none; border-radius:var(--r-btn); background:none; cursor:ns-resize; touch-action:none; -webkit-user-select:none; user-select:none; transition:background .12s; } .mc__foot:hover{ background:var(--surface); } .mc__grip{ display:block; width:34px; height:4px; border-radius:2px; background:var(--edge); transition:background .12s; } .mc__foot:hover .mc__grip{ background:var(--ink-3); } /* --- tiroir (étroit uniquement) --- */ /* ============================================================= Modale — celle de l'app, pas celle du navigateur alert() et confirm() affichent « youkio-app.netlify.app indique », ne suivent ni le thème ni la police, et bloquent le fil d'exécution. Sur un écran qu'on a peaufiné, elles annoncent qu'on a laissé un bout de brut. Elle porte l'ombre ET la double bordure — le seul élément de l'app dans ce cas. Une modale flotte vraiment (d'où l'ombre), mais elle est aussi la chose qu'on regarde quand tout le reste est éteint : le trait la découpe du voile, qui sinon la laisse fondre dans le noir. ============================================================= */ .modale{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:#00000059; animation:modale-fond .12s ease-out; } .modale[hidden]{ display:none; } @keyframes modale-fond{ from{ opacity:0 } } .modale__boite{ width:100%; max-width:400px; background:var(--panel); color:var(--ink); border-radius:var(--r-panel); box-shadow:var(--lift); outline:var(--edge-w) solid var(--edge); outline-offset:var(--edge-gap); /* L'outline déborde de 6px (2 de trait + 4 d'écart) : sans cette marge, il toucherait le bord de l'écran sur un téléphone. */ margin:6px; padding:22px; font-family:'Manrope',sans-serif; animation:modale-monte .16s cubic-bezier(.2,.8,.3,1); } /* Elle monte de peu : assez pour qu'on la voie arriver, pas assez pour qu'on l'attende. */ @keyframes modale-monte{ from{ opacity:0; transform:translateY(8px) scale(.98) } } @media (prefers-reduced-motion:reduce){ .modale, .modale__boite{ animation:none; } } .modale__mot{ margin:0; font-size:15px; font-weight:600; line-height:1.5; white-space:pre-line; /* les messages portent leurs propres retours */ } .modale__champ{ width:100%; margin-top:14px; border:none; outline:none; background:var(--surface); border-radius:var(--r-field); padding:11px 12px; font-family:'Manrope',sans-serif; /* 16px : en dessous, iOS zoome à la prise de focus */ font-size:16px; font-weight:500; color:var(--ink); } .modale__champ:focus{ box-shadow:inset 0 0 0 2px var(--surface-2); } .modale__pied{ display:flex; justify-content:flex-end; gap:8px; margin-top:20px; } /* Plusieurs actions nommées : elles s'empilent et prennent toute la largeur. Côte à côte, « Lecture seule » et « Avec remarques » se disputeraient la place et finiraient tronqués. « Annuler » reste en bas, à sa place de sortie — d'où l'ordre inversé, le HTML le pose en premier. */ .modale__pied--liste{ flex-direction:column-reverse; align-items:stretch; gap:8px; } .modale__pied--liste .u-btn{ width:100%; } /* Le geste qui détruit ne prend pas la couleur du geste qui valide. */ .modale__boite[data-ton="danger"] .u-btn--solid{ background:var(--red); color:#fff; } .scrim{ position:fixed; inset:0; z-index:90; background:#00000059; } .scrim[hidden]{ display:none; } .drawer{ position:fixed; z-index:100; top:0; left:0; bottom:0; width:min(280px, 82vw); background:var(--panel); padding:16px 12px; box-shadow:var(--lift); } .drawer[hidden]{ display:none; } .drawer__who{ display:flex; align-items:center; gap:10px; padding:8px 8px 16px; margin-bottom:8px; border-bottom:1px solid var(--line); } .drawer__av{ width:38px; height:38px; flex:none; border-radius:50%; object-fit:cover; background:var(--surface); } .dw__nom{ display:block; font-size:15px; font-weight:700; } .dw__maison{ display:block; font-size:13px; font-weight:500; color:var(--ink-2); } .drawer a{ display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:var(--r-btn); text-decoration:none; color:var(--ink); font-size:14px; font-weight:700; } .drawer a:hover{ background:var(--surface); } .drawer a[aria-current="page"]{ background:var(--surface); } /* au-delà du seuil, le tiroir n'existe plus : la sidebar fait le travail. Sans ça, un tiroir laissé ouvert resterait affiché en redimensionnant. */ @media (min-width:860px){ .drawer, .scrim{ display:none !important; } } @media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }