/* * Charte des outils EEIF : compléments aux composants de la charte. * * Ce que composants.css ne couvre pas encore et dont chaque outil a besoin : base de * page, lien d'évitement, en-tête avec navigation et menu du compte, pied de page avec * logo, écran de connexion, alertes, dialogue, chargement htmx, icônes, utilitaires. * Uniquement des tokens de la charte, aucune couleur en dur. À reporter dans la charte une * fois validé. * * Les sélecteurs de base passent par :where() (spécificité nulle) pour ne jamais * l'emporter sur une classe .ei-*. */ /* ---------- Base ---------- */ /* Thème clair seul (décision du 24/09/2026) : même rendu si l'appareil est réglé en sombre. « only » interdit aussi l'assombrissement forcé du navigateur (Chrome sur Android). */ :root { color-scheme: only light; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.ei-app { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :where(.ei-app) :where(h1, h2, h3, h4) { margin: 0; } :where(.ei-app) p { margin: 0 0 var(--espace-3); } :where(.ei-app) p:last-child { margin-bottom: 0; } :where(.ei-app) :where(ul, ol) { margin: 0 0 var(--espace-3); padding-left: var(--espace-6); } :where(.ei-app) :where(img, svg) { max-width: 100%; } :where(.ei-app) :where(button, input, select, textarea) { font: inherit; } /* Liens de texte : bleu souligné. Les liens portant une classe (boutons…) gardent leur style. */ :where(.ei-app) a:not([class]), .ei-link { color: var(--bleu-eeif); text-decoration: underline; text-underline-offset: 2px; } :where(.ei-app) a:not([class]):hover, .ei-link:hover { color: var(--bleu-profond); } /* Focus clavier sur tout élément interactif (règle de la charte). */ :where(.ei-app) :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } :where(.ei-app) code { font: var(--text-code); background: var(--surface-creuse); border-radius: var(--rayon-xs); padding: 1px 5px; } /* ---------- Page ---------- */ .ei-lien-evitement { position: absolute; left: var(--espace-2); top: -100px; z-index: 100; padding: var(--espace-2) var(--espace-4); border-radius: var(--rayon-md); background: var(--surface); color: var(--bleu-eeif); font: var(--text-bouton); text-decoration: none; box-shadow: var(--ombre-flottante); } .ei-lien-evitement:focus { top: var(--espace-2); } /* Zones sûres de l'iPhone (encoche, coins, barre d'accueil) : la page couvre tout l'écran (viewport-fit=cover, x-ei.page), et l'en-tête, le contenu et le pied s'en écartent. */ .ei-page { flex: 1; width: 100%; max-width: 920px; margin: 0 auto; padding: var(--espace-7) max(var(--espace-5), env(safe-area-inset-right)) var(--espace-8) max(var(--espace-5), env(safe-area-inset-left)); display: flex; flex-direction: column; gap: var(--espace-6); } .ei-page--pleine { max-width: none; } .ei-page--centre { justify-content: center; } /* Titre de page (un seul par écran) et chapeau. Sur téléphone, un titre plus petit que celui de la charte (1,9 rem) : il tient sur une ligne et laisse la place au contenu. */ .ei-page > .titre-page { color: var(--encre); } .ei-chapeau { color: var(--encre-douce); max-width: 40rem; } @media (max-width: 600px) { .titre-page { font-size: 1.6rem; } } /* Dans une section, un écart régulier entre les blocs qui se suivent (rangées de boutons, encadré puis alertes…). Rien juste après le titre, qui a déjà sa marge ; :where() garde la spécificité basse pour laisser gagner les marges de la charte (h3…). */ .ei-section > :where(:not(h2)) + :where(*) { margin-top: var(--espace-3); } /* Titre bleu souligné d'orange, hors d'une section (titre de dialogue…). */ .ei-titre-souligne { display: inline-block; align-self: flex-start; margin: 0 0 var(--espace-3); padding-bottom: var(--espace-1); border-bottom: 3px solid var(--orange-eeif); color: var(--bleu-eeif); font: var(--text-titre-section); } /* ---------- En-tête : lien d'accueil, navigation, menu du compte ---------- */ /* Même hauteur connecté ou non (règle de la charte) : celle de la barre avec la pastille du compte. */ .ei-header { position: relative; z-index: 10; flex-wrap: wrap; min-height: 62px; padding-inline: max(var(--espace-5), env(safe-area-inset-left)) max(var(--espace-5), env(safe-area-inset-right)); } /* En-tête clair (écart avec la charte, décision du 24/09/2026) : fond blanc, trait fin, marque en bleu EEIF, à la place de la barre bleue `en-tete`. */ .ei-header { background: var(--surface); color: var(--bleu-eeif); border-bottom: 1px solid var(--trait); } .ei-header__marque { min-width: 0; color: inherit; text-decoration: none; white-space: nowrap; } .ei-header__outil { overflow: hidden; text-overflow: ellipsis; } .ei-header .ei-menu > summary:hover, .ei-header .ei-menu[open] > summary { background: var(--bleu-doux); } .ei-header__nav { display: flex; flex-wrap: wrap; gap: var(--espace-4); margin-right: auto; margin-left: var(--espace-4); } .ei-header__nav a { color: var(--encre); font: var(--text-bouton); text-decoration: none; white-space: nowrap; padding: var(--espace-1) 0; border-bottom: 2px solid transparent; } .ei-header__nav a:hover, .ei-header__nav a[aria-current="page"] { border-bottom-color: var(--orange-eeif); color: var(--bleu-eeif); } .ei-menu { position: relative; } .ei-menu > summary { display: flex; align-items: center; gap: var(--espace-2); list-style: none; cursor: pointer; padding: var(--espace-1) var(--espace-2); border-radius: var(--rayon-md); } .ei-menu > summary::-webkit-details-marker { display: none; } .ei-menu__panneau { position: absolute; right: 0; top: calc(100% + var(--espace-2)); z-index: 20; min-width: 240px; display: flex; flex-direction: column; gap: var(--espace-1); padding: var(--espace-2); border: 1px solid var(--trait); border-radius: var(--rayon-lg); background: var(--surface); color: var(--encre); box-shadow: var(--ombre-flottante); } .ei-menu__identite { margin: 0; padding: var(--espace-2) var(--espace-3) var(--espace-3); border-bottom: 1px solid var(--trait); font: var(--text-corps-petit); color: var(--encre-douce); overflow-wrap: anywhere; } .ei-menu__identite strong { display: block; color: var(--encre); font-weight: 600; } .ei-menu__panneau form { margin: 0; } .ei-menu__item { display: block; width: 100%; padding: var(--espace-2) var(--espace-3); border: 0; border-radius: var(--rayon-md); background: none; color: var(--encre); font: var(--text-corps-petit); text-align: left; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .ei-menu__item:hover { background: var(--bleu-doux); color: var(--bleu-eeif); } .ei-menu__panneau :focus-visible { outline-color: var(--focus); } @media (max-width: 480px) { .ei-header__nom { display: none; } /* Le panneau du sélecteur s'aligne sur le bord droit de l'en-tête, pas sur son bouton. */ .ei-header__droite { position: relative; } .ei-header__droite > .ei-outils { position: static; } } /* Côté droit de l'en-tête : sélecteur d'outils puis compte. */ .ei-header__droite { display: flex; align-items: center; gap: var(--espace-2); margin-left: auto; } /* Photo de la personne (Passeport EI), à la place des initiales. */ .ei-header__photo { display: block; width: 30px; height: 30px; border-radius: var(--rayon-pilule); object-fit: cover; background: var(--surface); } /* Sélecteur d'outils (grille de neuf points) : les outils ouverts au compte. */ .ei-outils__bouton { width: 40px; height: 40px; justify-content: center; padding: 0; color: var(--bleu-eeif); } .ei-outils__bouton:hover, .ei-outils[open] > .ei-outils__bouton { background: var(--bleu-doux); } .ei-outils__panneau { width: min(344px, calc(100vw - 2 * var(--espace-4))); padding: var(--espace-4); gap: var(--espace-3); } .ei-outils__titre { margin: 0; color: var(--bleu-eeif); font: var(--text-titre-bloc); } .ei-outils__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-2); margin: 0; padding: 0; list-style: none; } .ei-outils__item { display: flex; flex-direction: column; align-items: center; gap: var(--espace-2); padding: var(--espace-3) var(--espace-1); border-radius: var(--rayon-md); min-width: 0; color: var(--encre); font: var(--text-etiquette); text-align: center; text-decoration: none; } .ei-outils__item > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ei-outils__item:hover, .ei-outils__item[aria-current="page"] { background: var(--bleu-doux); color: var(--bleu-eeif); } .ei-outils__logo { display: block; width: 40px; height: 40px; padding: 2px; border-radius: var(--rayon-md); object-fit: contain; background: var(--fond-logo); } .ei-outils__logo--lettre { display: grid; place-items: center; background: var(--bleu-eeif); color: var(--sur-bleu); font: var(--text-titre-bloc); } .ei-outils__hub { border-top: 1px solid var(--trait); border-radius: 0; padding-top: var(--espace-3); } /* ---------- Pied de page et logo ---------- */ .ei-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--espace-3); padding: var(--espace-3) max(var(--espace-5), env(safe-area-inset-right)) calc(var(--espace-3) + env(safe-area-inset-bottom)) max(var(--espace-5), env(safe-area-inset-left)); border-top: 1px solid var(--trait); color: var(--encre-douce); font: var(--text-corps-petit); text-align: center; } .ei-pied p { margin: 0; } /* Pied replié : une seule ligne, le logo à 48 px (le minimum de la charte). Il ne doit jamais faire défiler une page simple ; sinon, son contenu passe dans un menu (x-ei.page sans-pied). */ .ei-pied .ei-logo img { height: 48px; } @media (max-width: 600px) { .ei-pied { gap: var(--espace-2); padding-top: var(--espace-2); padding-bottom: calc(var(--espace-2) + env(safe-area-inset-bottom)); } } /* Logo officiel (x-ei.logo) : SVG transparents, en couleur sur fond clair. */ .ei-logo { display: inline-flex; flex-shrink: 0; line-height: 0; } .ei-logo img { display: block; width: auto; height: 64px; } .ei-logo--grand img { height: 120px; } /* ---------- Écran de connexion et écrans simples ---------- */ /* Connexion, code, mot de passe, déconnexion, erreur : un écran qui tient sans défiler sur un téléphone. Texte à gauche (on ne centre jamais un paragraphe de plusieurs lignes), champs sur toute la largeur. Sur ordinateur, une carte centrée ; sur téléphone, sans cadre (plus bas). */ .ei-connexion { width: 100%; max-width: 30rem; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--espace-4); text-align: left; } /* L'écart vient du gap : pas de marge en plus (ni celle des paragraphes, ni celle des sections). */ .ei-connexion > * { margin-top: 0; margin-bottom: 0; } /* Logo (x-ei.logo ou image de l'outil), bouton isolé et lien d'action gardent leur largeur, à gauche. */ .ei-connexion > :where(.ei-logo, img, .ei-btn, .ei-passeport, .ei-lien-action) { align-self: flex-start; } .ei-connexion .titre-page { color: var(--encre); } .ei-connexion .ei-field { max-width: none; } .ei-passeport { justify-content: center; text-decoration: none; text-wrap: balance; } /* L'emblème EEIF à côté du libellé, à la place de la pastille « EI » de la charte. */ .ei-passeport__logo { display: block; flex-shrink: 0; width: auto; height: 28px; } /* Sur téléphone, un bouton un peu plus serré pour que le libellé tienne sur une ligne jusqu'à 360 px de large (321 px nécessaires aux mesures de la charte), et encore plus serré sous 400 px, pour qu'il y tienne aussi avec un texte agrandi (125 % à 375 px). */ @media (max-width: 600px) { .ei-passeport { gap: var(--espace-2); padding-inline: var(--espace-3); font-size: 0.875rem; } } @media (max-width: 400px) { .ei-passeport { gap: 6px; padding-inline: 10px; font-size: 0.8125rem; } .ei-passeport__logo { height: 24px; } } /* Téléphone : l'écran simple commence en haut, sans carte (le fond de page suffit, pas de double marge), avec un titre de 1,5 rem et le bouton principal sur toute la largeur. */ @media (max-width: 600px) { .ei-page--centre { justify-content: flex-start; padding-top: var(--espace-5); padding-bottom: var(--espace-6); } .ei-section.ei-connexion { padding: 0; border: 0; border-radius: 0; background: none; } .ei-connexion .titre-page { font-size: 1.5rem; } .ei-connexion .ei-logo--grand img { height: 80px; } .ei-connexion :where(.ei-btn--primaire, .ei-passeport) { align-self: stretch; width: 100%; } } /* Passeport EI pas encore ouvert pour l'outil : bouton désactivé, expliqué dessous. */ .ei-passeport[disabled] { opacity: 0.5; cursor: not-allowed; } .ei-passeport[disabled]:hover { background: var(--surface); } /* ---------- Alertes (bandeaux de message) ---------- */ .ei-alerte { display: flex; align-items: flex-start; gap: var(--espace-2); width: 100%; padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-md); font: var(--text-corps-petit); font-weight: 600; } .ei-alerte p { margin: 0; } .ei-alerte--info { background: var(--bleu-doux); color: var(--bleu-eeif); } .ei-alerte--succes { background: var(--succes-doux); color: var(--succes); } .ei-alerte--danger { background: var(--danger-doux); color: var(--danger); } /* ---------- Dialogue (fenêtre modale, natif) ---------- */ .ei-dialog { width: min(100% - 2 * var(--espace-4), 36rem); max-height: 90vh; max-height: 90dvh; padding: 0; border: 1px solid var(--trait); border-radius: var(--rayon-lg); background: var(--surface); color: var(--encre); box-shadow: var(--ombre-flottante); overflow-y: auto; } .ei-dialog::backdrop { background: rgb(0 0 0 / 0.55); } html:has(.ei-dialog:modal) { overflow: hidden; } /* Sans JavaScript, le serveur l'ouvre dans la page : il ne flotte plus, donc pas d'ombre. */ .ei-dialog:not(:modal) { position: relative; margin: 0 auto; max-height: none; box-shadow: none; } .ei-dialog > form { margin: 0; } .ei-dialog__fermer { position: absolute; top: var(--espace-3); right: var(--espace-3); z-index: 2; } .ei-dialog__corps { display: flex; flex-direction: column; gap: var(--espace-4); padding: var(--espace-7); } /* Le premier élément (titre long…) ne passe jamais sous le bouton Fermer. */ .ei-dialog__corps > :first-child { margin-right: 44px; } @media (max-width: 600px) { .ei-dialog__corps { padding: var(--espace-5) 18px; } } /* Bouton d'icône seule (toujours avec aria-label). */ .ei-bouton-icone { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--trait-fort); border-radius: var(--rayon-md); background: var(--surface); color: var(--encre-douce); cursor: pointer; } .ei-bouton-icone:hover { background: var(--bleu-doux); color: var(--bleu-eeif); } /* ---------- Chargement pendant une requête htmx ---------- */ .ei-chargement { display: none; align-items: center; gap: var(--espace-2); } .htmx-request .ei-pret, .htmx-request.ei-pret { display: none; } .htmx-request .ei-chargement, .htmx-request.ei-chargement { display: inline-flex; } .ei-pret { display: inline-flex; align-items: center; gap: var(--espace-2); } .ei-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--rayon-pilule); animation: ei-tourne 0.8s linear infinite; } @keyframes ei-tourne { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ei-spinner { animation-duration: 2.4s; } } /* ---------- Icônes (SVG trait, 20 px, couleur héritée du texte) ---------- */ .ei-icone { width: 20px; height: 20px; flex-shrink: 0; } .ei-icone--petite { width: 16px; height: 16px; } /* ---------- Formulaires ---------- */ .ei-field .ei-input, .ei-field .ei-select { width: 100%; } .ei-field--large { max-width: none; } /* Groupe de cases ou de boutons radio (
, ) : sans le cadre ni les marges du navigateur. */ fieldset.ei-field { min-width: 0; margin: 0; padding: 0; border: 0; } fieldset.ei-field > legend { padding: 0; margin-bottom: var(--espace-1); } textarea.ei-input { min-height: 6rem; resize: vertical; } /* ---------- Filtres d'une liste (x-ei.filtres) ---------- */ /* Grille régulière, libellés sur une ligne (les champs s'alignent), recherche sur deux colonnes, « Du » et « Au » côte à côte, actions sur une ligne à la fin, à droite. */ .ei-filtres { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); align-items: start; gap: var(--espace-3) var(--espace-4); margin: 0; padding: var(--espace-4); border: 1px solid var(--trait); border-radius: var(--rayon-lg); background: var(--surface); } .ei-filtres .ei-field { min-width: 0; max-width: none; } .ei-filtres .ei-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Une date entière dans une demi-colonne de téléphone. */ .ei-filtres input[type="date"] { padding-inline: var(--espace-2); } .ei-filtres > .ei-field:first-child { grid-column: span 2; } .ei-filtres__periode { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-4); } .ei-filtres__actions { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--espace-2); } @media (max-width: 600px) { .ei-filtres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-3); padding: var(--espace-3); } .ei-filtres > .ei-field:first-child, .ei-filtres__periode { grid-column: 1 / -1; } .ei-filtres__periode { gap: var(--espace-3); } } /* ---------- Boutons : tailles ---------- */ /* Un libellé de bouton tient sur une ligne : 1 à 3 mots. Seule exception, un écran très étroit pour la taille du texte (grand texte sur petit téléphone) : il passe à la ligne sans déborder. */ .ei-btn { justify-content: center; white-space: nowrap; } @media (max-width: 20em) { .ei-btn { white-space: normal; } } .ei-btn--bloc { width: 100%; } .ei-btn--grand { padding: 14px var(--espace-6); font-size: 1.05rem; } /* ---------- Tableaux ---------- */ /* Le tableau défile seul : un texte masqué (ei-sr-only, en position absolue) y reste aussi, au lieu de faire déborder la page. */ .ei-table-wrap { position: relative; } /* En-têtes de colonnes sur une ligne : un intitulé court, jamais coupé en deux. */ .ei-table th { white-space: nowrap; } .ei-table .ei-nombre { text-align: right; font-variant-numeric: tabular-nums; } /* ---------- Utilitaires ---------- */ .ei-pile { display: flex; flex-direction: column; gap: var(--espace-4); } .ei-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); } .ei-texte-doux { color: var(--encre-douce); } /* Action secondaire en lien de texte (« Retour à la connexion », « Renvoyer un code ») : sous le bouton principal, à la place d'un second bouton. Un ou un