/* ============================================================ Loi lisible — « Mes textes », la page personnelle Feuille séparée, comme bibliotheque.css : cet écran est une partie à part du site. Aucun token défini ici, uniquement ceux de style.css. Si ce fichier disparaît, le reste est intact. C'est le troisième écran de la page : accueil, lecture, mes textes. Il reprend la largeur et les marges de l'accueil pour que le passage de l'un à l'autre ne déplace rien. ============================================================ */ .ecran-textes { max-width: 1180px; margin: 0 auto; padding: 0 20px 90px; } /* ---------- L'entrée dans l'en-tête ---------- ELLE RESTE VISIBLE PENDANT LA LECTURE, et c'est le troisième cran de repli de l'en-tête qui le permet. `.entete__interieur` est plafonnée à 1 180 px, donc la largeur utile ne dépasse jamais 1 140 px, quelle que soit la fenêtre : « Mes textes » en toutes lettres pèse environ 130 px, et sans ce cran elle repliait les six commandes derrière « Menu » à TOUTES les largeurs, 1 600 px compris. Mesuré. En effaçant d'abord la signature puis le nom de l'app (voir ajusterEntete dans js/app.js), l'en-tête garde ses commandes en ligne dès 1 000 px. */ /* ---------- Tête de page ---------- */ .ecran-textes__haut { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 54px 0 18px; } .ecran-textes__titre { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); } /* LA CROIX DE FERMETURE. Elle reprend `.panneau__fermer`, la meme fabrique que les sept panneaux : meme taille, meme cible tactile, meme place en haut a droite. Une croix qui ne serait pas au meme pixel qu'ailleurs obligerait a la chercher. `align-self` la remet sur la ligne du titre : en `baseline`, un bouton a bordure s'aligne sur le texte de son libelle et remonte. */ .ecran-textes__haut .panneau__fermer { align-self: center; flex: 0 0 auto; } /* ---------- Ce qu'on a garde dans un texte ---------- Replie par defaut : la liste doit rester une liste de TEXTES. Deplie, il donne la note libre et les passages notes, sans avoir a rouvrir le texte. */ .mes-textes__gardes { margin-top: 10px; } .mes-textes__gardes-tete { font-family: var(--font-ui); font-size: .86rem; font-weight: 700; color: var(--accent-fonce); cursor: pointer; list-style: none; padding: 6px 2px; /* Cible tactile : un resume d'une seule ligne descend sous 44 px. */ min-height: 44px; display: flex; align-items: center; gap: .4em; } .mes-textes__gardes-tete::-webkit-details-marker { display: none; } /* LE CHEVRON PORTE L'ETAT, PAS LA COULEUR SEULE (WCAG 1.4.1) : il tourne d'un quart de tour, ce qui se voit en niveaux de gris. */ .mes-textes__gardes-tete::before { content: '▸'; display: inline-block; transition: transform .15s ease; } .mes-textes__gardes[open] .mes-textes__gardes-tete::before { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .mes-textes__gardes-tete::before { transition: none; } } .mes-textes__gardes-corps { border-left: 2px solid var(--line-fort); padding: 2px 0 2px 12px; margin: 2px 0 4px 4px; } .mes-textes__note-titre { font-family: var(--font-ui); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin: 6px 0 2px; } .mes-textes__note-texte { margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font-size: .95rem; line-height: 1.5; } .mes-textes__passages { list-style: none; margin: 0; padding: 0; } /* Un passage est un bouton qui se lit comme du texte : c'est une citation du texte de loi, pas une pilule de commande. */ .mes-textes__passage { display: flex; gap: .6em; align-items: baseline; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: var(--radius-sm); padding: 7px 6px; margin: 0 -6px; cursor: pointer; min-height: 44px; } .mes-textes__passage:hover { background: var(--surface-2); } .mes-textes__passage-l { flex: 0 0 auto; color: var(--accent-fonce); font-weight: 700; font-family: var(--font-ui); font-size: .82rem; } /* Trois lignes au plus : une note peut porter un alinea entier, et vingt notes deplieraient la page sur des ecrans. Le texte complet reste dans le texte, c'est la ou on va en cliquant. */ .mes-textes__passage-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mes-textes__reste { margin: 4px 0 0; font-size: .86rem; color: var(--ink-faint); } /* ---------- Ce qu'on doit dire, et qu'on dit une fois ---------- Le stockage d'un navigateur n'est pas durable. La phrase est un argument de l'outil, pas un avertissement en petit : elle a la taille du texte courant et se lit avant la liste. */ .ecran-textes__franchise { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 30px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); font-size: .95rem; line-height: 1.6; max-width: 78ch; } /* Le pictogramme ne rétrécit pas et ne devient pas une colonne de texte : le sceau de l'accueil avait ce défaut, la phrase s'y coupait en trois. */ .ecran-textes__franchise-signe { flex: 0 0 auto; opacity: .8; margin-top: 2px; } .ecran-textes__franchise-signe .ico { width: calc(9 * var(--px)); height: calc(9 * var(--px)); } /* ---------- La liste ---------- Une colonne, pas un rail. La bibliothèque met ses textes épinglés en rail parce qu'ils sont nombreux et qu'ils ne bougent pas ; ici la liste appartient à la personne et doit se lire d'un coup, sans geste horizontal. */ .mes-textes__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } /* `flex-start` et non `center` : la fiche a grandi, elle porte maintenant le detail deplie de ce qu'on a garde. Centres, « Reprendre » et la corbeille descendaient au milieu d'une liste de passages, loin du titre auquel ils se rapportent. */ .mes-textes__ligne { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } /* Le corps prend la place restante et PEUT rétrécir : sans `min-width: 0`, un titre sans espace (un identifiant Légifrance collé) pousse le bouton hors du cadre au lieu de se couper. */ .mes-textes__corps { flex: 1 1 240px; min-width: 0; } /* Le titre d'un texte de loi fait souvent plus de deux lignes. On le coupe à deux, ellipse visible, et le titre entier reste dans le `title` et dans le nom accessible du bouton. */ .mes-textes__titre { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* CE QUE LE TEXTE EST, entre son titre et ses comptes. Pastille discrete : elle qualifie le texte, elle ne l'annonce pas. Le filet plein la distingue des metadonnees, qui n'ont pas de cadre. TROIS ALLURES POUR TROIS NATURES DE FAIT. Le mot du document est en petites capitales, comme sur la page de garde dont il vient. Ce qui n'est PAS un mot du document, la correction manuelle et l'enveloppe absente, reste en casse ordinaire : on ne fait pas passer une phrase de l'app pour une citation. */ .mes-textes__nature { display: inline-block; margin: 0 0 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); } .mes-textes__nature[data-nature="force"], .mes-textes__nature[data-nature="sans"] { text-transform: none; letter-spacing: 0; font-weight: 500; font-style: italic; color: var(--ink-faint); } .mes-textes__meta { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.5; overflow-wrap: anywhere; } /* Le bouton ne rétrécit jamais et son libellé ne passe pas sur deux lignes : c'est la règle du débordement, le texte cède avant la commande. */ .mes-textes__reprendre { flex: 0 0 auto; } /* ---------- Rien pour l'instant ---------- Pas de reproche, pas d'injonction. On montre le pictogramme EN GRAND : c'est le seul endroit où on peut l'expliquer sans encombrer l'en-tête. */ .ecran-textes__vide { padding: 30px 0 0; max-width: 64ch; } .ecran-textes__vide-titre { margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; color: var(--ink); } .ecran-textes__vide-texte { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; } /* Le pictogramme est posé DANS la phrase, à la place où on le cherchera ensuite dans la barre du haut. Le carré rouge est celui de la charte. */ .ecran-textes__vide-ico { display: inline-grid; place-items: center; vertical-align: -5px; width: calc(13 * var(--px)); height: calc(13 * var(--px)); border-radius: var(--radius-sm); background: var(--accent); color: var(--sur-accent); } .ecran-textes__vide-ico .ico { width: calc(8 * var(--px)); height: calc(8 * var(--px)); } /* ---------- Téléphone ---------- Sous 520 px, le bouton passe sous le texte et prend toute la largeur : à côté, il ne laissait plus que 120 px au titre. */ @media (max-width: 520px) { .ecran-textes__haut { padding-top: 32px; } .ecran-textes__titre { font-size: 1.6rem; } .mes-textes__ligne { gap: 12px; } .mes-textes__reprendre { flex: 1 1 100%; justify-content: center; } } /* ---------- Le pied de page n'appartient pas à cette page ---------- « Mes textes » se pose PAR-DESSUS le site : c'est un espace personnel, pas une rubrique. Licence, sources et mentions ont leur place sur l'accueil et sous un texte de loi, pas sous une liste privée. */ body[data-ecran="textes"] .pied-site { display: none; } /* ---------- Exporter, importer ---------- Posés SOUS le bandeau de franchise, qui vient de dire pourquoi ils existent. La phrase et les boutons se lisent d'affilée. */ .ecran-textes__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; } /* Un