/* ───────────────────────────────────────────────────────────────────────── Socle de style commun, extrait du style de la fiche d'un bâtiment (étape 3 du ménage de la fiche et du classement, 18/10/2026). Chargé sur toutes les pages par base/_feuilles_communes.html.twig, en DERNIER : il l'emporte sur les autres feuilles communes à spécificité égale, comme quand ces règles vivaient dans atelier-batiment.css. Quatre motifs, chacun avec une classe générique et, groupés avec elle, les sélecteurs historiques de la fiche, qui gardent leur spécificité d'origine : .carte-panneau la carte posée sur la page (bord, rayon, fond, ombre du panneau) ; en-tête en carte .contenu__header--fiche (batiment/voir.html.twig, batiment/a_classer.html.twig) ; .pastille-etat l'état « Renseigné / À compléter / À renseigner » (alias : .atelier__onglet-pastille, _rail.html.twig) ; .tuile-choix une tuile de choix à cocher (alias : .atelier-classement__tuile, atelier-classement.js). Aucune couleur écrite en dur ici : tout passe par les variables (base/_variables.css, mode_sombre.css). Restent dans atelier-batiment.css : - le survol des icônes d'action de l'en-tête et l'icône « Supprimer » : déplacés ici, ils perdraient contre batiment.css (.actions_icones a.danger:hover, a.favoris:hover), de même spécificité et chargée après le socle ; - la rubrique ouverte (.atelier--colonne .atelier__panneau--ouvert), qui recopie pourtant la carte panneau : ici, son ombre perdrait contre .atelier--fiche .atelier__panneau { box-shadow: none } de l'atelier ; - le petit texte d'une tuile de précision (ambre foncé, le même dans les deux thèmes, sans variable qui lui corresponde). Les pastilles d'état n'ont plus de règle propre au thème sombre : --etat-* change de valeur dans mode_sombre.css. ───────────────────────────────────────────────────────────────────────── */ /* ─── Carte panneau ─── */ .carte-panneau, .contenu__header--fiche { border-radius: var(--radius-lg, 18px); border: 1px solid var(--panneau-bord); background: var(--panneau-fond); box-shadow: var(--shadow-1); } /* ─── En-tête en carte de la fiche d'un bâtiment ─── */ .contenu__header--fiche { padding: 14px 18px; margin-bottom: 0.75rem; } /* Aligné EXACTEMENT sur le bloc qui suit (partie 11a du 16/10/2026) : l'en-tête générique déborde de 20px de chaque côté pour faire une bande pleine largeur (layout/_contenu-header.css, responsive.css) ; cette carte, elle, a les mêmes bords gauche et droit que le fil d'Ariane et que le bloc des cases et de l'aperçu. Même spécificité renforcée pour l'emporter à toutes les largeurs. */ .contenu__header.contenu__header--fiche { margin: 0 0 0.75rem; width: 100%; box-sizing: border-box; } .contenu__header--fiche .contenu__header__title > .material-symbols-outlined { border-radius: 16px; box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent); } .contenu__header--fiche h1 { margin: 0; } .fiche-entete__pastilles { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0; padding: 0; list-style: none; } .fiche-entete__pastille { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--primary) 8%, transparent); } .contenu__header--fiche .fiche-entete__pastille .material-symbols-outlined.no-style { font-size: 16px; color: var(--primary); width: auto; height: auto; } .fiche-entete__pastille--principale { color: var(--pastille-principale-texte); background: color-mix(in srgb, var(--primary) 12%, transparent); } .contenu__header--fiche .actions_icones { display: flex; gap: 0.5rem; align-items: center; } .contenu__header--fiche .actions_icones > a, .contenu__header--fiche .actions_icones #add_lien { border-radius: 12px; background: color-mix(in srgb, var(--primary) 7%, transparent); transition: background-color 0.15s ease, transform 0.15s ease; } /* ─── Pastille d'état : Renseigné / À compléter / À renseigner ─── Hors du rail en colonne, .atelier__onglet-pastille reste masquée (atelier-batiment.css). */ .pastille-etat, .atelier--colonne .atelier__onglet-pastille { display: inline-flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; align-self: flex-start; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; } .pastille-etat::before, .atelier--colonne .atelier__onglet-pastille::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pastille-etat--ok, .atelier__onglet-pastille--ok { color: var(--etat-ok); background: var(--etat-ok-fond); } .pastille-etat--partiel, .atelier__onglet-pastille--partiel { color: var(--etat-partiel); background: var(--etat-partiel-fond); } .pastille-etat--manque, .atelier__onglet-pastille--manque { color: var(--etat-manque); background: var(--etat-manque-fond); } /* « Facultatif » (rien n'attend la case) et « À renseigner » quand autre chose l'attend (la notice incendie attend le tableau des dégagements) : la paire danger du thème, en rouge. Fiche d'un bâtiment, décision du pilote du 20/10/2026. */ .pastille-etat--neutre, .atelier__onglet-pastille--neutre { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); } .pastille-etat--bloquant, .atelier__onglet-pastille--bloquant { color: var(--danger-color-text); background: var(--danger-bg-color); } /* ─── Pastille de statut .status-badge : « Premium » / « Gratuite » (/mes-notices), catégories et états de l'administration ─── Aucune règle ne la stylait avant le 23/10/2026 (texte gris nu). Même gabarit que les pastilles de l'en-tête de la fiche. */ .status-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; border-radius: 999px; white-space: nowrap; font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--ink); background: color-mix(in srgb, var(--primary) 8%, transparent); } .status-badge.premium, .status-badge.info { color: var(--pastille-principale-texte); background: color-mix(in srgb, var(--primary) 12%, transparent); } .status-badge.success { color: var(--etat-ok); background: var(--etat-ok-fond); } .status-badge.warning { color: var(--etat-partiel); background: var(--etat-partiel-fond); } /* ─── Tuile de choix (type de bâtiment, activité, précision…) ─── */ .tuile-choix, .atelier-classement__tuile { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--panneau-fond); color: var(--ink); text-align: left; cursor: pointer; box-shadow: var(--panneau-ombre); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .tuile-choix small, .atelier-classement__tuile small { color: var(--muted); } .tuile-choix .material-symbols-outlined, .atelier-classement__tuile .material-symbols-outlined { color: var(--primary); font-size: 20px; } .tuile-choix:hover, .tuile-choix:focus-visible, .atelier-classement__tuile:hover, .atelier-classement__tuile:focus-visible { border-color: var(--primary); outline: none; } .tuile-choix[aria-pressed="true"], .atelier-classement__tuile[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--panneau-fond)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent); } /* Variante carrée (carte « Matériaux », public/js/materiaux-parcours.js) : un dessin carré en haut, le libellé dessous, et en coin le rang du choix (le premier choisi donne l'aspect du bâtiment en 3D). Le dessin vit dans components/_materiaux.css. */ .tuile-choix--carre { position: relative; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.35rem; width: 100%; padding: 0.4rem 0.4rem 0.5rem; text-align: center; font: inherit; font-size: 0.78rem; font-weight: 600; line-height: 1.25; } .tuile-choix--carre .tuile-choix__dessin { display: block; width: 100%; aspect-ratio: 1; border-radius: calc(var(--radius) - 6px); overflow: hidden; border: 1px solid var(--border-color); background: var(--bg-color, var(--surface)); } .tuile-choix--carre .tuile-choix__dessin svg { display: block; width: 100%; height: 100%; } .tuile-choix--carre .tuile-choix__dessin .material-symbols-outlined { display: grid; place-items: center; height: 100%; font-size: 32px; color: var(--muted); } .tuile-choix--carre .tuile-choix__libelle { overflow-wrap: anywhere; hyphens: auto; } /* L'explication courte sous le libellé (carte « Matériaux », 18/10/2026). Trois classes : le thème sombre donne « color: inherit » à tout span. */ .tuile-choix.tuile-choix--carre .tuile-choix__aide { color: var(--muted); font-size: 0.7rem; font-weight: 400; line-height: 1.3; } .tuile-choix.tuile-choix--carre[aria-pressed="true"] .tuile-choix__aide { color: var(--ink); } /* Trois classes : le thème sombre donne « color: inherit » à tout span (mode_sombre.css). */ .tuile-choix.tuile-choix--carre .tuile-choix__rang { position: absolute; top: 0.2rem; right: 0.2rem; display: none; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--primary); color: var(--encre-sur-primaire); font-size: 0.72rem; font-weight: 700; box-shadow: var(--panneau-ombre); } .tuile-choix.tuile-choix--carre[aria-pressed="true"] .tuile-choix__rang { display: inline-flex; } .tuile-choix--carre:disabled { cursor: progress; opacity: 0.7; } /* La précision d'une activité, en ambre (son petit texte reste dans atelier-batiment.css). */ .tuile-choix--precision, .atelier-classement__tuile--precision { border-color: color-mix(in srgb, var(--teinte-ambre) 45%, var(--border-color)); } .tuile-choix--precision[aria-pressed="true"], .atelier-classement__tuile--precision[aria-pressed="true"] { border-color: var(--teinte-ambre); background: color-mix(in srgb, var(--teinte-ambre) 14%, var(--surface)); } /* ─── Onglets en pastille : « Tarifs / Mon abonnement / Mes factures » (subscription/_onglets.html.twig) ─── Posés sur un
et non sur