import { Meta, Story } from '@storybook/addon-docs/blocks';
import * as Graphique from './Graphique.stories';
import '@/stories/styles/shared.css';


<Meta title="Éco-conception/Introduction" />

<style>
{`


 /* Variables CSS basées sur les couleurs exactes du thème CNAM */
    :root {
      --primary-color: #0c419a; /* primary: cnamColorsTokens.blue.base */
      --primary-light: #3d67ae; /* blue.lighten20 */
      --secondary-color: #006386; /* secondary: cnamColorsTokens.cyan.darken40 */
      --accent-color: #00a5df; /* accent: cnamColorsTokens.cyan.base */
      --error-color: #b33f2e; /* error: cnamColorsTokens.orange.darken20 */
      --info-color: #0c419a; /* info: cnamColorsTokens.blue.base */
      --success-color: #004439; /* success: cnamColorsTokens.turquoise.darken60 */
      --warning-color: #906b15; /* warning: cnamColorsTokens.yellow.darken60 */
      --text-color: #020d1f; /* blue.darken80 */
      --background-light: #f8f9fc; /* blue.lighten97 */
      --card-shadow: 0 4px 12px rgba(12, 65, 154, 0.05);
      --transition-speed: 0.3s;
      --border-radius: 8px;
    }

.eco-subtitle {
  margin-bottom: 2.5rem;
}

.eco-page .eco-section-title {
  color: var(--primary-color);
      font-size: 1.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid rgba(12, 65, 154, 0.2);
      font-weight: 700;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.card {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);

  display: flex;
  flex-direction: column;
}

.card-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.card h3 {
  color: var(--primary-color);
  text-align: center;
  font-weight: 700;
  min-height: 72px;     
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin: 0 0 1.5rem;
}

.alert h3 {
  color: var(--primary-color);
font-weight: 700;
font-size: 1.25rem;
}

.card p {
  flex: 1;              
  margin: 0;
  line-height: 1.8;
}

.card a {
  margin-top: 2rem;
  align-self: flex-end;
  font-weight: 700;
  color: #0C419A !important;
  text-decoration: none;
}
.alert {
  background-color: #E3E8F2;
  border-left: 4px solid #0C419A;
  padding: 1.5rem;
  border-radius: 4px;
  margin: 2rem 0;
}

.alert h3 {
  color: #0C419A;
  margin-top: 0;
}

.eco-level-description {
	margin: 0;
	line-height: 1.5;
}

.graphique {
margin-top: 36px;
}
`}
</style>

<div className="eco-page">

<div className="header">
  <h1 className="eco-title">Ecoconception numérique</h1>
  <p className="eco-subtitle">Concevoir des services numériques plus sobres et respectueux de l'environnement.</p>
</div>
<h2 className="eco-section-title">Notre démarche</h2>

<p>La Studio Design propose une démarche d’écoconception permettant de faciliter l’intégration d’une sélection de bonnes pratiques essentielles associées à la  fabrication des projets, de leur gouvernance à leur maintenance. En partant du référentiel interne d’écoconception, nous avons défini deux niveaux d’exigence de conformité, couvrant cinq domaines d’intervention tout au long du cycle de vie d’un service numérique :</p>

  <p className="eco-level-description"><strong>Niveau #1 :</strong> une sélection de 20 bonnes pratiques essentielles, faciles à mettre en œuvre pour commencer la démarche ;</p>
  <p className="eco-level-description"><strong>Niveau #2 :</strong> le reste des bonnes pratiques du référentiel interne d’écoconception complet, inscrivant les projets dans une démarche avancée.</p>
<div className="graphique">
  <Story of={Graphique.Default} />

</div>

<h2 className="eco-section-title">Notre offre</h2>


<div className="cards-grid">
  <div className="card">
    <div className="card-icon">
      <img src="/public.svg" alt="Public" />
    </div>

    <h3>Bonnes pratiques<br />d’écoconception</h3>

    <p>Une sélection de bonnes pratiques essentielles UX UI Dev Front avec une documentation détaillée pour embarquer facilement l’écoconception dans la fabrication de vos produits numériques.</p>

    <a href="/?path=/docs/éco-conception-bonnes-pratiques-essentielles--docs">Découvrir →</a>
  </div>

  <div className="card">
    <div className="card-icon">
      <img src="/code.svg" alt="Code" />
    </div>

    <h3>Auto-évaluation Dev Front</h3>

    <p>Un outil d’auto-évaluation automatique, permettant d’évaluer la conformité du produit numérique vis-à-vis des bonnes pratiques de développement front.</p>

    <a href="/?path=/docs/éco-conception-auto-évaluation-dev-front--docs">Commencer →</a>
  </div>

  <div className="card">
    <div className="card-icon">
      <img src="/add_reaction.svg" alt="UX" />
    </div>

    <h3>Auto-évaluation<br />UX</h3>

    <p>Un kit d’auto-évaluation manuelle permettant de vérifier si votre produit numérique respecte les bonnes pratiques essentielles d’écoconception vis-à-vis de l’expérience utilisateur.</p>

    <a href="/?path=/docs/éco-conception-auto-évaluation-ux--docs">Commencer →</a>
  </div>
</div>

<div className="alert">
  <h3>À noter</h3>
  <p>Ces bonnes pratiques s'appuient sur le référentiel interne d’écoconception CNAM, qui est lui-même une réponse concrète aux Principes Directeurs SI « Sobriété Numérique » et qui s’inscrit dans la stratégie de responsabilité numérique de la CNAM.</p>
</div>

<h2 className="eco-section-title">D’autres ressources disponibles</h2>

<p>Si vous souhaitez en savoir plus sur l’écoconception numérique, voici quelques ressources à consulter.</p>

<div className="cards-grid">
  <div className="card">
    <h3>Référentiel interne CNAM<br />d’écoconception</h3>

    <p>Ce référentiel interne d’écoconception recense l’ensemble des bonnes pratiques à chaque phase d’un projet : de sa gouvernance à sa maintenance.</p>

    <a href="mailto:studio-design.cnam@assurance-maladie.fr?subject=Demande%20de%20référentiel%20d%27écoconception">Contacter le Studio Design →</a>
  </div>

  <div className="card">
    <h3>RGESN</h3>

    <p>Le référentiel général d’écoconception de service numérique version 2024 est un engagement de la feuille de route gouvernementale « Numérique et Environnement ».</p>

    <a
      href="https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/"
      target="_blank"
      rel="noopener noreferrer"
    >
      Consulter →
    </a>
  </div>
</div>

</div>