/* ========================================================================== MP-PORTAGE — feuille de style du template Webmind, septembre 2026 · version 0.9.55 Aucun framework CSS. Le « socle Joomla » (section 4) réimplémente uniquement les classes que le cœur de Joomla et ses composants émettent réellement, afin de se passer entièrement de Bootstrap. Sommaire 1. Jetons 2. Réinitialisation 3. Typographie 4. Socle Joomla 5. Boutons 6. Chrome — en-tête, navigation, pied 7. Héros et fiche signalétique 8. Bandes et sections 9. Motifs de contenu 10. Articles — listes et détail 11. Pages éditoriales 12. Espace métier — neutralisation 13. Vues du cœur de Joomla 14. Adaptatif 15. Impression ========================================================================== */ /* ------------------------------------------------------------------ 1. Jetons Les quatre premières valeurs sont surchargées en ligne par index.php depuis les paramètres du style de template. Ne pas les figer ailleurs. */ :root{ --encre:#101B33; --encre-2:#1E3050; --encre-3:#2C4569; --acier:#5A6B85; --rouge:#C62828; --rouge-fonce:#9E1F1F; --papier:#F5F6F8; --papier-2:#EDF0F4; --blanc:#FFFFFF; --trait:#D8DEE7; --trait-fort:#B9C3D1; --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif; --serif:"Source Serif 4",Georgia,"Times New Roman",serif; --gouttiere:24px; --largeur:1200px; /* surchargée en ligne par index.php */ --largeur-lecture:860px; --section-y:clamp(56px,6vw,96px); --rayon:2px; --entete-h:82px; } /* --------------------------------------------------------- 2. Réinitialisation */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--papier); color:var(--encre); font-family:var(--sans); font-size:17px; line-height:1.55; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; overflow-x:clip; /* sur body, jamais sur html : iOS et l'en-tête collant */ } img,svg,video{ max-width:100%; height:auto; display:block; } a{ color:inherit; } button{ font:inherit; } :focus-visible{ outline:3px solid var(--rouge); outline-offset:3px; } .saut-contenu{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--rouge); color:#fff; padding:12px 20px; font-weight:600; text-decoration:none; } .saut-contenu:focus{ left:12px; top:12px; } .wrap{ max-width:var(--largeur); margin:0 auto; padding-inline:var(--gouttiere); } .visually-hidden,.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* ---------------------------------------------------------- 3. Typographie */ h1,h2,h3,h4,h5,h6{ margin:0; text-wrap:balance; font-weight:600; letter-spacing:-0.02em; } h1{ font-size:clamp(2.1rem,4.4vw,3.1rem); line-height:1.08; letter-spacing:-0.026em; } h2{ font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.16; } h3{ font-size:1.16rem; line-height:1.32; letter-spacing:-0.012em; } h4{ font-size:1rem; line-height:1.35; } .display{ font-size:clamp(2.35rem,5.2vw,3.9rem); line-height:1.05; letter-spacing:-0.028em; } p{ margin:0 0 1.05em; } p:last-child{ margin-bottom:0; } /* Le serif porte la lecture, le sans porte la structure. Règle stricte. */ .prose, .zone-composant .com-content-article__body, .zone-composant .com-content-category-blog__item p{ font-family:var(--serif); font-size:1.075rem; line-height:1.74; color:#243350; } .prose p,.zone-composant .com-content-article__body p{ max-width:68ch; } .prose ul,.prose ol{ margin:0 0 1.2em; padding-left:1.3em; max-width:66ch; } .prose li{ margin-bottom:.5em; } .prose strong{ font-weight:600; color:var(--encre); } /* Exclure les boutons : .prose a vaut (0,2,0) et écraserait .btn-primaire en (0,1,0), ce qui donnait un texte rouge sur fond rouge, invisible. */ .prose a:not(.btn){ color:var(--rouge); text-underline-offset:.18em; text-decoration-thickness:1px; } .prose a.btn{ text-decoration:none; } .prose h2,.prose h3{ font-family:var(--sans); } .prose h2{ margin:2.2em 0 .7em; } .prose h3{ margin:2em 0 .6em; font-size:1.1rem; } .prose > :first-child{ margin-top:0; } .lede{ font-family:var(--serif); font-size:1.04rem; line-height:1.68; color:var(--acier); max-width:52ch; margin:0; } /* -------------------------------------------------------- 4. Socle Joomla Réimplémentation minimale des classes émises par le cœur de Joomla, ses composants et ses modules. Toute classe rencontrée en recette et absente d'ici doit être ajoutée ici, pas corrigée au cas par cas. */ /* Grille */ .row{ display:flex; flex-wrap:wrap; margin-inline:-12px; } .row > *{ padding-inline:12px; width:100%; } .col,.col-auto{ flex:1 0 0%; width:auto; } .col-12,.col-md-12,.col-lg-12{ width:100%; } .col-6,.col-md-6{ width:50%; } .col-4,.col-md-4{ width:33.3333%; } .col-3,.col-md-3{ width:25%; } .col-8,.col-md-8{ width:66.6667%; } .col-9,.col-md-9{ width:75%; } @media (max-width:768px){ .col-md-6,.col-md-4,.col-md-3,.col-md-8,.col-md-9,.col-6,.col-4,.col-3{ width:100%; } } .container,.container-fluid{ width:100%; } /* État replié. Le socle remplaçait le CSS de Bootstrap sans reprendre cette règle : un bloc marqué .collapse restait visible en permanence, quel que soit l'état annoncé par son déclencheur. On accepte les deux écritures de l'état ouvert. com_timesheets porte des classes de Bootstrap 2 sur son panneau — « collapse out » — tout en posant des attributs de Bootstrap 5 sur son bouton : migration inachevée dont il ne faut pas faire les frais ici. */ .collapse:not(.show):not(.in){ display:none; } .collapse.show, .collapse.in{ display:block; } .collapsing{ overflow:hidden; } .d-flex{ display:flex; } .d-none{ display:none; } .d-block{ display:block; } .align-items-center{ align-items:center; } .justify-content-between{ justify-content:space-between; } .flex-wrap{ flex-wrap:wrap; } .gap-2{ gap:8px; } .gap-3{ gap:16px; } .text-center{ text-align:center; } .text-end{ text-align:right; } .mb-0{ margin-bottom:0; } .mb-2{ margin-bottom:8px; } .mb-3{ margin-bottom:16px; } .mb-4{ margin-bottom:24px; } .mt-2{ margin-top:8px; } .mt-3{ margin-top:16px; } .mt-4{ margin-top:24px; } .w-100{ width:100%; } /* Messages système */ .alert{ border:1px solid var(--trait); border-left:3px solid var(--acier); background:var(--blanc); padding:16px 20px; margin-bottom:22px; border-radius:var(--rayon); font-size:.98rem; } .alert-success{ border-left-color:#1E7A45; } .alert-info{ border-left-color:var(--encre-2); } .alert-warning{ border-left-color:#B26A00; } .alert-danger,.alert-error{ border-left-color:var(--rouge); } .alert-heading{ font-weight:600; margin-bottom:6px; } .joomla-alert--close,.btn-close{ background:none; border:0; cursor:pointer; font-size:1.2rem; color:var(--acier); float:right; line-height:1; } /* Formulaires */ label,.control-label{ display:inline-block; font-size:.92rem; font-weight:600; margin-bottom:7px; } input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password], input[type=number],input[type=date],input[type=search],select,textarea, .form-control,.form-select,.inputbox{ font-family:var(--sans); font-size:1rem; width:100%; padding:13px 15px; color:var(--encre); background:var(--blanc); border:1.5px solid var(--trait-fort); border-radius:var(--rayon); } textarea{ line-height:1.6; } input:focus,select:focus,textarea:focus,.form-control:focus{ outline:none; border-color:var(--encre); box-shadow:0 0 0 3px rgba(16,27,51,.12); } input::placeholder,textarea::placeholder{ color:#8B98AC; } .form-group,.control-group,.controls{ margin-bottom:18px; } .invalid,input.invalid,select.invalid,textarea.invalid{ border-color:var(--rouge); } /* Joomla injecte le message dans le label : sans display:block on lisait « Identifiant *Veuillez compléter ce champ » d'un seul tenant. */ .form-control-feedback,.invalid-feedback{ display:block; color:var(--rouge); font-size:.88rem; font-weight:400; margin-top:6px; } fieldset{ border:0; padding:0; margin:0 0 24px; } legend{ font-weight:600; font-size:1.05rem; padding:0 0 12px; } /* Pagination */ .pagination{ display:flex; flex-wrap:wrap; gap:2px; list-style:none; margin:36px 0 0; padding:0; } .pagination .page-link{ display:block; padding:10px 15px; text-decoration:none; border:1px solid var(--trait); border-radius:var(--rayon); font-size:.94rem; color:var(--encre-2); } .pagination .page-link:hover{ border-color:var(--encre); } .pagination .active .page-link{ background:var(--encre); border-color:var(--encre); color:#fff; } .pagination .disabled .page-link{ color:var(--trait-fort); pointer-events:none; } .counter{ font-size:.88rem; color:var(--acier); margin-top:12px; } /* Tableaux du cœur */ table.table,.zone-composant table{ width:100%; border-collapse:collapse; margin:26px 0; font-size:.97rem; } /* Tableaux de contenu. Le socle traitait les tableaux larges de l'espace métier mais pas ceux des articles : le comparatif des trois statuts, quatre colonnes, débordait de 87 px sur mobile. Un tableau ne se replie pas — on le rend défilable dans sa propre boîte plutôt que de laisser la page entière glisser sous le doigt. */ .prose table, .tableau{ width:100%; border-collapse:collapse; margin:28px 0; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } .prose table thead, .tableau thead{ border-bottom:1.5px solid var(--encre); } .prose table th, .tableau th{ text-align:left; font-size:.86rem; font-weight:600; color:var(--acier); padding:10px 14px 10px 0; white-space:nowrap; } .prose table td, .tableau td{ padding:12px 14px 12px 0; border-top:1px solid var(--trait); font-variant-numeric:tabular-nums; } .prose table tbody th, .tableau tbody th{ color:var(--encre); padding-right:24px; border-top:1px solid var(--trait); white-space:normal; } .tableau caption{ caption-side:top; text-align:left; font-size:.9rem; color:var(--acier); margin-bottom:12px; } /* Signal de lecture sur les colonnes de comparaison. */ .tableau td.oui{ color:var(--encre); font-weight:500; } .tableau td.non{ color:var(--acier); } @media (max-width:760px){ .prose table, .tableau{ font-size:.92rem; } .prose table th, .tableau th, .prose table td, .tableau td{ padding-right:18px; } } table.table th,table.table td,.zone-composant table th,.zone-composant table td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--trait); vertical-align:top; } table.table thead th,.zone-composant table thead th{ font-weight:600; font-size:.86rem; color:var(--acier); border-bottom:1px solid var(--trait-fort); } /* Onglets et accordéons Joomla (joomla-tab, details) */ joomla-tab-element{ display:block; padding-top:22px; } .zone-composant details{ border-bottom:1px solid var(--trait); } .zone-composant summary{ cursor:pointer; padding:20px 40px 20px 0; font-weight:600; } /* Fil d'Ariane du cœur */ .breadcrumb{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; font-size:.85rem; } .breadcrumb li::after{ content:"/"; margin-left:8px; opacity:.4; } .breadcrumb li:last-child::after{ content:""; } .breadcrumb a{ text-decoration:none; } .breadcrumb a:hover{ text-decoration:underline; text-underline-offset:3px; } /* ------------------------------------------------------------- 5. Boutons */ /* Ne pas qualifier la base par a.btn ou button.btn : ces sélecteurs valent (0,1,1) et écrasent les variantes en (0,1,0), qui ne peuvent alors jamais gagner. Tous les boutons primaires du site sortaient en marine au lieu de rouge, et les boutons clairs perdaient leur bordure. */ .btn,.button,input[type=submit]{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:.98rem; font-weight:600; padding:14px 26px; border-radius:var(--rayon); border:1.5px solid transparent; text-decoration:none; cursor:pointer; background:var(--encre); color:#fff; width:auto; transition:background-color .16s ease,border-color .16s ease,color .16s ease; } /* Le rouge signale l'action que l'on souhaite voir accomplie. Il se demande, il ne s'attribue pas d'office : un input[type=submit] peut aussi bien être un enregistrement qu'une suppression, et com_timesheets rendait « Supprimer les fichiers » aussi engageant que « Consulter ». Les soumissions non qualifiées prennent donc le marine. */ .btn-primaire,.btn-primary{ background:var(--rouge); color:#fff; } .btn-primaire:hover,.btn-primary:hover{ background:var(--rouge-fonce); } input[type=submit]{ background:var(--encre); color:#fff; } input[type=submit]:hover{ background:var(--encre-2); } /* Action destructrice : contour rouge, jamais un aplat. Elle doit être trouvable sans être invitante. */ .btn-danger,.btn-delete,.btn-supprimer{ background:transparent; color:var(--rouge); border-color:var(--rouge); } .btn-danger:hover,.btn-delete:hover,.btn-supprimer:hover{ background:var(--rouge); color:#fff; } /* Rustine assumée. com_timesheets pose btn-primary sur « Enregistrer » comme sur « Supprimer les fichiers » : deux actions opposées, même apparence, sur un écran qui porte des justificatifs. Faute de classe distinctive, on se rabat sur le libellé. C'est fragile — un changement de texte ou de langue la neutralise — et la vraie correction est d'ajouter btn-danger dans le composant. En attendant, mieux vaut cette rustine qu'un bouton de suppression déguisé en action recommandée. */ .espace-metier [value*="Supprim"], .espace-metier [value*="supprim"], .espace-metier [value*="Effacer"]{ background:transparent!important; color:var(--rouge)!important; border-color:var(--rouge)!important; } .espace-metier [value*="Supprim"]:hover, .espace-metier [value*="supprim"]:hover, .espace-metier [value*="Effacer"]:hover{ background:var(--rouge)!important; color:#fff!important; } .btn-marine,.btn-secondary{ background:var(--encre); color:#fff; } .btn-marine:hover,.btn-secondary:hover{ background:var(--encre-2); } .btn-contour,.btn-outline-primary,.btn-light{ background:transparent; color:var(--encre); border-color:var(--trait-fort); } .btn-contour:hover,.btn-outline-primary:hover,.btn-light:hover{ border-color:var(--encre); } .btn-clair{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); } .btn-clair:hover{ border-color:#fff; background:rgba(255,255,255,.08); } .btn:active{ transform:translateY(1px); } /* -------------------------------------------------------------- 6. Chrome */ .topbar{ background:var(--encre-2); color:rgba(255,255,255,.72); font-size:.82rem; padding:9px 0; border-bottom:1px solid var(--encre-3); } .topbar .wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; } /* En-tête sur fond marine : il se soude au héros et aux en-têtes de page, eux aussi marine. Le filet du bas reste visible sans les séparer brutalement, il se lit comme les filets de la fiche signalétique. */ .entete{ background:var(--encre); border-bottom:1px solid var(--encre-3); position:sticky; top:0; z-index:60; } /* La même trame de colonnes que le héros et les en-têtes de page : sans elle, elle démarrerait brutalement sous l'en-tête alors que le champ marine est continu. */ .entete::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:calc(100% / 12) 100%; } .entete .wrap{ position:relative; z-index:1; display:flex; align-items:center; gap:28px; min-height:var(--entete-h); } .logo{ display:block; text-decoration:none; flex:none; } .logo img{ display:block; } .logo-texte{ font-size:1.3rem; font-weight:700; letter-spacing:-0.02em; color:#fff; } .entete .nav{ margin-left:auto; display:flex; align-items:center; gap:26px; font-size:.94rem; font-weight:500; } .entete .nav ul{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; } .entete .nav a{ text-decoration:none; color:rgba(255,255,255,.78); padding:6px 0; border-bottom:2px solid transparent; display:block; } .entete .nav a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.35); } .entete .nav .current > a,.entete .nav .active > a,.entete .nav a[aria-current]{ color:#fff; border-bottom-color:var(--rouge); } .entete .nav .separateur{ width:1px; height:22px; background:var(--encre-3); flex:none; } /* Sous-menus : panneau simple, pas de survol en cascade sur trois niveaux */ .entete .nav li{ position:relative; } .entete .nav li > ul{ position:absolute; top:100%; left:0; min-width:230px; z-index:70; display:none; flex-direction:column; gap:0; align-items:stretch; background:var(--blanc); border:1px solid var(--trait); border-radius:var(--rayon); padding:8px 0; box-shadow:0 12px 28px rgba(16,27,51,.10); } .entete .nav li:hover > ul,.entete .nav li:focus-within > ul{ display:flex; } .entete .nav li > ul a{ padding:9px 18px; border-bottom:0; color:var(--encre-2); } .entete .nav li > ul a:hover{ background:var(--papier); color:var(--encre); border-bottom-color:transparent; } /* L'entrée active de la barre est en blanc, ce qui convient sur le marine. Dans le panneau déroulant, qui est sur fond blanc, la même règle rendait l'entrée courante illisible — blanc sur blanc. Le panneau reprend donc l'encre, et signale l'entrée courante par le poids et un repère rouge plutôt que par la couleur du texte. */ .entete .nav li > ul .current > a, .entete .nav li > ul .active > a, .entete .nav li > ul a[aria-current]{ color:var(--encre); font-weight:600; border-bottom-color:transparent; box-shadow:inset 3px 0 0 var(--rouge); } .entete .nav li > ul .current > a:hover, .entete .nav li > ul .active > a:hover, .entete .nav li > ul a[aria-current]:hover{ background:var(--papier); } .acces,.entete .nav .mod-acces a{ font-size:.9rem; font-weight:600; text-decoration:none; color:#fff; border:1.5px solid rgba(255,255,255,.45); border-radius:var(--rayon); padding:9px 16px; } .acces:hover,.entete .nav .mod-acces a:hover{ border-color:#fff; background:rgba(255,255,255,.08); } .burger{ display:none; margin-left:auto; background:none; border:1.5px solid rgba(255,255,255,.45); border-radius:var(--rayon); padding:10px 14px; font-weight:600; font-size:.9rem; color:#fff; cursor:pointer; } .pied{ background:var(--encre); color:rgba(255,255,255,.68); padding-block:56px 32px; font-size:.93rem; } /* Le nombre de colonnes varie selon les modules réellement posés et selon la présence du logo : on laisse la grille s'ajuster plutôt que de figer quatre pistes qui resteraient vides. */ /* Cinq cellules, le logo puis quatre modules : à 190 px de largeur minimale et 56 px de gouttière, seules quatre pistes tenaient et la colonne Contact retombait seule sur une deuxième ligne. */ .pied .colonnes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:clamp(24px,2.6vw,40px); padding-bottom:36px; border-bottom:1px solid var(--encre-3); } .pied h3,.pied h4,.pied .mod-titre{ font-size:.86rem; font-weight:600; color:#fff; margin:0 0 16px; } .pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; } /* Sans retrait, un sous-menu se lit comme une entrée de même rang : « Documents » et « Bulletins de salaire » paraissaient au même niveau qu'« Accueil ». */ .pied li > ul{ margin:10px 0 2px; padding-left:14px; border-left:1px solid var(--encre-3); font-size:.9em; } .pied a{ text-decoration:none; } .pied a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; } /* Le logo du pied est passé en blanc plein : la version couleur perdrait sa partie blanche sur le fond marine. La hauteur vient du paramètre, en ligne. */ .pied .marque img{ filter:brightness(0) invert(1); opacity:.85; margin-bottom:16px; } .pied .marque p{ margin:0; line-height:1.6; max-width:34ch; } .pied img{ opacity:.92; } .pied:not(:has(.colonnes)){ padding-block:34px 26px; } .pied:not(:has(.colonnes)) .pied-bas{ padding-top:0; } .pied-bas{ display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; padding-top:24px; font-size:.85rem; color:rgba(255,255,255,.5); } .pied-bas ul{ display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; margin:0; padding:0; } /* ------------------------------------------------- 7. Héros et fiche */ .heros{ background:var(--encre); color:#fff; padding-block:clamp(56px,7vw,92px); position:relative; overflow:hidden; } .heros::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:calc(100% / 12) 100%; } .heros .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr); gap:clamp(40px,5vw,76px); align-items:start; } /* Le titre du héros partage la largeur avec la fiche : à la taille de la classe display il passait sur quatre lignes au lieu de deux. */ .heros .display{ font-size:clamp(2.05rem,3.5vw,3.15rem); } .heros:not(:has(.heros-fiche)) .wrap{ grid-template-columns:minmax(0,1fr); } .heros h1,.heros h2,.heros .display{ color:#fff; } .heros p{ font-family:var(--serif); font-size:1.14rem; line-height:1.68; color:rgba(255,255,255,.80); max-width:52ch; } .heros .actions,.heros-corps .actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; } .fiche{ background:rgba(255,255,255,.045); border:1px solid var(--encre-3); border-radius:var(--rayon); } .fiche-tete{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 22px; border-bottom:1px solid var(--encre-3); font-size:.8rem; font-weight:600; color:rgba(255,255,255,.62); } .sceau{ width:9px; height:9px; border-radius:50%; background:var(--rouge); box-shadow:0 0 0 4px rgba(198,40,40,.22); flex:none; } .fiche dl{ margin:0; } .fiche .ligne{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:15px 22px; border-bottom:1px solid var(--encre-3); } .fiche .ligne:last-child{ border-bottom:0; } .fiche dt{ font-size:.88rem; color:rgba(255,255,255,.60); } .fiche dd{ margin:0; text-align:right; font-size:1.02rem; font-weight:600; color:#fff; letter-spacing:-0.01em; } .fiche dd .unite{ font-weight:400; color:rgba(255,255,255,.62); font-size:.86rem; } /* Sans retour à la ligne autorisé, le libellé se comprimait à un mot par ligne dès que le logo prenait sa place : cinq lignes pour une phrase de dix mots. Le logo garde sa taille, le texte passe dessous quand il ne tient plus. */ .fiche-pied{ padding:16px 22px; border-top:1px solid var(--encre-3); display:flex; flex-wrap:wrap; align-items:center; gap:14px; } /* Le fichier a un fond blanc opaque. Posé nu sur le marine il forme un rectangle sale ; on l'assume en cartouche, avec un rembourrage régulier. */ /* Contraindre la hauteur seule ne dit rien de l'encombrement : le logo LSE a un rapport de 7,5 pour 1, donc 46 px de haut valent 345 px de large, soit 56 % de la fiche. Le libellé, réduit à ce qui restait, sortait sur quatre lignes. On borne les deux dimensions et c'est la largeur qui décide. */ .fiche-pied img{ max-height:40px; max-width:210px; height:auto; width:auto; border-radius:var(--rayon); background:var(--blanc); padding:5px 8px; flex:none; } .fiche-pied span{ font-size:.83rem; color:rgba(255,255,255,.62); line-height:1.45; flex:1 1 190px; min-width:0; } .reassurance{ background:var(--encre-2); color:rgba(255,255,255,.82); border-top:1px solid var(--encre-3); font-size:.9rem; } .reassurance ul{ display:flex; flex-wrap:wrap; gap:8px 30px; margin:0; padding-block:16px; padding-inline:0; list-style:none; } /* --------------------------------------------------- 8. Bandes et sections */ /* .section est un nom que n'importe quel composant peut employer. Le cantonner aux bandes que pose index.php, sous peine de coller 96 px de rembourrage et un fond blanc à une sortie de composant. */ main > .section{ padding-block:var(--section-y); background:var(--blanc); border-bottom:1px solid var(--trait); } /* Cantonner .section en « main > .section » l'a fait passer de (0,1,0) à (0,1,1) : les modificateurs de bande, restés en (0,1,0), ne gagnaient plus. bloc2 avait perdu son marine et bloc6 son papier, sans que rien ne le signale. Ils reprennent donc la forme de la règle qu'ils surclassent. */ main > .section-marine, main > .section-bloc2{ background:var(--encre); color:#fff; border-bottom:0; } main > .section-bloc6{ background:var(--papier); } .section-marine .lede, .section-bloc2 .lede{ color:rgba(255,255,255,.72); } .section-bloc2 h2{ color:#fff; } main > .section-papier{ background:var(--papier); } /* En-tête de section : titre à gauche, intention à droite. */ .section-tete{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:end; margin-bottom:clamp(36px,4vw,56px); } .tete-page{ background:var(--encre); color:#fff; padding-block:clamp(36px,4.5vw,60px) clamp(40px,5vw,66px); position:relative; overflow:hidden; } .tete-page::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:calc(100% / 12) 100%; } .tete-page .wrap{ position:relative; z-index:1; } .tete-page h1{ color:#fff; max-width:20ch; } .tete-page .chapo{ margin:22px 0 0; font-family:var(--serif); font-size:1.14rem; line-height:1.68; color:rgba(255,255,255,.80); max-width:58ch; } .tete-page .breadcrumb{ color:rgba(255,255,255,.55); margin-bottom:22px; } .code-erreur{ font-size:3.4rem; font-weight:700; letter-spacing:-0.04em; color:var(--rouge); margin:0 0 8px; } .zone-principale{ padding-block:var(--section-y); background:var(--blanc); } /* Ne jamais raisonner en enfant direct ici : les surcharges enveloppent leur sortie dans
ou dans le div du composant, donc les bandes sont des petits-enfants. Les versions 0.9.4 et 0.9.5 ciblaient toutes deux « .zone-composant > .bande », qui ne désigne rien, d'où l'absence d'effet. On détecte plutôt la présence d'un .tete-page, signature d'une surcharge qui gère elle-même ses conteneurs : dans ce cas la zone ne contraint rien et chaque bande pose son .wrap ou son .wrap-lecture. Sinon, conteneur de secours sur les enfants directs, ce qui protège les vues du cœur non surchargées. */ .zone-composant:not(:has(.tete-page)) > *, .zone-composant > #system-message-container{ max-width:var(--largeur); margin-inline:auto; padding-inline:var(--gouttiere); } .zone-composant--contenue > *{ max-width:none; padding-inline:0; } /* index.php pose déjà une .zone-principale autour de .zone-composant. Les surcharges qui gèrent leurs propres bandes en posent une seconde à l'intérieur : les deux rembourrages se cumulent, section-y deux fois en haut et deux fois en bas. La règle ne neutralisait que le haut, où le symptôme se voyait — un blanc au-dessus de la bande marine — et laissait le bas doublé sans que rien ne le signale. La zone extérieure ne doit rien rembourrer du tout dès lors que la surcharge prend la main. */ .zone-principale:has(.zone-composant .tete-page){ padding-block:0; } /* Garde de dernier recours : une .zone-principale imbriquée dans une autre ne rembourre jamais deux fois, quelle que soit la surcharge. */ .zone-principale .zone-principale{ padding-block:var(--section-y); } .zone-principale:not(:has(.zone-composant .tete-page)) .zone-principale{ padding-block:0; } /* Colonne de lecture, plus étroite que le conteneur général. */ .wrap-lecture{ max-width:var(--largeur-lecture); margin-inline:auto; padding-inline:var(--gouttiere); } /* Ne poser une grille sur .wrap que lorsqu'il y a réellement une colonne latérale. La règle générale, en (0,2,0), écrasait toute classe de mise en page portée par le même .wrap — .contact-grille en (0,1,0) notamment, dont les deux colonnes ne s'appliquaient jamais. */ .zone-principale.avec-colonne > .wrap{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(32px,4vw,64px); align-items:start; } /* La largeur de lecture est portée par .wrap-lecture, à l'intérieur des surcharges, jamais par la zone composant elle-même. La version 0.9.0 plafonnait ici .zone-composant à 860 px sans marge automatique, ce qui collait tout le contenu à gauche sur l'ensemble du site — la classe de corps article-etroit étant posée sur toutes les pages, pas seulement les articles. Cette règle écrasait silencieusement les corrections des versions 0.9.4 à 0.9.6. */ .article-large .wrap-lecture{ max-width:var(--largeur); } .colonne .carte{ border:1px solid var(--trait); border-radius:var(--rayon); padding:24px; margin-bottom:20px; } .colonne .mod-titre{ font-size:.86rem; font-weight:600; color:var(--acier); margin:0 0 14px; } .lettre{ background:var(--papier-2); border-bottom:1px solid var(--trait); padding-block:clamp(48px,5vw,72px); } .lettre-grille{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; } @media (max-width:1000px){ .lettre-grille{ grid-template-columns:minmax(0,1fr); } } .partenaires{ background:var(--blanc); border-bottom:1px solid var(--trait); padding-block:48px; } /* Une hauteur fixe ne convient pas a des logos de formats tres differents : les logos larges et bas deviennent minuscules, les carres paraissent deux fois plus presents. On contraint donc une boite commune et on y inscrit chaque logo, hauteur plafonnee. */ .partenaires .logos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); align-items:center; gap:clamp(20px,2.4vw,36px); } /* place-items:center sur une grille forcait un carre de 44x44 quelle que soit la proportion. On donne a la place une boite fixe et on inscrit l'image dedans par object-fit, qui preserve le rapport. */ .partenaires .logos a{ display:block; } .partenaires img{ width:100%; height:52px; object-fit:contain; object-position:center; filter:grayscale(1); opacity:.62; transition:filter .16s ease,opacity .16s ease; } /* Correction optique. Des boîtes de même hauteur ne donnent pas une présence égale : AXA remplit son carré d'un aplat sombre là où Patrimonia n'occupe qu'un cinquième du sien en traits fins. On corrige le volume d'encre logo par logo, comme on le ferait à la main. Correctif de mise en forme, à retirer le jour où les fichiers seront recadrés au plus près avec une pondération homogène. */ .partenaires img[alt="AXA"]{ height:34px; } .partenaires img[alt="Zurich"]{ height:42px; } .partenaires img[alt="SUVA"]{ height:40px; } .partenaires img[alt="Groupe Mutuel"]{ height:48px; } .partenaires img[alt="OCAS Genève"]{ height:50px; } /* Les fonds blancs des fichiers se fondent dans la bande plutôt que de former des rectangles visibles autour de chaque marque. */ .partenaires img{ mix-blend-mode:multiply; } .partenaires a:hover img{ filter:none; opacity:1; } .appel{ background:var(--encre-2); color:#fff; padding-block:clamp(48px,5.5vw,80px); } .appel .wrap{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px; align-items:center; } .appel h2{ color:#fff; margin-bottom:12px; } .appel p{ font-family:var(--serif); color:rgba(255,255,255,.76); max-width:56ch; line-height:1.68; } .appel .actions{ display:flex; gap:14px; flex-wrap:wrap; } /* ------------------------------------------------- 9. Motifs de contenu */ /* Registre : grille en filets, sans carte flottante ni ombre. */ .registre{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--trait); border:1px solid var(--trait); } .registre > *{ background:var(--blanc); padding:clamp(28px,3vw,40px); } .registre .picto{ width:44px; height:44px; margin-bottom:20px; display:grid; place-items:center; background:var(--papier-2); border-radius:var(--rayon); } .registre .picto img{ width:26px; height:26px; object-fit:contain; } .registre h3{ margin-bottom:12px; } .registre p{ font-family:var(--serif); font-size:1rem; line-height:1.68; color:#243350; max-width:46ch; } /* Déroulé : séquence réelle, donc numérotée. Ne pas réemployer ailleurs. */ .deroule{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--encre-3); } .deroule .etape{ padding:32px 26px 0 0; border-right:1px solid var(--encre-3); position:relative; } .deroule .etape:not(:first-child){ padding-left:26px; } .deroule .etape:last-child{ border-right:0; } .deroule .etape::before{ content:""; position:absolute; top:-1px; left:0; width:44px; height:2px; background:var(--rouge); } .deroule .rang{ font-size:.86rem; font-weight:600; color:rgba(255,255,255,.5); margin-bottom:14px; } .deroule h3{ color:#fff; margin-bottom:10px; } .deroule p{ font-family:var(--serif); font-size:.99rem; line-height:1.66; color:rgba(255,255,255,.72); } .chiffres{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--trait); border:1px solid var(--trait); margin-top:32px; } .chiffres > div{ background:var(--papier); padding:22px 20px; } .chiffres .valeur{ font-size:1.9rem; font-weight:600; letter-spacing:-0.03em; line-height:1; display:block; margin-bottom:6px; } .chiffres .libelle{ font-size:.85rem; color:var(--acier); line-height:1.4; display:block; } /* Questions fréquentes */ .faq{ border-top:1px solid var(--trait); } .faq details{ border-bottom:1px solid var(--trait); } .faq summary{ list-style:none; cursor:pointer; padding:22px 44px 22px 0; font-size:1.06rem; font-weight:600; letter-spacing:-0.012em; position:relative; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight:400; color:var(--acier); line-height:1; } .faq details[open] summary::after{ content:"–"; color:var(--rouge); } .faq .reponse{ padding:0 60px 26px 0; font-family:var(--serif); font-size:1.02rem; line-height:1.72; color:#243350; max-width:70ch; } /* Encadré d'appui : filet rouge, jamais de fond vif. */ .encadre{ border-left:3px solid var(--rouge); background:var(--papier); padding:24px 26px; margin:32px 0; } .encadre .intitule{ font-size:.83rem; font-weight:600; color:var(--acier); margin-bottom:10px; } .encadre p{ font-family:var(--serif); font-size:1.02rem; line-height:1.7; color:#243350; max-width:62ch; } .citation{ margin:36px 0; padding-left:24px; border-left:3px solid var(--encre); } .citation p{ font-family:var(--sans); font-size:1.28rem; line-height:1.4; letter-spacing:-0.018em; font-weight:600; max-width:34ch; } .citation cite{ display:block; margin-top:12px; font-style:normal; font-size:.88rem; color:var(--acier); } /* --------------------------------------------- 10. Articles et listes */ .articles,.lies-liste{ border-top:1px solid var(--trait); } .article-ligne{ display:grid; grid-template-columns:190px minmax(0,1fr) auto; gap:clamp(20px,3vw,36px); align-items:center; padding-block:26px; border-bottom:1px solid var(--trait); text-decoration:none; } .article-ligne:hover .article-titre{ color:var(--rouge); } /* Sans vignette, on ne réserve pas 190 px de vide : la piste disparaît. */ /* Sans vignette, une piste en 1fr repoussait « Lire » au bord droit et laissait 600 px de vide après l'extrait. On borne la colonne de texte et l'action suit immédiatement. */ .article-ligne:has(> .vignette-absente){ grid-template-columns:minmax(0,720px) auto; justify-content:start; column-gap:clamp(24px,4vw,64px); } /* Le remplaçant doit sortir du flux de grille, sinon trois éléments se partagent deux pistes et le lien passe à la ligne. Il n'existe que pour éviter qu'un commentaire HTML seul ne remplace aucun élément. */ .vignette-absente{ display:none; } .article-ligne img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--rayon); background:var(--papier-2); } .article-meta{ font-size:.83rem; color:var(--acier); margin-bottom:8px; } .article-titre{ font-size:1.22rem; font-weight:600; letter-spacing:-0.015em; line-height:1.3; margin:0 0 8px; transition:color .14s ease; } .article-extrait{ font-family:var(--serif); font-size:.98rem; line-height:1.62; color:var(--acier); margin:0; max-width:62ch; } .article-lien{ font-size:.9rem; font-weight:600; color:var(--rouge); white-space:nowrap; } /* Ligne de méta de l'en-tête d'article : rubrique, date, temps de lecture. */ .article-tete .meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:26px; font-size:.88rem; color:rgba(255,255,255,.62); } .article-tete .meta .rubrique{ color:#fff; font-weight:600; } .article-tete .meta .point{ color:rgba(255,255,255,.30); } .article-tete .chapo + .meta{ margin-top:22px; } .article-visuel figure{ margin:0 0 32px; } .article-visuel img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--rayon); } .article-visuel figcaption{ margin-top:10px; font-size:.84rem; color:var(--acier); } .article-visuel{ padding-top:clamp(36px,4vw,52px); } .article-corps{ padding-block:clamp(36px,4vw,52px) var(--section-y); } .article-visuel + .article-corps{ padding-top:0; } .article-corps .prose > p:first-of-type{ font-size:1.2rem; line-height:1.65; color:var(--encre); } .article-pied{ margin-top:44px; padding-top:26px; border-top:1px solid var(--trait); display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center; } .etiquettes{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; } .etiquettes a{ font-size:.85rem; color:var(--acier); text-decoration:none; border:1px solid var(--trait); border-radius:var(--rayon); padding:6px 12px; display:block; } .etiquettes a:hover{ border-color:var(--encre); color:var(--encre); } /* ------------------------------------------------ 11. Pages éditoriales */ .page-edito .wrap{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:clamp(36px,5vw,80px); align-items:start; } .sommaire{ position:sticky; top:calc(var(--entete-h) + 24px); } .sommaire h2{ font-size:.86rem; font-weight:600; color:var(--acier); margin-bottom:16px; } .sommaire ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--trait); } .sommaire a{ display:block; padding:9px 0 9px 16px; margin-left:-1px; border-left:2px solid transparent; font-size:.93rem; color:var(--acier); text-decoration:none; line-height:1.4; } .sommaire a:hover{ color:var(--encre); border-left-color:var(--trait-fort); } .sommaire a[aria-current]{ color:var(--encre); font-weight:600; border-left-color:var(--rouge); } .bloc-texte + .bloc-texte{ margin-top:clamp(40px,4vw,56px); padding-top:clamp(40px,4vw,56px); border-top:1px solid var(--trait); } .bloc-texte h2{ scroll-margin-top:calc(var(--entete-h) + 30px); margin-bottom:20px; } .definitions > div{ display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; padding:16px 0; border-bottom:1px solid var(--trait); } .definitions dt{ font-weight:600; font-size:.98rem; } .definitions dd{ margin:0; font-family:var(--serif); color:#243350; line-height:1.66; } /* Page éditoriale : la bande porte le fond et le rembourrage, la grille est dans le .wrap. Le corps découpé en blocs reçoit les filets de séparation. */ .page-edito{ background:var(--blanc); padding-block:var(--section-y); } .edito-corps .bloc-texte:first-child{ margin-top:0; padding-top:0; border-top:0; } .edito-corps .prose > :first-child{ margin-top:0; } .sommaire .rappel{ margin-top:28px; padding-top:22px; border-top:1px solid var(--trait); } .sommaire .rappel .etiquettes{ gap:6px; } .sommaire .rappel .etiquettes a{ font-size:.8rem; padding:4px 9px; } /* Le bandeau de titre suit la colonne, sinon l'écran est centré à moitié : un titre à gauche au-dessus d'un formulaire centré est pire que les deux alignés à gauche. */ .vue-login .tete-page .wrap, .vue-registration .tete-page .wrap, .vue-reset .tete-page .wrap, .vue-remind .tete-page .wrap{ text-align:center; } .vue-login .colonne-systeme h2, .vue-login .com-users-login__form{ text-align:center; } .vue-login .com-users-login__form label, .vue-login .com-users-login__form .form-control{ text-align:left; } .vue-login .com-users-login__form .form-check{ display:inline-flex; gap:8px; } /* Champs personnalisés. Joomla les rend en liste de définitions, sans classe utilisable pour distinguer libellé et valeur autrement que par .field-label et .field-value. On les présente en deux colonnes, comme les définitions du corps de texte, pour que l'ensemble reste homogène. */ .fields-container{ margin:36px 0 0; padding-top:26px; border-top:1px solid var(--trait); display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px clamp(24px,3vw,44px); } .fields-container .field-entry{ margin:0; } .fields-container .field-label{ display:block; font-size:.82rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--acier); margin-bottom:5px; } .fields-container .field-value{ display:block; font-size:1rem; color:var(--encre); } .fields-container .field-value p{ margin:0; } /* Un champ vide ne doit pas occuper une case : Joomla rend l'entrée même sans valeur, ce qui creuse des trous dans la grille. */ .fields-container .field-entry:not(:has(.field-value)), .fields-container .field-value:empty{ display:none; } @media (max-width:600px){ .fields-container{ grid-template-columns:minmax(0,1fr); gap:14px; } } /* ------------------------------------- 12. Espace métier — neutralisation com_timesheets et com_salaire ne reçoivent que la typographie et les formulaires. Aucune bande, aucun héros, aucune contrainte de largeur : ces vues ont leurs propres tableaux larges et leur propre logique. */ .espace-metier .heros, .espace-metier .reassurance, .espace-metier .section, .espace-metier .lettre, .espace-metier .partenaires, .espace-metier .appel{ display:none; } .espace-metier .zone-principale{ padding-block:clamp(28px,3vw,44px); } .espace-metier .wrap{ max-width:none; } /* La levée de largeur visait .wrap, qui n'existe plus sur ces pages depuis que la zone composant est sortie de son conteneur. C'est le conteneur de secours posé sur les enfants directs de .zone-composant qui plafonne à 1200 px : il faut le désamorcer là, sinon un tableau de douze colonnes reste enfermé dans la largeur d'une page de vitrine. */ .espace-metier .zone-composant{ max-width:none; padding-inline:var(--gouttiere); } .espace-metier .zone-composant:not(:has(.tete-page)) > *{ max-width:none; margin-inline:0; padding-inline:0; } /* Le socle ne couvrait pas le champ de fichier : il servait au dépôt des justificatifs, sans aucun habillage. */ .espace-metier input[type=file], .zone-composant input[type=file]{ font-family:var(--sans); font-size:.95rem; padding:10px 12px; background:var(--blanc); border:1.5px dashed var(--trait-fort); border-radius:var(--rayon); width:auto; max-width:100%; cursor:pointer; } .espace-metier input[type=file]:focus{ border-color:var(--encre); border-style:solid; } /* Les blocs d'aide du composant arrivent sans rembourrage : le texte touchait le bord de sa propre pastille grise. */ .espace-metier .zone-composant > div[style*="background"], .espace-metier .aide, .espace-metier .help{ padding:20px var(--gouttiere); } /* J'avais levé toute contrainte de largeur pour les tableaux, et le texte en a hérité : sur un écran large, une consigne courait sur 1460 px. Un tableau a besoin de la pleine largeur, une phrase non. */ .espace-metier p, .espace-metier li, .espace-metier label{ max-width:78ch; } .espace-metier table p, .espace-metier table li{ max-width:none; } /* Rythme vertical : le composant enchaîne titre, consigne et champ sans respiration, tout se lit comme un seul bloc. */ .espace-metier h1, .espace-metier h2{ margin-top:clamp(32px,3vw,48px); margin-bottom:12px; } .espace-metier h3{ margin-top:28px; margin-bottom:10px; } .espace-metier .zone-composant > *:first-child{ margin-top:0; } .espace-metier form + h2, .espace-metier table + h2{ padding-top:clamp(24px,2.5vw,36px); border-top:1px solid var(--trait); } /* Le champ de fichier n'est pas une zone de dépôt : le pointillé suggérait qu'on pouvait y glisser un document. Bordure pleine, largeur ajustée. */ .espace-metier input[type=file], .zone-composant input[type=file]{ border-style:solid; max-width:32rem; } /* Trois champs techniques laissés en saisie libre dans le formulaire des documents de com_timesheets, alors que le formulaire de la feuille d'heures met correctement les siens en hidden. On les masque : ils restent transmis à l'envoi. Ce n'est qu'un correctif d'affichage — voir la note de maintenance sur le contrôle d'autorisation côté serveur. */ .espace-metier input[name="collaborateur_id"], .espace-metier input[name="yearmonth_value"], .espace-metier input[name="result_format"]{ display:none; } /* Le bloc d'aide arrive en gris de navigateur, étranger à la palette. Il reprend le papier du site, avec un filet plutôt qu'un aplat franc. */ .espace-metier [style*="background"]{ background:var(--papier-2)!important; border:1px solid var(--trait); border-radius:var(--rayon); padding:20px var(--gouttiere)!important; } /* Les boutons du composant arrivent en rangs désordonnés : « Enregistrer » seul sur une ligne, « Imprimer » et « Retour » sur la suivante à des distances arbitraires. Une gouttière commune remet de l'ordre sans toucher au balisage. */ .espace-metier .btn, .espace-metier button, .espace-metier input[type=submit], .espace-metier input[type=button]{ margin:0 14px 14px 0; vertical-align:top; } .espace-metier form + form, .espace-metier form{ margin-bottom:0; } /* Les feuilles d'heures portent onze colonnes et débordent déjà sur le site actuel : « Congé maternité » y est tronqué au bord droit. On rend la zone défilable plutôt que de laisser le tableau sortir de la page, et on resserre les cellules, qui n'ont pas besoin du rembourrage d'un tableau de contenu. */ .espace-metier .zone-composant{ overflow-x:auto; } .espace-metier table{ font-size:.92rem; } .espace-metier table th, .espace-metier table td{ padding:9px 10px; } /* Les intitulés doivent se replier sur deux lignes : forcés sur une seule, « Congé maternité / autre parent » et « Heures supplémentaires » prenaient chacun 200 à 250 px et élargissaient tout le tableau. Seules les données restent insécables, un montant ne se coupe pas. */ .espace-metier table th{ white-space:normal; line-height:1.25; } .espace-metier table td{ white-space:nowrap; } /* Un montant se lit en colonne : chiffres alignés, jamais en chasse variable. */ .espace-metier table td{ font-variant-numeric:tabular-nums; } /* Hiérarchie des titres. Ces écrans enchaînent les sous-sections, et « Téléversement de documents » sortait à la taille d'un titre de page, concurrençant « Feuilles d'heures » juste au-dessus. */ .espace-metier h1{ font-size:clamp(1.7rem,2.4vw,2.1rem); } .espace-metier h2{ font-size:1.3rem; margin-top:1.4em; } .espace-metier h3{ font-size:1.06rem; } /* Les boutons sans classe sortaient au format brut du navigateur, gris pâle sur fond pâle : ceux d'ajout et de retrait de ligne étaient presque invisibles alors qu'ils modifient la feuille. */ .espace-metier button:not([class*="btn"]), .espace-metier input[type=button], .espace-metier input[type=reset]{ font-family:var(--sans); font-size:.95rem; font-weight:600; padding:7px 13px; min-width:38px; line-height:1; color:var(--encre); background:var(--blanc); border:1.5px solid var(--trait-fort); border-radius:var(--rayon); cursor:pointer; } .espace-metier button:not([class*="btn"]):hover, .espace-metier input[type=button]:hover{ border-color:var(--encre); } /* Une zone de commentaire journalier n'a pas besoin de quatre lignes. */ .espace-metier textarea{ min-height:58px; resize:vertical; } /* Espacement des actions de bas de formulaire, que le composant laisse au hasard de son balisage. */ .espace-metier .btn + .btn{ margin-left:14px; } /* --------------------------------------------- 13. Vues du cœur de Joomla Vues rendues par le cœur sans surcharge PHP : com_users (inscription, profil, réinitialisation, rappel), com_finder, com_tags, com_contact. Habillées par CSS plutôt que par surcharge, pour ne pas prendre de dette à chaque montée de version de Joomla. */ /* Colonne étroite commune aux formulaires de service */ .colonne-systeme, .com-users-registration, .com-users-profile, .com-users-reset, .com-users-remind, .com-users-remind__form, .com-users-logout{ max-width:560px; } /* La connexion était la seule colonne système non centrée, alors que l'inscription, le profil, la réinitialisation et le rappel l'étaient déjà. Un écran de service se centre : il n'y a rien d'autre à lire sur la page. */ /* .colonne-systeme vit dans le .wrap d'une bande .zone-principale, qui pose déjà section-y en rembourrage vertical et la gouttière en horizontal. Elle les reposait par-dessus : 112 px de blanc au-dessus de la carte de connexion et 48 px de gouttière cumulée, ce qui rétrécissait la carte d'autant. Les vues du cœur, elles, n'ont pas de .wrap et gardent leur propre rembourrage. */ .colonne-systeme{ margin-inline:auto; } .com-users-registration, .com-users-profile, .com-users-reset, .com-users-remind{ margin-inline:auto; padding-block:var(--section-y); padding-inline:var(--gouttiere); } .com-users-profile{ max-width:760px; } /* Boutons à icône des composants. Le template ne charge aucune police d'icônes : tout bouton qui n'a qu'un pictogramme pour contenu sort en rectangle plein sans intitulé — la bascule du mot de passe hier, le sélecteur de date du simulateur aujourd'hui. On leur donne un texte. La solution durable est un jeu d'icônes SVG en ligne dans les composants. */ .espace-metier .btn:empty::after, .espace-metier button:empty::after, .espace-metier input[type=button][value=""]::after{ content:"Ouvrir"; } .espace-metier .btn:empty, .espace-metier button:empty{ background:transparent; color:var(--encre-2); border:1.5px solid var(--trait-fort); padding:0 14px; font-size:.9rem; font-weight:500; min-width:auto; } .espace-metier .btn:empty:hover, .espace-metier button:empty:hover{ background:var(--papier); color:var(--encre); } /* Même panne hors espace métier. La bascule des sous-catégories de la vue « Liste de toutes les catégories » n'a qu'un pour contenu : sans police d'icônes, le bouton sort vide et l'aplat marine du socle en fait une pastille muette au bout de la ligne. Le bouton n'est pas vide au sens de :empty — il contient un span — d'où le second sélecteur. Le glyphe est textuel et suit l'état porté par le composant. */ .zone-composant .btn:has(> [class*="icon-"]:only-child), .zone-composant button:has(> [class*="icon-"]:only-child){ background:transparent; color:var(--encre-2); border:1.5px solid var(--trait-fort); padding:0 12px; min-width:auto; font-size:1rem; font-weight:600; } .zone-composant .btn:has(> [class*="icon-"]:only-child)::after, .zone-composant button:has(> [class*="icon-"]:only-child)::after{ content:"+"; } .zone-composant [aria-expanded="true"]:has(> [class*="icon-"]:only-child)::after{ content:"\2212"; } .zone-composant [class*="icon-"]{ font-style:normal; } /* Le composant pose une grille à trois colonnes et laisse des cellules vides : près de 500 px de blanc entre deux rangées de champs. On resserre les lignes sans toucher à la structure. */ .espace-metier .zone-composant .row, .espace-metier .zone-composant [class*="col-"]{ margin-bottom:0; } .espace-metier .zone-composant .control-group{ margin-bottom:18px; } .espace-metier .zone-composant p:empty, .espace-metier .zone-composant div:empty:not([class*="col"]):not(.form-control){ display:none; } /* Bascule d'affichage du mot de passe. Joomla y place une icône de police que le template ne charge pas : le bouton sortait en rectangle marine vide. On lui donne un intitulé, qui suit l'état porté par le composant. */ /* Un objet flex conserve min-width:auto : il ne descend pas sous sa largeur intrinsèque, exactement comme « 1fr » vaut minmax(auto,1fr). Le champ portait width:100% en base, donc flex-basis:auto valait 100% du groupe ; ajouté aux 100 px du bouton, le total dépassait et les deux se comprimaient au prorata. Le champ perdait un tiers de sa largeur sans que rien ne déborde. */ .input-group{ display:flex; align-items:stretch; gap:8px; } .input-group .form-control{ flex:1 1 0; min-width:0; width:auto; } .input-password-toggle{ flex:none; background:transparent; color:var(--encre-2); border:1.5px solid var(--trait-fort); font-size:.9rem; font-weight:500; padding:0 14px; white-space:nowrap; } .input-password-toggle:hover{ background:var(--papier); color:var(--encre); } .input-password-toggle .icon-eye::after{ content:"Afficher"; } .input-password-toggle .icon-eye-slash::after{ content:"Masquer"; } .input-password-toggle [class^="icon-"]{ font-style:normal; } /* Formulaires du cœur : renderField() empile label puis contrôle. */ .form-horizontal .control-group, .zone-composant .control-group{ margin-bottom:20px; } .control-label label, .zone-composant .control-label{ font-size:.92rem; font-weight:600; margin-bottom:7px; display:block; } .zone-composant .controls{ margin:0; } .zone-composant .form-check{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; } .zone-composant .form-check input{ width:auto; } .zone-composant .form-check label{ margin:0; font-weight:400; } /* Joomla pose class="required" sur le