@dsrc-cm/core 0.1.0

package/src/layout/entete/entete.css

@@ -0,0 +1,130 @@
+/**
+ * DSRC Entete (Header) Component
+ *
+ * Usage:
+ * <header class="dsrc-entete">
+ *   <div class="dsrc-entete__inner">
+ *     <div class="dsrc-drapeau">
+ *       <div class="dsrc-drapeau__vert"></div>
+ *       <div class="dsrc-drapeau__rouge">
+ *         <span class="dsrc-drapeau__etoile"></span>
+ *       </div>
+ *       <div class="dsrc-drapeau__jaune"></div>
+ *     </div>
+ *     <div class="dsrc-entete__texte">
+ *       <h1 class="dsrc-entete__titre">Titre</h1>
+ *       <p class="dsrc-entete__sous-titre">Sous-titre</p>
+ *     </div>
+ *     <div class="dsrc-entete__actions">
+ *       <!-- Buttons, search, etc. -->
+ *     </div>
+ *   </div>
+ * </header>
+ */
+
+.dsrc-entete {
+  background-color: var(--dsrc-color-blanc);
+  border-bottom: 1px solid var(--dsrc-color-gris-200);
+}
+
+.dsrc-entete__inner {
+  max-width: var(--dsrc-layout-max-width);
+  margin: 0 auto;
+  padding: var(--dsrc-spacing-5);
+  display: flex;
+  align-items: center;
+  gap: var(--dsrc-spacing-5);
+}
+
+.dsrc-entete__texte {
+  flex: 1;
+}
+
+.dsrc-entete__titre {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-body);
+  font-weight: var(--dsrc-font-weight-bold);
+  color: var(--dsrc-color-noir);
+  line-height: var(--dsrc-font-line-height-snug);
+  margin: 0;
+}
+
+.dsrc-entete__sous-titre {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  color: var(--dsrc-color-gris-600);
+  margin: var(--dsrc-spacing-1) 0 0;
+}
+
+/* Actions area (buttons, search) */
+.dsrc-entete__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--dsrc-spacing-3);
+  flex-shrink: 0;
+}
+
+/* Drapeau Component */
+.dsrc-drapeau {
+  display: flex;
+  width: 42px;
+  height: 28px;
+  flex-shrink: 0;
+  border: 1px solid var(--dsrc-color-gris-200);
+}
+
+.dsrc-drapeau__vert {
+  flex: 1;
+  background-color: var(--dsrc-color-drapeau-vert);
+}
+
+.dsrc-drapeau__rouge {
+  flex: 1;
+  background-color: var(--dsrc-color-drapeau-rouge);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dsrc-drapeau__jaune {
+  flex: 1;
+  background-color: var(--dsrc-color-drapeau-jaune);
+}
+
+.dsrc-drapeau__etoile {
+  display: block;
+  width: 10px;
+  height: 10px;
+  background-color: var(--dsrc-color-drapeau-jaune);
+  clip-path: polygon(
+    50% 0%,
+    61% 35%,
+    98% 35%,
+    68% 57%,
+    79% 91%,
+    50% 70%,
+    21% 91%,
+    32% 57%,
+    2% 35%,
+    39% 35%
+  );
+}
+
+/* Responsive: collapsible header on mobile */
+@media (max-width: 47.999em) {
+  .dsrc-entete__inner {
+    flex-wrap: wrap;
+    padding: var(--dsrc-spacing-3);
+    gap: var(--dsrc-spacing-3);
+  }
+
+  .dsrc-entete__texte {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .dsrc-entete__actions {
+    width: 100%;
+    order: 3;
+  }
+}

package/src/layout/footer/footer.css

@@ -0,0 +1,107 @@
+/**
+ * DSRC Footer Component
+ *
+ * Usage:
+ * <footer class="dsrc-footer">
+ *   <div class="dsrc-footer__inner">
+ *     <div class="dsrc-footer__bloc">
+ *       <h3 class="dsrc-footer__titre">Titre</h3>
+ *       <p class="dsrc-footer__texte">Description</p>
+ *     </div>
+ *     <div class="dsrc-footer__bloc">
+ *       <h3 class="dsrc-footer__titre">Liens</h3>
+ *       <nav class="dsrc-footer__liens">
+ *         <a href="#" class="dsrc-footer__lien">Lien</a>
+ *       </nav>
+ *     </div>
+ *   </div>
+ *   <div class="dsrc-footer__bas">
+ *     <span>Copyright</span>
+ *     <span>Credits</span>
+ *   </div>
+ * </footer>
+ */
+
+.dsrc-footer {
+  background-color: var(--dsrc-color-noir);
+  color: rgba(255, 255, 255, 0.55);
+  padding: var(--dsrc-spacing-7) var(--dsrc-spacing-5);
+  margin-top: var(--dsrc-spacing-8);
+}
+
+.dsrc-footer__inner {
+  max-width: var(--dsrc-layout-max-width);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: var(--dsrc-spacing-7);
+}
+
+.dsrc-footer__bloc {
+  min-width: 0;
+}
+
+.dsrc-footer__titre {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  font-weight: var(--dsrc-font-weight-semibold);
+  color: var(--dsrc-color-blanc);
+  margin: 0 0 var(--dsrc-spacing-3);
+}
+
+.dsrc-footer__texte {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  line-height: var(--dsrc-font-line-height-loose);
+  margin: 0;
+}
+
+.dsrc-footer__liens {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsrc-spacing-2);
+}
+
+.dsrc-footer__lien {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  color: rgba(255, 255, 255, 0.5);
+  text-decoration: none;
+  transition: color var(--dsrc-transition-duration-fast) ease;
+}
+
+.dsrc-footer__lien:hover,
+.dsrc-footer__lien:active {
+  color: var(--dsrc-color-blanc);
+}
+
+.dsrc-footer__lien:focus-visible {
+  outline: var(--dsrc-outline-width) solid rgba(255, 255, 255, 0.5);
+  outline-offset: var(--dsrc-outline-offset);
+}
+
+.dsrc-footer__bas {
+  max-width: var(--dsrc-layout-max-width);
+  margin: var(--dsrc-spacing-5) auto 0;
+  padding-top: var(--dsrc-spacing-5);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--dsrc-spacing-3);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-micro);
+  color: rgba(255, 255, 255, 0.3);
+}
+
+@media (max-width: 768px) {
+  .dsrc-footer__inner {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 576px) {
+  .dsrc-footer__inner {
+    grid-template-columns: 1fr;
+  }
+}

package/src/layout/grid/grid.css

@@ -0,0 +1,197 @@
+/**
+ * DSRC Grid System
+ *
+ * A responsive 12-column CSS Grid layout system.
+ * Mobile-first with breakpoints at sm (576px), md (768px), lg (1024px).
+ *
+ * Usage:
+ * <div class="dsrc-grid">
+ *   <div class="dsrc-col-12 dsrc-col-md-6 dsrc-col-lg-4">Col 1</div>
+ *   <div class="dsrc-col-12 dsrc-col-md-6 dsrc-col-lg-4">Col 2</div>
+ *   <div class="dsrc-col-12 dsrc-col-md-12 dsrc-col-lg-4">Col 3</div>
+ * </div>
+ *
+ * With offsets:
+ * <div class="dsrc-grid">
+ *   <div class="dsrc-col-6 dsrc-offset-3">Centered column</div>
+ * </div>
+ *
+ * Nested grids:
+ * <div class="dsrc-grid">
+ *   <div class="dsrc-col-8">
+ *     <div class="dsrc-grid">
+ *       <div class="dsrc-col-6">Nested 1</div>
+ *       <div class="dsrc-col-6">Nested 2</div>
+ *     </div>
+ *   </div>
+ * </div>
+ */
+
+/* ==========================================================================
+   Row container
+   ========================================================================== */
+
+.dsrc-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--dsrc-spacing-4);
+  width: 100%;
+}
+
+/* No gutter variant */
+.dsrc-grid--no-gutter {
+  gap: 0;
+}
+
+/* Row alignment variants */
+.dsrc-grid--center {
+  align-items: center;
+}
+
+.dsrc-grid--end {
+  align-items: end;
+}
+
+.dsrc-grid--stretch {
+  align-items: stretch;
+}
+
+/* ==========================================================================
+   Default column classes (mobile-first, no breakpoint prefix)
+   ========================================================================== */
+
+/* Auto equal-width column */
+.dsrc-col {
+  grid-column: span 1;
+}
+
+/* Auto-sized column (shrink to content) */
+.dsrc-col-auto {
+  grid-column: auto;
+}
+
+/* Explicit span columns: 1-12 */
+.dsrc-col-1  { grid-column: span 1; }
+.dsrc-col-2  { grid-column: span 2; }
+.dsrc-col-3  { grid-column: span 3; }
+.dsrc-col-4  { grid-column: span 4; }
+.dsrc-col-5  { grid-column: span 5; }
+.dsrc-col-6  { grid-column: span 6; }
+.dsrc-col-7  { grid-column: span 7; }
+.dsrc-col-8  { grid-column: span 8; }
+.dsrc-col-9  { grid-column: span 9; }
+.dsrc-col-10 { grid-column: span 10; }
+.dsrc-col-11 { grid-column: span 11; }
+.dsrc-col-12 { grid-column: span 12; }
+
+/* ==========================================================================
+   Default offsets (mobile-first, no breakpoint prefix)
+   ========================================================================== */
+
+.dsrc-offset-1  { grid-column-start: 2; }
+.dsrc-offset-2  { grid-column-start: 3; }
+.dsrc-offset-3  { grid-column-start: 4; }
+.dsrc-offset-4  { grid-column-start: 5; }
+.dsrc-offset-5  { grid-column-start: 6; }
+.dsrc-offset-6  { grid-column-start: 7; }
+.dsrc-offset-7  { grid-column-start: 8; }
+.dsrc-offset-8  { grid-column-start: 9; }
+.dsrc-offset-9  { grid-column-start: 10; }
+.dsrc-offset-10 { grid-column-start: 11; }
+.dsrc-offset-11 { grid-column-start: 12; }
+
+/* ==========================================================================
+   sm breakpoint (>= 576px)
+   ========================================================================== */
+
+@media (min-width: 576px) {
+  .dsrc-col-sm-1  { grid-column: span 1; }
+  .dsrc-col-sm-2  { grid-column: span 2; }
+  .dsrc-col-sm-3  { grid-column: span 3; }
+  .dsrc-col-sm-4  { grid-column: span 4; }
+  .dsrc-col-sm-5  { grid-column: span 5; }
+  .dsrc-col-sm-6  { grid-column: span 6; }
+  .dsrc-col-sm-7  { grid-column: span 7; }
+  .dsrc-col-sm-8  { grid-column: span 8; }
+  .dsrc-col-sm-9  { grid-column: span 9; }
+  .dsrc-col-sm-10 { grid-column: span 10; }
+  .dsrc-col-sm-11 { grid-column: span 11; }
+  .dsrc-col-sm-12 { grid-column: span 12; }
+
+  .dsrc-offset-sm-0  { grid-column-start: auto; }
+  .dsrc-offset-sm-1  { grid-column-start: 2; }
+  .dsrc-offset-sm-2  { grid-column-start: 3; }
+  .dsrc-offset-sm-3  { grid-column-start: 4; }
+  .dsrc-offset-sm-4  { grid-column-start: 5; }
+  .dsrc-offset-sm-5  { grid-column-start: 6; }
+  .dsrc-offset-sm-6  { grid-column-start: 7; }
+  .dsrc-offset-sm-7  { grid-column-start: 8; }
+  .dsrc-offset-sm-8  { grid-column-start: 9; }
+  .dsrc-offset-sm-9  { grid-column-start: 10; }
+  .dsrc-offset-sm-10 { grid-column-start: 11; }
+  .dsrc-offset-sm-11 { grid-column-start: 12; }
+}
+
+/* ==========================================================================
+   md breakpoint (>= 768px)
+   ========================================================================== */
+
+@media (min-width: 768px) {
+  .dsrc-col-md-1  { grid-column: span 1; }
+  .dsrc-col-md-2  { grid-column: span 2; }
+  .dsrc-col-md-3  { grid-column: span 3; }
+  .dsrc-col-md-4  { grid-column: span 4; }
+  .dsrc-col-md-5  { grid-column: span 5; }
+  .dsrc-col-md-6  { grid-column: span 6; }
+  .dsrc-col-md-7  { grid-column: span 7; }
+  .dsrc-col-md-8  { grid-column: span 8; }
+  .dsrc-col-md-9  { grid-column: span 9; }
+  .dsrc-col-md-10 { grid-column: span 10; }
+  .dsrc-col-md-11 { grid-column: span 11; }
+  .dsrc-col-md-12 { grid-column: span 12; }
+
+  .dsrc-offset-md-0  { grid-column-start: auto; }
+  .dsrc-offset-md-1  { grid-column-start: 2; }
+  .dsrc-offset-md-2  { grid-column-start: 3; }
+  .dsrc-offset-md-3  { grid-column-start: 4; }
+  .dsrc-offset-md-4  { grid-column-start: 5; }
+  .dsrc-offset-md-5  { grid-column-start: 6; }
+  .dsrc-offset-md-6  { grid-column-start: 7; }
+  .dsrc-offset-md-7  { grid-column-start: 8; }
+  .dsrc-offset-md-8  { grid-column-start: 9; }
+  .dsrc-offset-md-9  { grid-column-start: 10; }
+  .dsrc-offset-md-10 { grid-column-start: 11; }
+  .dsrc-offset-md-11 { grid-column-start: 12; }
+}
+
+/* ==========================================================================
+   lg breakpoint (>= 1024px)
+   ========================================================================== */
+
+@media (min-width: 1024px) {
+  .dsrc-col-lg-1  { grid-column: span 1; }
+  .dsrc-col-lg-2  { grid-column: span 2; }
+  .dsrc-col-lg-3  { grid-column: span 3; }
+  .dsrc-col-lg-4  { grid-column: span 4; }
+  .dsrc-col-lg-5  { grid-column: span 5; }
+  .dsrc-col-lg-6  { grid-column: span 6; }
+  .dsrc-col-lg-7  { grid-column: span 7; }
+  .dsrc-col-lg-8  { grid-column: span 8; }
+  .dsrc-col-lg-9  { grid-column: span 9; }
+  .dsrc-col-lg-10 { grid-column: span 10; }
+  .dsrc-col-lg-11 { grid-column: span 11; }
+  .dsrc-col-lg-12 { grid-column: span 12; }
+
+  .dsrc-offset-lg-0  { grid-column-start: auto; }
+  .dsrc-offset-lg-1  { grid-column-start: 2; }
+  .dsrc-offset-lg-2  { grid-column-start: 3; }
+  .dsrc-offset-lg-3  { grid-column-start: 4; }
+  .dsrc-offset-lg-4  { grid-column-start: 5; }
+  .dsrc-offset-lg-5  { grid-column-start: 6; }
+  .dsrc-offset-lg-6  { grid-column-start: 7; }
+  .dsrc-offset-lg-7  { grid-column-start: 8; }
+  .dsrc-offset-lg-8  { grid-column-start: 9; }
+  .dsrc-offset-lg-9  { grid-column-start: 10; }
+  .dsrc-offset-lg-10 { grid-column-start: 11; }
+  .dsrc-offset-lg-11 { grid-column-start: 12; }
+}

