/* Theme: Default — style.css Contient désormais aussi les styles génériques des modules (ex-modules.css) pour ne charger qu'un seul fichier CSS sur le front. Ordre : génériques .module-* d'abord, surcharges du thème ensuite. */ /* ========================================================================== DESIGN SYSTEM — Palette + boutons colorés (btn-1 … btn-6) -------------------------------------------------------------------------- Les couleurs (--color-1..6) et surcharges bouton (--btn-N-*) sont INLINÉES dans le par la config du thème (admin/themes/configure/default), AVANT ce fichier. Ici on ne fait que les CONSOMMER via var(), avec un repli (palette → valeur sûre) : ne JAMAIS redéclarer ces vars en :root sinon la config serait écrasée. Le survol est auto-dérivé en color-mix (pas besoin de configurer une 2e couleur), surchargeable via --btn-N-bg-hover. ========================================================================== */ :root { /* Globaux boutons (non pilotés par la palette) */ --btn-padding-x : 1rem; --btn-padding-y : .45rem; --btn-radius : 4px; --icon-arrow : "\f061"; } .btn { text-transform: uppercase; } /* Fabrique un bouton coloré : $bg (fond), $fg (texte), $fallback (couleur palette) */ .btn-1, .btn-2, .btn-3, .btn-4, .btn-5, .btn-6 { border-style: solid; transition : background-color .18s ease, color .18s ease, border-color .18s ease; } .btn-1 { background-color: var(--btn-1-bg, var(--color-1, #F8B11F)); color : var(--btn-1-color, #212529); border-color : var(--btn-1-border-color, transparent); border-width : var(--btn-1-border-width, 0); border-radius : var(--btn-1-radius, var(--btn-radius)); } .btn-1:hover { background-color: var(--btn-1-bg-hover, color-mix(in srgb, var(--btn-1-bg, var(--color-1, #F8B11F)) 85%, #000)); color : var(--btn-1-color, #212529); } .btn-2 { background-color: var(--btn-2-bg, var(--color-2, #143F6F)); color : var(--btn-2-color, #ffffff); border-color : var(--btn-2-border-color, transparent); border-width : var(--btn-2-border-width, 0); border-radius : var(--btn-2-radius, var(--btn-radius)); } .btn-2:hover { background-color: var(--btn-2-bg-hover, color-mix(in srgb, var(--btn-2-bg, var(--color-2, #143F6F)) 85%, #000)); color : var(--btn-2-color, #ffffff); } .btn-3 { background-color: var(--btn-3-bg, var(--color-3, #EB5757)); color : var(--btn-3-color, #ffffff); border-color : var(--btn-3-border-color, transparent); border-width : var(--btn-3-border-width, 0); border-radius : var(--btn-3-radius, var(--btn-radius)); } .btn-3:hover { background-color: var(--btn-3-bg-hover, color-mix(in srgb, var(--btn-3-bg, var(--color-3, #EB5757)) 85%, #000)); color : var(--btn-3-color, #ffffff); } .btn-4 { background-color: var(--btn-4-bg, var(--color-4, #ffffff)); color : var(--btn-4-color, #212529); border-color : var(--btn-4-border-color, #d0d5dd); border-width : var(--btn-4-border-width, 1px); border-radius : var(--btn-4-radius, var(--btn-radius)); } .btn-4:hover { background-color: var(--btn-4-bg-hover, color-mix(in srgb, var(--btn-4-bg, var(--color-4, #ffffff)) 92%, #000)); color : var(--btn-4-color, #212529); } .btn-5 { background-color: var(--btn-5-bg, var(--color-5, #2B2E68)); color : var(--btn-5-color, #ffffff); border-color : var(--btn-5-border-color, transparent); border-width : var(--btn-5-border-width, 0); border-radius : var(--btn-5-radius, var(--btn-radius)); } .btn-5:hover { background-color: var(--btn-5-bg-hover, color-mix(in srgb, var(--btn-5-bg, var(--color-5, #2B2E68)) 85%, #fff)); color : var(--btn-5-color, #ffffff); } .btn-6 { background-color: var(--btn-6-bg, var(--color-6, #F4BD3D)); color : var(--btn-6-color, #212529); border-color : var(--btn-6-border-color, transparent); border-width : var(--btn-6-border-width, 0); border-radius : var(--btn-6-radius, var(--btn-radius)); } .btn-6:hover { background-color: var(--btn-6-bg-hover, color-mix(in srgb, var(--btn-6-bg, var(--color-6, #F4BD3D)) 85%, #000)); color : var(--btn-6-color, #212529); } /* Bouton fléché (icône FA à droite) — repris de ton style.css */ .btn-arrow { position: relative; padding-right: calc(var(--btn-padding-x) + 35px); } .btn-arrow::after { content : var(--icon-arrow); font-family: "Font Awesome 7 Pro"; font-weight: 300; font-size : 18px; position : absolute; right : 20px; top : 50%; transform : translateY(-50%); transition: right .2s ease; } .btn-arrow:hover::after { right: calc(var(--btn-padding-x) - 4px); } /* Classes utilitaires couleur/fond de la palette (color-N / bg-N) */ .color-1 { color: var(--color-1) !important; } .bg-1 { background-color: var(--color-1) !important; } .color-2 { color: var(--color-2) !important; } .bg-2 { background-color: var(--color-2) !important; } .color-3 { color: var(--color-3) !important; } .bg-3 { background-color: var(--color-3) !important; } .color-4 { color: var(--color-4) !important; } .bg-4 { background-color: var(--color-4) !important; } .color-5 { color: var(--color-5) !important; } .bg-5 { background-color: var(--color-5) !important; } .color-6 { color: var(--color-6) !important; } .bg-6 { background-color: var(--color-6) !important; } /* ---- BASE : body / liens / typo / helpers ------------------------------- Consomme les vars pilotées par la config (--body-bg, --body-text) : c'est ce qui rend enfin ACTIF le réglage « Body » de admin/themes/configure. Les vars NON pilotées (muted, bg-light, fonts) sont définies ici (sûr, jamais écrasé). */ :root { --text-muted : #797979; --bg-light : #FEF9EF; --bg-light-2 : #F1F4FA; --text-font : var(--font-body, "Raleway", system-ui, sans-serif); --title-font : var(--font-heading, "Raleway", system-ui, sans-serif); } html { scroll-behavior: smooth; } body { color : var(--body-text, #212529); background-color : var(--body-bg, #ffffff); font-family : var(--text-font); -webkit-font-smoothing : antialiased; -moz-osx-font-smoothing: grayscale; display : flex; flex-direction : column; min-height : 100vh; overflow-x : hidden; } h1, h2, h3 { font-family: var(--title-font); } a:not(.btn) { color: var(--link-color, var(--body-text, #111827)); text-decoration: none; } a:not(.btn):hover { text-decoration: none; } /* Helpers texte / fond */ .text-color { color: var(--body-text) !important; } .text-muted { color: var(--text-muted) !important; } .bg-light { background-color: var(--bg-light) !important; } .bg-light-1 { background-color: var(--bg-light) !important; } .bg-light-2 { background-color: var(--bg-light-2) !important; } .text-justify { text-align: justify !important; } /* Helpers layout */ .flex-center { display: flex; justify-content: center; align-items: center; } .flex-group { display: flex; flex-wrap: wrap; gap: 1rem; } .center-y { display: flex; flex-direction: column; justify-content: center; } .pointer { cursor: pointer; } .anchor { scroll-margin-top: 100px; } /* Helpers image */ .img-fit { object-fit: cover; width: 100%; height: 100%; } .img-contain { object-fit: contain; width: 100%; height: 100%; } /* ---- THEME LAYER : Nav / Footer / Cartes / boutons Bootstrap + utilitaires Consomme les vars pilotées par la config (Nav, Footer, Cards). Porté depuis themes/default/css/style.css (couche qui n'était pas dans le fichier servi → nav/footer/cartes utilisaient les défauts Bootstrap au lieu de tes réglages). */ :root { --bs-border-radius : var(--card-radius, 8px); --bs-border-color : var(--card-border, #e5e7eb); } /* Footer */ .site-footer { background: var(--footer-bg, #1a2130); color: var(--footer-text, #9ca3af); font-size: .875rem; } .site-footer a { color: var(--footer-text, #9ca3af); } .site-footer a:hover { color: #fff; } /* Cartes Bootstrap pilotées par la config */ .card { background: var(--card-bg, #fff); color: var(--card-text, #111827); border: var(--card-border-width, 1px) solid var(--card-border, #e5e7eb); border-radius: var(--card-radius, 8px); box-shadow: var(--card-shadow, 0 1px 4px rgba(0,0,0,.06)); } .card-img-top { border-radius: var(--card-radius, 8px) var(--card-radius, 8px) 0 0; object-fit: cover; } /* En-tête des modales & offcanvas piloté par la config (--panel-header-*) */ .modal-header, .offcanvas-header { background: var(--panel-header-bg, transparent); color: var(--panel-header-text, inherit); } .modal-header .modal-title, .offcanvas-header .offcanvas-title { color: var(--panel-header-text, inherit); } .modal-body, .offcanvas-body { background: var(--panel-body-bg, transparent); color: var(--panel-body-text, inherit); } .modal-footer, .offcanvas-footer { background: var(--panel-footer-bg, transparent); color: var(--panel-footer-text, inherit); } /* Bouton d'action (primary) dans une modale/offcanvas piloté par la config panneaux */ .modal-footer .btn-primary, .modal-body .btn-primary, .offcanvas-footer .btn-primary, .offcanvas-body .btn-primary { background-color: var(--panel-btn-bg, var(--btn-1-bg, var(--color-1, #2c7a6e))); border-color: var(--panel-btn-bg, var(--btn-1-bg, var(--color-1, #2c7a6e))); color: var(--panel-btn-text, #fff); } .modal-footer .btn-primary:hover, .modal-body .btn-primary:hover, .offcanvas-footer .btn-primary:hover, .offcanvas-body .btn-primary:hover { background-color: color-mix(in srgb, var(--panel-btn-bg, var(--btn-1-bg, var(--color-1, #2c7a6e))) 85%, #000); border-color: color-mix(in srgb, var(--panel-btn-bg, var(--btn-1-bg, var(--color-1, #2c7a6e))) 85%, #000); color: var(--panel-btn-text, #fff); } /* Bouton fermer : suit la couleur du texte d'en-tête (masque sur l'icône Bootstrap → visible sur fond clair ET foncé) */ .modal-header .btn-close, .offcanvas-header .btn-close { background-color: var(--panel-header-text, #000); background-image: none; opacity: 1; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center/1em auto no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center/1em auto no-repeat; } /* Boutons Bootstrap principal/secondaire (compat + suivent la palette) */ .btn-primary { background-color: var(--btn-primary-bg, var(--color-1, #2c7a6e)); border-color: var(--btn-primary-bg, var(--color-1, #2c7a6e)); color: var(--btn-primary-text, #fff); } .btn-primary:hover, .btn-primary:focus { background-color: var(--btn-primary-hover-bg, color-mix(in srgb, var(--btn-primary-bg, var(--color-1, #2c7a6e)) 85%, #000)); border-color: transparent; color: var(--btn-primary-text, #fff); } .btn-secondary, .btn-outline-secondary { background-color: var(--btn-secondary-bg, #fff); border-color: var(--btn-secondary-border, var(--color-2, #2c7a6e)); color: var(--btn-secondary-text, var(--color-2, #2c7a6e)); } .btn-secondary:hover, .btn-outline-secondary:hover { background-color: var(--btn-secondary-hover-bg, var(--color-2, #2c7a6e)); border-color: var(--btn-secondary-hover-bg, var(--color-2, #2c7a6e)); color: var(--btn-secondary-hover-text, #fff); } /* Focus / pagination liés à la marque */ /* Champs de formulaire pilotés par la config « Champs de formulaire » (--form-*) */ .form-control, .form-select { background-color: var(--form-bg, #fff); color: var(--form-color, #212529); border: var(--form-border-width, 1px) solid var(--form-border-color, #ced4da); border-radius: var(--form-radius, 4px); } .form-control:focus, .form-select:focus { background-color: var(--form-bg, #fff); color: var(--form-color, #212529); border-color: var(--form-focus-color, var(--color-1, #2c7a6e)); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--form-focus-color, var(--color-1, #2c7a6e)) 22%, transparent); } .page-link { color: var(--color-1, #2c7a6e); } .page-item.active .page-link { background-color: var(--color-1, #2c7a6e); border-color: var(--color-1, #2c7a6e); } /* ---- Variantes OUTLINE des 6 boutons (contour → plein au survol) --------- Tailles : combine avec Bootstrap → class="btn btn-1 btn-lg" / "btn btn-outline-3 btn-sm". */ .btn-outline-1, .btn-outline-2, .btn-outline-3, .btn-outline-4, .btn-outline-5, .btn-outline-6 { background-color: transparent; border-style: solid; border-width: 1px; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .btn-outline-1 { color: var(--color-1, #F8B11F); border-color: var(--color-1, #F8B11F); } .btn-outline-1:hover { background-color: var(--color-1, #F8B11F); color: var(--btn-1-color, #212529); } .btn-outline-2 { color: var(--color-2, #143F6F); border-color: var(--color-2, #143F6F); } .btn-outline-2:hover { background-color: var(--color-2, #143F6F); color: var(--btn-2-color, #ffffff); } .btn-outline-3 { color: var(--color-3, #EB5757); border-color: var(--color-3, #EB5757); } .btn-outline-3:hover { background-color: var(--color-3, #EB5757); color: var(--btn-3-color, #ffffff); } .btn-outline-4 { color: #495057; border-color: var(--color-4, #d0d5dd); } .btn-outline-4:hover { background-color: var(--color-4, #ffffff); color: var(--btn-4-color, #212529); } .btn-outline-5 { color: var(--color-5, #2B2E68); border-color: var(--color-5, #2B2E68); } .btn-outline-5:hover { background-color: var(--color-5, #2B2E68); color: var(--btn-5-color, #ffffff); } .btn-outline-6 { color: var(--color-6, #F4BD3D); border-color: var(--color-6, #F4BD3D); } .btn-outline-6:hover { background-color: var(--color-6, #F4BD3D); color: var(--btn-6-color, #212529); } /* ---- Utilitaires sémantiques (couleurs config, sans comportement) -------- */ .bg-nav { background-color: var(--nav-bg, #1a2130) !important; } .text-nav { color: var(--nav-text, #ffffff) !important; } .rounded-nav { border-radius: var(--nav-radius, 0) !important; } .bg-footer { background-color: var(--footer-bg, #1a2130) !important; } .text-footer { color: var(--footer-text, #9ca3af) !important; } .bg-card { background-color: var(--card-bg, #ffffff) !important; } .text-card { color: var(--card-text, #111827) !important; } .border-card { border-color: var(--card-border, #e5e7eb) !important; } .shadow-card { box-shadow: var(--card-shadow, 0 1px 4px rgba(0,0,0,.06)) !important; } .rounded-card{ border-radius: var(--card-radius, 8px) !important; } .theme-card { background: var(--card-bg, #fff); color: var(--card-text, #111827); border: var(--card-border-width, 1px) solid var(--card-border, #e5e7eb); border-radius: var(--card-radius, 8px); box-shadow: var(--card-shadow, 0 1px 4px rgba(0,0,0,.06)); } .text-brand { color: var(--color-1, #2c7a6e) !important; } .bg-brand { background-color: var(--color-1, #2c7a6e) !important; } .rounded-theme { border-radius: var(--card-radius, 8px) !important; } .img-cover { object-fit: cover; width: 100%; } .theme-promo-banner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .55rem 1rem; font-size: .875rem; font-weight: 500; text-align: center; } /* ===================== FIN DESIGN SYSTEM ================================= */ /* ========================================================== Styles front partagés de tous les modules Génériques : .module-* (carte, grille, détail, pagination…) Wrapper de page par module : .{module}-index / .{module}-detail → ex. .module-index, .module-detail Surcharge ciblée par module possible via le wrapper : ex. .module-index .module-card__body { ... } ========================================================== */ /* ---------------------------------------------------------- Layout générique avec sidebar ---------------------------------------------------------- */ .modules-layout { display: flex; gap: 2rem; align-items: flex-start; } /* Le sens est porté par l'ORDRE DOM (la vue place l'aside avant/après .modules-main selon left/right) : un flex-direction:row suffit pour les deux. NE PAS remettre row-reverse sur sidebar-right, sinon la sidebar repasse à gauche. */ .modules-layout--sidebar-left { flex-direction: row; } .modules-layout--sidebar-right { flex-direction: row; } /* Pleine largeur (sans sidebar) : en colonne, align-items:flex-start (hérité) empêcherait .modules-main de s'étirer → stretch pour occuper toute la largeur. */ .modules-layout--full { flex-direction: column; align-items: stretch; } .modules-main { flex: 1; min-width: 0; } .modules-sidebar { width: 280px; flex-shrink: 0; } @media (max-width: 991px) { .modules-layout--sidebar-left, .modules-layout--sidebar-right { flex-direction: column; } .modules-sidebar { width: 100%; } } /* ---------------------------------------------------------- Vue liste — générique (.module-*) Wrapper de page propre au module (ex. .module-index) ---------------------------------------------------------- */ .module-index { padding: 2rem 0; } .module-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; } .module-title { font-size: 2rem; font-weight: 700; margin: 0; } .module-search .input-group { width: min(320px, 100%); } .module-search .form-control { border-color: #ddd; } .module-search .form-control:focus { border-color: var(--color-primary, #f5a623); box-shadow: none; } .module-search .btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ddd; border-left: 0; background: #fff; color: #333; line-height: 1; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .module-search .btn:hover { background: var(--color-primary, #f5a623); border-color: var(--color-primary, #f5a623); color: #fff; } .module-search .btn i { font-size: 1rem; } .module-empty { text-align: center; padding: 3rem; color: #999; } .module-search-label { font-style: italic; margin-bottom: 1rem; color: #666; } /* Grilles */ .module-grid { display: grid; gap: 1.5rem; } .module-grid--cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .module-grid--grid { grid-template-columns: repeat(3, 1fr); } .module-grid--list { grid-template-columns: 1fr; } .module-grid--masonry { columns: 3; column-gap: 1.5rem; } .module-grid--masonry .module-card { break-inside: avoid; margin-bottom: 1.5rem; } /* Cartes à HAUTEUR ÉGALE (grille CSS `.module-grid--cards/--list` + grille Bootstrap `.row.module-grid--grid`) : la carte remplit sa cellule (étirement natif en grille CSS ; motif h-100 en .row Bootstrap), le corps s'étend, « Lire la suite » calé en bas. Exclut le masonry (colonnes). */ .module-grid:not(.module-grid--masonry) > .module-card, .module-grid--grid > [class*="col"] > .module-card { height: 100%; } .module-grid:not(.module-grid--masonry) .module-card, .module-grid--grid .module-card { display: flex; flex-direction: column; } .module-grid:not(.module-grid--masonry) .module-card__body, .module-grid--grid .module-card__body { display: flex; flex-direction: column; flex: 1 1 auto; } .module-grid:not(.module-grid--masonry) .module-card__more, .module-grid--grid .module-card__more { margin-top: auto; align-self: flex-start; } /* CARROUSEL de cartes () : cartes à la MÊME HAUTEUR. awcarousel met `align-items:flex-start` sur la piste (.awc-wrapper) → on force `stretch` pour cette grille, et la carte remplit son slide. La carte n'est PAS enfant direct du .module-grid (elle est dans ), d'où ces règles dédiées en plus de celles ci-dessus. */ .module-grid--carousel .awc-wrapper { align-items: stretch; } .module-grid--carousel aw-slide.awc-slide { display: flex; height: auto; } .module-grid--carousel aw-slide .module-card { height: 100%; width: 100%; display: flex; flex-direction: column; } .module-grid--carousel aw-slide .module-card__body { display: flex; flex-direction: column; flex: 1 1 auto; } .module-grid--carousel aw-slide .module-card__more { margin-top: auto; align-self: flex-start; } /* Mode LISTE : carte HORIZONTALE (image à gauche, contenu à droite), pleine largeur. ⚠️ Spécificité `.module-grid.module-grid--list` (0,3,0) pour battre la règle de hauteur égale `.module-grid:not(.module-grid--masonry) .module-card` (0,3,0 aussi, mais placée AVANT → celle-ci gagne car plus loin dans le fichier). */ .module-grid.module-grid--list .module-card { flex-direction: row; align-items: stretch; } .module-grid.module-grid--list .module-card__media { flex: 0 0 38%; max-width: 38%; aspect-ratio: auto; /* la hauteur vient de l'étirement flex (align-items:stretch) */ align-self: stretch; } .module-grid.module-grid--list .module-card__body { flex: 1 1 auto; } @media (max-width: 575.98px) { /* Repli mobile : on repasse en carte verticale classique. */ .module-grid.module-grid--list .module-card { flex-direction: column; } .module-grid.module-grid--list .module-card__media { flex-basis: auto; max-width: none; aspect-ratio: 16 / 9; } } /* ── Menu d'actions de carte PARTAGÉ (.aw-card-actions) : composant uniforme entre modules (Blogs, …). Aligné visuellement sur le composant Shops `.shops-card-actions` (modules/Shops). Bouton « ⋮ » qui déplie Favori/Partage au survol / focus / clic (.is-open posé par app.js). Le module Shops garde son propre composant + extras (liste d'envie, alerte stock). ── */ .module-card { position: relative; } .aw-card-actions { position: absolute; top: 8px; right: 8px; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .aw-card-action { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #333; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: transform .12s, background .12s, color .12s; font-size: .9rem; line-height: 1; } .aw-card-action:hover { transform: scale(1.08); background: #fff; } .aw-card-action.is-active { background: #e11d48; color: #fff; } .aw-card-action:disabled { opacity: .6; cursor: default; } .aw-card-actions__menu { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-top: 6px; opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s; } .aw-card-actions:hover .aw-card-actions__menu, .aw-card-actions:focus-within .aw-card-actions__menu, .aw-card-actions.is-open .aw-card-actions__menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .aw-card-actions:hover .aw-card-toggle, .aw-card-actions.is-open .aw-card-toggle { background: #111; color: #fff; } /* Carte */ /* Connecté à la config « Cards » (--card-*) — plus de valeurs codées en dur. */ .module-card { background: var(--card-bg, #fff); color: var(--card-text, inherit); border: var(--card-border-width, 1px) solid var(--card-border, transparent); border-radius: var(--card-radius, 8px); box-shadow: var(--card-shadow, 0 2px 8px rgba(0,0,0,.08)); overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; } .module-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow, 0 4px 16px rgba(0,0,0,.12)); filter: brightness(.99); } .module-card__color { height: 4px; } .module-card__media { display: block; aspect-ratio: var(--module-img-ratio, 16 / 9); overflow: hidden; background: #f0f0f0; } .module-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .module-card:hover .module-card__media img { transform: scale(1.04); } .module-card__body { padding: 1.25rem; } .module-card__date { font-size: .8rem; color: #6c757d; /* >= 4.5:1 sur fond blanc (AA) */ display: block; margin-bottom: .4rem; } .module-card__title { font-size: 1.1rem; font-weight: 600; margin-bottom: .6rem; line-height: 1.4; } .module-card__title a { color: inherit; text-decoration: none; } .module-card__title a:hover { color: var(--brand-color, var(--bs-primary, #0d6efd)); } .module-card__excerpt { font-size: .9rem; color: #555; margin-bottom: 1rem; line-height: 1.5; } .module-card__more { font-size: .85rem; font-weight: 600; color: var(--brand-color, var(--bs-primary, #0d6efd)); text-decoration: none; } .module-card__more:hover { text-decoration: underline; } /* Pagination */ .module-pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; } .module-pagination__item { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; color: #333; font-size: .9rem; } .module-pagination__item.active, .module-pagination__item:hover { background: var(--brand-color, var(--bs-primary, #0d6efd)); color: #fff; border-color: var(--brand-color, var(--bs-primary, #0d6efd)); } /* Layout avec sidebar — grille adaptée */ .modules-layout--sidebar-left .module-grid--cards, .modules-layout--sidebar-right .module-grid--cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .modules-layout--sidebar-left .module-grid--grid, .modules-layout--sidebar-right .module-grid--grid { grid-template-columns: repeat(2, 1fr); } .modules-layout--sidebar-left .module-grid--masonry, .modules-layout--sidebar-right .module-grid--masonry { columns: 2; } /* ---------------------------------------------------------- Vue détail — générique (.module-detail__*) Wrapper de page propre au module (ex. .module-detail) ---------------------------------------------------------- */ .module-detail { max-width: 800px; margin: 0 auto; padding: 2rem 0; } .module-detail__header { margin-bottom: 2rem; } .module-detail__category { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-color, var(--bs-primary, #0d6efd)); } .module-detail__title { font-size: 2.2rem; font-weight: 700; margin: .5rem 0; line-height: 1.3; } .module-detail__meta { font-size: .9rem; color: #888; margin-bottom: 1rem; } .module-detail__excerpt { font-size: 1.1rem; color: #555; font-style: italic; } .module-detail__cover { margin: 1.5rem 0; border-radius: 8px; overflow: hidden; } .module-detail__cover img { width: 100%; height: auto; display: block; } .module-detail__content { line-height: 1.8; font-size: 1rem; color: #333; } .module-detail__content img { max-width: 100%; height: auto; border-radius: 4px; } .module-detail__video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 2rem 0; border-radius: 8px; } .module-detail__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .module-detail__contact { background: #f8f9fa; padding: 1.25rem; border-radius: 8px; margin: 2rem 0; } .module-detail__contact p { margin: .3rem 0; } .module-detail__socials { display: flex; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; } .module-detail__socials a { font-size: .85rem; font-weight: 600; text-decoration: none; padding: .3rem .8rem; border-radius: 4px; background: #f0f0f0; color: #333; } .module-detail__nav { display: flex; justify-content: space-between; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #eee; gap: 1rem; flex-wrap: wrap; } .module-detail__nav a { text-decoration: none; color: var(--brand-color, var(--bs-primary, #0d6efd)); font-size: .9rem; max-width: 45%; } .module-detail__nav-next { text-align: right; } .module-detail__faqs { margin: 2rem 0; } .module-detail__faqs h2 { font-size: 1.4rem; margin-bottom: 1rem; } .module-faq-item { border: 1px solid #e5e7eb; border-radius: 6px; margin-bottom: .5rem; } .module-faq-item summary { padding: 1rem; font-weight: 600; cursor: pointer; list-style: none; } .module-faq-item summary::before { content: '+ '; color: var(--brand-color, var(--bs-primary, #0d6efd)); } .module-faq-item[open] summary::before { content: '− '; } .module-faq-item p { padding: 0 1rem 1rem; color: #555; line-height: 1.6; margin: 0; } /* Documents rattachés (PDF, fichiers…) */ .module-detail__documents { margin: 2rem 0; } .module-detail__documents-title { font-size: 1.4rem; margin-bottom: 1rem; } .module-detail__documents-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .module-detail__document { display: flex; align-items: center; gap: .25rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; transition: border-color .15s, box-shadow .15s; } .module-detail__document:hover { border-color: var(--brand-color, var(--bs-primary, #0d6efd)); box-shadow: 0 1px 6px rgba(0,0,0,.06); } .module-detail__document-link { flex: 1 1 auto; display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; text-decoration: none; color: #222; min-width: 0; } .module-detail__document-link > i { font-size: 1.4rem; color: var(--brand-color, var(--bs-primary, #0d6efd)); flex-shrink: 0; } .module-detail__document-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .module-detail__document-meta { margin-left: auto; padding-left: 1rem; font-size: .8rem; color: #888; white-space: nowrap; flex-shrink: 0; } .module-detail__document-dl { display: flex; align-items: center; justify-content: center; width: 44px; align-self: stretch; border-left: 1px solid #eee; color: #555; text-decoration: none; border-radius: 0 8px 8px 0; } .module-detail__document-dl:hover { background: #f6f7f9; color: var(--brand-color, var(--bs-primary, #0d6efd)); } /* ---------------------------------------------------------- Vue détail — TEMPLATES d'affichage (.module-detail--*) Choix résolu côté serveur : publication (P1) > catégorie (P2) > module (P3). Chaque variante réutilise les mêmes blocs .module-detail__*. ---------------------------------------------------------- */ /* — basic : colonne centrée classique (= comportement par défaut) — */ .module-detail--basic { max-width: 800px; } /* — hero : couverture pleine largeur en bannière, en-tête en carte flottante — */ .module-detail--hero { max-width: 1080px; display: flex; flex-direction: column; } .module-detail--hero .module-detail__cover { order: -1; margin: 0; border-radius: 0 0 18px 18px; } .module-detail--hero .module-detail__cover img { max-height: 520px; object-fit: cover; } .module-detail--hero .module-detail__header { max-width: 780px; margin: -5rem auto 2.25rem; background: var(--bs-body-bg, #fff); padding: 1.75rem 2rem; border-radius: 16px; box-shadow: 0 12px 40px rgba(16,24,40,.14); text-align: center; position: relative; z-index: 2; } .module-detail--hero .module-detail__title { font-size: 2.6rem; } .module-detail--hero > *:not(.module-detail__cover):not(.module-detail__header) { width: 100%; max-width: 780px; margin-left: auto; margin-right: auto; } /* — split : couverture et en-tête côte à côte, puis contenu pleine largeur — */ .module-detail--split { max-width: 1140px; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; } .module-detail--split > * { grid-column: 1 / -1; } .module-detail--split .module-detail__cover { grid-column: 1; grid-row: 1; margin: 0; height: 100%; } .module-detail--split .module-detail__cover img { height: 100%; object-fit: cover; } .module-detail--split .module-detail__header { grid-column: 2; grid-row: 1; margin: 0; } /* — full_sidebar : contenu à gauche, contact/réseaux/documents en rail droit — */ .module-detail--full_sidebar { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: .5rem 2.5rem; align-items: start; } .module-detail--full_sidebar .module-detail__header, .module-detail--full_sidebar .module-detail__cover, .module-detail--full_sidebar .module-detail__nav { grid-column: 1 / -1; } .module-detail--full_sidebar .module-detail__content, .module-detail--full_sidebar [class*="module-detail__content-"], .module-detail--full_sidebar .module-detail__video, .module-detail--full_sidebar .module-detail__faqs { grid-column: 1; } .module-detail--full_sidebar .module-detail__contact, .module-detail--full_sidebar .module-detail__socials, .module-detail--full_sidebar .module-detail__documents { grid-column: 2; margin: 0 0 1.25rem; } .module-detail--full_sidebar .module-detail__contact { position: sticky; top: 1rem; } /* — magazine : éditorial, gros titre serif, lettrine, texte en 2 colonnes — */ .module-detail--magazine { max-width: 900px; } .module-detail--magazine .module-detail__header { text-align: center; border-bottom: 3px double #111; padding-bottom: 1.5rem; } .module-detail--magazine .module-detail__title { font-family: Georgia, 'Times New Roman', serif; font-size: 3rem; line-height: 1.12; } .module-detail--magazine .module-detail__excerpt { font-size: 1.25rem; } .module-detail--magazine .module-detail__content { column-count: 2; column-gap: 2.5rem; text-align: justify; } .module-detail--magazine .module-detail__content img { break-inside: avoid; } .module-detail--magazine .module-detail__content > *:first-child::first-letter { font-family: Georgia, serif; font-weight: 700; font-size: 3.4em; line-height: .8; float: left; padding: .05em .12em 0 0; color: var(--brand-color, var(--bs-primary, #0d6efd)); } /* — minimal : sobre, mesure étroite, sans fond, beaucoup de blanc — */ .module-detail--minimal { max-width: 680px; } .module-detail--minimal .module-detail__category { color: #999; font-weight: 600; } .module-detail--minimal .module-detail__title { font-size: 1.9rem; font-weight: 600; } .module-detail--minimal .module-detail__meta { font-size: .8rem; } .module-detail--minimal .module-detail__excerpt { font-style: normal; color: #666; } .module-detail--minimal .module-detail__cover { border-radius: 0; } .module-detail--minimal .module-detail__contact { background: transparent; border: 1px solid #eee; } /* — modern : audacieux, arrondi, ombres, accents dégradés/pilules — */ .module-detail--modern { max-width: 880px; } .module-detail--modern .module-detail__cover { border-radius: 20px; box-shadow: 0 20px 50px rgba(16,24,40,.18); } .module-detail--modern .module-detail__category { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--brand-color, #0d6efd) 12%, transparent); } .module-detail--modern .module-detail__title { font-size: 2.7rem; font-weight: 800; letter-spacing: -.02em; background: linear-gradient(90deg, var(--brand-color, var(--bs-primary, #0d6efd)), #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; } .module-detail--modern .module-detail__meta { display: inline-flex; gap: .5rem; padding: .35rem .85rem; border-radius: 999px; background: #f4f5f7; } .module-detail--modern .module-detail__content { font-size: 1.05rem; } .module-detail--modern .module-detail__contact { border-radius: 16px; background: #f7f8fa; } @media (max-width: 992px) { .module-detail--split, .module-detail--full_sidebar { grid-template-columns: 1fr; } .module-detail--magazine .module-detail__content { column-count: 1; } } @media (max-width: 768px) { .module-detail--hero .module-detail__header { margin-top: -3rem; } .module-detail--hero .module-detail__title, .module-detail--magazine .module-detail__title, .module-detail--modern .module-detail__title { font-size: 1.9rem; } } /* ---------------------------------------------------------- Sidebar widgets ---------------------------------------------------------- */ .modules-sidebar__widget { margin-bottom: 1.5rem; } .modules-sidebar__widget-title { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--brand-color, var(--bs-primary, #0d6efd)); } /* ---------------------------------------------------------- Responsive ---------------------------------------------------------- */ @media (max-width: 768px) { .module-grid--grid { grid-template-columns: 1fr 1fr; } .module-grid--masonry { columns: 2; } .module-detail { padding: 1rem; } .module-detail__title { font-size: 1.6rem; } } @media (max-width: 480px) { .module-grid--grid, .module-grid--cards { grid-template-columns: 1fr; } .module-grid--masonry { columns: 1; } } /* =================================================================== Auth pages (login / forgot-password / reset-password / 2FA) Generic, theme-targetable classes — built on Bootstrap utilities. =================================================================== */ .auth-section { display : flex; align-items : center; min-height : calc(100vh - var(--header-height, 0px)); padding : 4rem 0; } .auth-card { width : 100%; border : 0; border-radius: 1rem; box-shadow : 0 1rem 3rem rgba(0, 0, 0, .08); } .auth-card .card-body { padding: 2.5rem; } .auth-card__header { margin-bottom: 1.5rem; } .auth-card__title { font-size : 1.5rem; font-weight : 700; margin-bottom: .5rem; } .auth-card__subtitle { color : #6c757d; font-size: .9rem; margin : 0; } .auth-form .btn { width: 100%; } .auth-links { margin-top: 1.25rem; text-align: center; font-size : .9rem; } .auth-link { color : var(--primary, #2C7A6E); text-decoration: none; } .auth-link:hover { text-decoration: underline; } .auth-code-input { text-align : center; letter-spacing: .5em; font-size : 1.25rem; } .auth-honeypot { position: absolute; left : -9999px; opacity : 0; height : 0; width : 0; } /* En-tête coloré + champs de la carte connexion/inscription. Déplacé du