package/src/layout/hero/hero.css

@@ -0,0 +1,86 @@
+/**
+ * DSRC Hero Section
+ *
+ * Banniere d'accroche affichee en haut des pages principales.
+ * Fond vert primaire avec titre, description et metadonnees.
+ *
+ * Usage:
+ * <section class="dsrc-hero">
+ *   <div class="dsrc-hero__inner">
+ *     <h1 class="dsrc-hero__titre">Titre de la page</h1>
+ *     <p class="dsrc-hero__description">Description courte de la page.</p>
+ *     <p class="dsrc-hero__meta">Version 0.1.0</p>
+ *   </div>
+ * </section>
+ */
+
+/* ---------------------------------------------------------------------------
+ * Hero root
+ * ------------------------------------------------------------------------ */
+
+.dsrc-hero {
+  background-color: var(--dsrc-color-primaire);
+  color: var(--dsrc-color-blanc);
+  padding: var(--dsrc-spacing-8) var(--dsrc-spacing-5);
+}
+
+/* ---------------------------------------------------------------------------
+ * Inner container
+ * ------------------------------------------------------------------------ */
+
+.dsrc-hero__inner {
+  max-width: var(--dsrc-layout-max-width);
+  margin: 0 auto;
+}
+
+/* ---------------------------------------------------------------------------
+ * Title
+ *
+ * Uses clamp() for fluid typography that scales between mobile and desktop
+ * without a separate breakpoint.  The max-width is expressed relative to
+ * the layout container so the title never stretches uncomfortably wide on
+ * large screens while still being free to fill mobile viewports.
+ * ------------------------------------------------------------------------ */
+
+.dsrc-hero__titre {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: clamp(var(--dsrc-font-size-h2), 4vw, var(--dsrc-font-size-h1));
+  font-weight: var(--dsrc-font-weight-bold);
+  line-height: var(--dsrc-font-line-height-tight);
+  max-width: 52ch;
+  margin: 0 0 var(--dsrc-spacing-4);
+}
+
+/* ---------------------------------------------------------------------------
+ * Description
+ * ------------------------------------------------------------------------ */
+
+.dsrc-hero__description {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-body);
+  color: rgba(255, 255, 255, 0.75);
+  max-width: 48ch;
+  line-height: var(--dsrc-font-line-height-loose);
+  margin: 0 0 var(--dsrc-spacing-5);
+}
+
+/* ---------------------------------------------------------------------------
+ * Meta line (version, date, etc.)
+ * ------------------------------------------------------------------------ */
+
+.dsrc-hero__meta {
+  font-family: var(--dsrc-font-family-mono);
+  font-size: var(--dsrc-font-size-micro);
+  color: rgba(255, 255, 255, 0.4);
+  margin: 0;
+}
+
+/* ---------------------------------------------------------------------------
+ * Responsive
+ * ------------------------------------------------------------------------ */
+
+@media (max-width: 768px) {
+  .dsrc-hero {
+    padding: var(--dsrc-spacing-7) var(--dsrc-spacing-4);
+  }
+}

package/src/layout/main/main.css

@@ -0,0 +1,123 @@
+/**
+ * DSRC Main Content Area and Container System
+ *
+ * Fournit la zone de contenu principale, le systeme de conteneur, et les
+ * blocs de section reutilisables.
+ *
+ * Usage:
+ * <main class="dsrc-main">
+ *   <div class="dsrc-container">
+ *     <section class="dsrc-section">
+ *       <h2 class="dsrc-section__titre">Titre de section</h2>
+ *       <p class="dsrc-section__description">Description de la section.</p>
+ *       <!-- contenu -->
+ *     </section>
+ *   </div>
+ * </main>
+ *
+ * Container variants:
+ * <div class="dsrc-container">             Standard (max 1140px)
+ * <div class="dsrc-container--fluid">      Pleine largeur
+ * <div class="dsrc-container--narrow">     Etroit (max 720px)
+ */
+
+/* ---------------------------------------------------------------------------
+ * Container system
+ *
+ * .dsrc-container          -- centres content with the standard max-width
+ * .dsrc-container--fluid   -- full viewport width, same horizontal padding
+ * .dsrc-container--narrow  -- tighter reading column for long-form text
+ * ------------------------------------------------------------------------ */
+
+.dsrc-container {
+  max-width: var(--dsrc-layout-max-width);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--dsrc-spacing-5);
+  padding-right: var(--dsrc-spacing-5);
+}
+
+.dsrc-container--fluid {
+  max-width: none;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--dsrc-spacing-5);
+  padding-right: var(--dsrc-spacing-5);
+}
+
+.dsrc-container--narrow {
+  max-width: 720px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--dsrc-spacing-5);
+  padding-right: var(--dsrc-spacing-5);
+}
+
+/* ---------------------------------------------------------------------------
+ * Main content area
+ *
+ * Wraps the primary page content between the navigation/hero and the footer.
+ * Provides vertical padding and the standard centred max-width.
+ * ------------------------------------------------------------------------ */
+
+.dsrc-main {
+  max-width: var(--dsrc-layout-max-width);
+  margin: 0 auto;
+  padding: var(--dsrc-spacing-7) var(--dsrc-spacing-5);
+}
+
+/* ---------------------------------------------------------------------------
+ * Section blocks
+ *
+ * Reusable titled section within the main content area.
+ * Each section has a title with an accent underline and an optional
+ * description paragraph.
+ * ------------------------------------------------------------------------ */
+
+.dsrc-section {
+  margin-bottom: var(--dsrc-spacing-8);
+}
+
+.dsrc-section:last-child {
+  margin-bottom: 0;
+}
+
+.dsrc-section__titre {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-h3);
+  font-weight: var(--dsrc-font-weight-bold);
+  color: var(--dsrc-color-noir);
+  padding-bottom: var(--dsrc-spacing-4);
+  border-bottom: var(--dsrc-border-width-thick) solid var(--dsrc-color-primaire);
+  margin: 0 0 var(--dsrc-spacing-3);
+}
+
+.dsrc-section__description {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  color: var(--dsrc-color-gris-600);
+  margin: 0 0 var(--dsrc-spacing-6);
+  max-width: 52ch;
+  line-height: var(--dsrc-font-line-height-loose);
+}
+
+/* ---------------------------------------------------------------------------
+ * Responsive
+ * ------------------------------------------------------------------------ */
+
+@media (max-width: 768px) {
+  .dsrc-main {
+    padding: var(--dsrc-spacing-6) var(--dsrc-spacing-4);
+  }
+
+  .dsrc-container,
+  .dsrc-container--fluid,
+  .dsrc-container--narrow {
+    padding-left: var(--dsrc-spacing-4);
+    padding-right: var(--dsrc-spacing-4);
+  }
+
+  .dsrc-section {
+    margin-bottom: var(--dsrc-spacing-7);
+  }
+}