odoro 1.0.9 → 2.1.0

package/templates/{react-ts-server/_variantes/sans-libs/client → react-ts/_variants/without-libs}/src/styles.css

@@ -1,53 +1,53 @@
-/* Styles de l'application.
+/* Application styles.
 
-   Les bibliotheques Odoro n'ont pas ete retenues a la creation : il n'y a donc
-   ni jetons ni classes utilitaires, et cette feuille porte tout. Le dessin est
-   celui de la version complete — meme barre en gelules, meme typographie,
-   memes cartes, meme teinte de marque — en CSS ordinaire.
+   The Odoro libraries were not picked at creation: there are therefore no
+   tokens and no utility classes, and this stylesheet carries everything. The
+   design is that of the full version — same pill bar, same typography, same
+   cards, same brand hue — in plain CSS.
 
-   Une seule variable commande la couleur : `--marque`. La changer repeint le
-   signe, les accents et les boutons d'un seul coup.
+   A single variable drives the colour: `--brand`. Changing it repaints the
+   mark, the accents and the buttons in one go.
 
-   Pour passer aux jetons plus tard : `npm i @odoro-cli/libs`, puis importer
-   `@odoro-cli/libs/styles.css` dans `main.tsx` avant cette feuille. */
+   To move to the tokens later: `npm i @odoro-cli/libs`, then import
+   `@odoro-cli/libs/styles.css` in `main.tsx` before this stylesheet. */
 
 :root {
-  --marque: #3b82f6;
-  --fond: #ffffff;
-  --encre: #18181b;
-  --doux: #71717a;
-  --filet: #e4e4e7;
+  --brand: #3b82f6;
+  --bg: #ffffff;
+  --ink: #18181b;
+  --muted: #71717a;
+  --line: #e4e4e7;
   --surface: #fafafa;
   color-scheme: light dark;
 }
 
-/* Les valeurs du theme sombre, ecrites une fois et reprises deux fois.
+/* The dark theme values, written once and repeated twice.
 
-   La bascule pose `data-theme` sur la racine ; sans attribut, la preference du
-   navigateur decide. Les deux regles sont donc necessaires : la seconde sans la
-   premiere ignorerait le choix du visiteur, la premiere sans la seconde
-   rendrait un fond blanc au milieu de la nuit. */
+   The toggle sets `data-theme` on the root; with no attribute, the browser
+   preference decides. Both rules are therefore needed: the second without the
+   first would ignore the visitor's choice, the first without the second would
+   render a white background in the middle of the night. */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme='light']) {
-    --fond: #09090b;
-    --encre: #fafafa;
-    --doux: #a1a1aa;
-    --filet: #27272a;
+    --bg: #09090b;
+    --ink: #fafafa;
+    --muted: #a1a1aa;
+    --line: #27272a;
     --surface: #18181b;
   }
 }
 
 :root[data-theme='dark'] {
-  --fond: #09090b;
-  --encre: #fafafa;
-  --doux: #a1a1aa;
-  --filet: #27272a;
+  --bg: #09090b;
+  --ink: #fafafa;
+  --muted: #a1a1aa;
+  --line: #27272a;
   --surface: #18181b;
 }
 
-/* Le choix explicite est dit au navigateur : sans cela, `light-dark()`, les
-   controles natifs et les barres de defilement continuent de suivre un systeme
-   en nuit alors que le visiteur a demande le clair. */
+/* The explicit choice is told to the browser: without it, `light-dark()`, the
+   native controls and the scrollbars keep following a system set to night even
+   though the visitor asked for light. */
 :root[data-theme='light'] {
   color-scheme: light;
 }
@@ -62,8 +62,8 @@
 
 body {
   margin: 0;
-  background: var(--fond);
-  color: var(--encre);
+  background: var(--bg);
+  color: var(--ink);
   font-family: system-ui, -apple-system, Segoe UI, sans-serif;
   line-height: 1.6;
 }
@@ -79,20 +79,20 @@ pre {
   grid-template-rows: auto 1fr auto;
 }
 
-/* ----- Barre en gelules --------------------------------------------------- */
+/* ----- Pill bar ----------------------------------------------------------- */
 
-/* La barre ne peint pas de bandeau : ce sont les gelules qui portent la
-   surface, posees sur ce qu'il y a derriere. Le fond decoratif continue donc
-   de passer dessous, au lieu d'etre coupe par une bande opaque. */
+/* The bar paints no band: the pills carry the surface, laid over whatever is
+   behind. The decorative background therefore keeps showing through, instead
+   of being cut off by an opaque strip. */
 
-.barre {
+.nav {
   position: sticky;
   top: 0;
   z-index: 20;
   padding: 0 1.25rem;
 }
 
-.barre-contenu {
+.nav-content {
   display: flex;
   align-items: center;
   gap: 0.75rem;
@@ -102,96 +102,96 @@ pre {
   margin: 0 auto;
 }
 
-.gelule {
+.pill {
   display: inline-flex;
   align-items: center;
   height: 3.5rem;
   flex-shrink: 0;
   padding: 0 1.25rem;
-  border: 1px solid color-mix(in oklab, var(--encre) 12%, transparent);
+  border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
   border-radius: 9999px;
-  background: color-mix(in oklab, var(--fond) 72%, transparent);
+  background: color-mix(in oklab, var(--bg) 72%, transparent);
   backdrop-filter: blur(16px);
   text-decoration: none;
 }
 
-.barre-fin {
+.nav-end {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }
 
-.gelule-lien {
-  color: var(--doux);
+.pill-link {
+  color: var(--muted);
   font-size: 0.875rem;
 }
 
-.bascule {
+.toggle {
   width: 3.5rem;
   justify-content: center;
   padding: 0;
-  color: var(--doux);
+  color: var(--muted);
   cursor: pointer;
 }
 
-.bascule:hover {
-  color: var(--encre);
+.toggle:hover {
+  color: var(--ink);
 }
 
-.gelule-lien:hover {
-  color: var(--encre);
+.pill-link:hover {
+  color: var(--ink);
 }
 
-/* ----- Marque ------------------------------------------------------------- */
+/* ----- Brand -------------------------------------------------------------- */
 
-.marque {
+.brand {
   display: inline-flex;
   align-items: center;
   gap: 0.625rem;
 }
 
-.marque-signe {
-  color: var(--marque);
+.brand-mark {
+  color: var(--brand);
   display: inline-flex;
 }
 
-.marque-mot {
+.brand-word {
   font-size: 1.125rem;
   font-weight: 700;
   letter-spacing: 0.025em;
-  color: var(--encre);
+  color: var(--ink);
 }
 
-/* ----- Coquille ----------------------------------------------------------- */
+/* ----- Shell -------------------------------------------------------------- */
 
-.app-shell-fond {
+.app-shell-background {
   position: relative;
 }
 
-.principal {
+.main {
   position: relative;
 }
 
-.pied {
+.footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 2rem 1.5rem;
-  border-top: 1px solid var(--filet);
-  color: var(--doux);
+  border-top: 1px solid var(--line);
+  color: var(--muted);
   font-size: 0.875rem;
 }
 
-.pied .marque-mot {
+.footer .brand-word {
   font-size: 0.875rem;
   color: inherit;
 }
 
-/* ----- Fond decoratif ----------------------------------------------------- */
+/* ----- Decorative background ---------------------------------------------- */
 
-.fond {
+.background {
   position: absolute;
   inset-inline: 0;
   top: 0;
@@ -200,45 +200,45 @@ pre {
   pointer-events: none;
 }
 
-.fond-nappe {
+.background-glow {
   position: absolute;
   border-radius: 9999px;
   filter: blur(64px);
 }
 
-.fond-nappe-haute {
+.background-glow-top {
   left: 50%;
   top: -18rem;
   width: 46rem;
   height: 46rem;
   transform: translateX(-50%);
   opacity: 0.3;
-  background: radial-gradient(closest-side, var(--marque), transparent);
+  background: radial-gradient(closest-side, var(--brand), transparent);
 }
 
-.fond-nappe-droite {
+.background-glow-right {
   right: -10rem;
   top: 6rem;
   width: 30rem;
   height: 30rem;
   opacity: 0.18;
-  background: radial-gradient(closest-side, var(--marque), transparent);
+  background: radial-gradient(closest-side, var(--brand), transparent);
 }
 
-/* ----- Mise en page ------------------------------------------------------- */
+/* ----- Layout ------------------------------------------------------------- */
 
-.contenu,
-.contenu-etroit {
+.content,
+.content-narrow {
   width: 100%;
   margin: 0 auto;
   position: relative;
 }
 
-.contenu {
+.content {
   max-width: 64rem;
 }
 
-.contenu-etroit {
+.content-narrow {
   max-width: 48rem;
   text-align: center;
 }
@@ -249,30 +249,30 @@ pre {
 
 .section {
   padding: 5rem 1.5rem;
-  border-top: 1px solid var(--filet);
+  border-top: 1px solid var(--line);
 }
 
-.section-centre {
+.section-centered {
   padding: 6rem 1.5rem;
 }
 
 /* ----- Hero --------------------------------------------------------------- */
 
-.pastille-marque {
+.brand-dot {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   white-space: nowrap;
   padding: 0.25rem 0.75rem;
   border-radius: 9999px;
-  border: 1px solid color-mix(in oklab, var(--marque) 30%, transparent);
-  background: color-mix(in oklab, var(--marque) 10%, transparent);
-  color: var(--marque);
+  border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
+  background: color-mix(in oklab, var(--brand) 10%, transparent);
+  color: var(--brand);
   font-size: 0.75rem;
   font-weight: 500;
 }
 
-.hero-titre {
+.hero-title {
   margin: 1.5rem 0 0;
   max-width: 46rem;
   font-size: clamp(2.5rem, 6vw, 3.75rem);
@@ -282,14 +282,14 @@ pre {
 }
 
 .accent {
-  color: var(--marque);
+  color: var(--brand);
 }
 
-.hero-chapeau {
+.hero-eyebrow {
   margin: 1.25rem 0 0;
   max-width: 36rem;
   font-size: 1.125rem;
-  color: var(--doux);
+  color: var(--muted);
 }
 
 .hero-actions {
@@ -299,162 +299,162 @@ pre {
   margin-top: 2rem;
 }
 
-.faits {
+.facts {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-top: 1.5rem;
 }
 
-.fait {
+.fact {
   padding: 0.25rem 0.75rem;
   border-radius: 9999px;
-  border: 1px solid var(--filet);
-  color: var(--doux);
+  border: 1px solid var(--line);
+  color: var(--muted);
   font-size: 0.75rem;
 }
 
-.hero-fenetre {
+.hero-window {
   margin-top: 3.5rem;
 }
 
-/* ----- Fenetre du produit ------------------------------------------------- */
+/* ----- Product window ----------------------------------------------------- */
 
-.fenetre {
+.window {
   overflow: hidden;
   border-radius: 1rem;
-  border: 1px solid var(--filet);
+  border: 1px solid var(--line);
   background: var(--surface);
   box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 }
 
-.fenetre-barre {
+.window-bar {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.625rem 1rem;
-  border-bottom: 1px solid var(--filet);
+  border-bottom: 1px solid var(--line);
 }
 
-.fenetre-pastilles {
+.window-dots {
   display: flex;
   gap: 0.375rem;
 }
 
-.fenetre-pastilles span {
+.window-dots span {
   width: 0.625rem;
   height: 0.625rem;
   border-radius: 9999px;
-  background: var(--filet);
+  background: var(--line);
 }
 
-.fenetre-chemin {
+.window-path {
   margin-left: 0.5rem;
-  color: var(--doux);
+  color: var(--muted);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 0.75rem;
 }
 
-.fenetre-code {
+.window-code {
   margin: 0;
   padding: 1.25rem;
   overflow-x: auto;
   font-size: 0.75rem;
   line-height: 1.7;
-  color: var(--doux);
+  color: var(--muted);
 }
 
-/* ----- Cartes ------------------------------------------------------------- */
+/* ----- Cards -------------------------------------------------------------- */
 
-.sur-titre {
+.overline {
   margin: 0;
   font-size: 0.8125rem;
   font-weight: 600;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--doux);
+  color: var(--muted);
 }
 
-.grille {
+.grid {
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
   margin-top: 2rem;
 }
 
-.carte {
-  border: 1px solid var(--filet);
+.card {
+  border: 1px solid var(--line);
   border-radius: 0.75rem;
   background: var(--surface);
   padding: 1.5rem;
 }
 
-.carte-numero {
+.card-number {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 0.75rem;
-  color: var(--marque);
+  color: var(--brand);
 }
 
-.carte h3 {
+.card h3 {
   margin: 0.75rem 0 0;
   font-size: 1.125rem;
   letter-spacing: -0.01em;
 }
 
-.carte p {
+.card p {
   margin: 0.5rem 0 0;
   font-size: 0.875rem;
-  color: var(--doux);
+  color: var(--muted);
 }
 
-/* ----- Cloture ------------------------------------------------------------ */
+/* ----- Closing ------------------------------------------------------------ */
 
-.cloture-titre {
+.closing-title {
   margin: 0;
   font-size: clamp(1.75rem, 4vw, 2.25rem);
   font-weight: 700;
   letter-spacing: -0.02em;
 }
 
-.cloture-chapeau {
+.closing-eyebrow {
   margin: 1rem auto 0;
   max-width: 40rem;
-  color: var(--doux);
+  color: var(--muted);
 }
 
-.commande {
+.command {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   max-width: 28rem;
   margin: 2rem auto 0;
   padding: 0.5rem 0.5rem 0.5rem 1rem;
-  border: 1px solid var(--filet);
+  border: 1px solid var(--line);
   border-radius: 0.75rem;
   background: var(--surface);
 }
 
-.commande code {
+.command code {
   flex: 1;
   text-align: left;
   font-size: 0.875rem;
 }
 
-.lien-discret {
+.quiet-link {
   display: inline-block;
   margin: 1.5rem auto 0;
-  color: var(--doux);
+  color: var(--muted);
   font-size: 0.875rem;
   text-decoration: none;
 }
 
-.lien-discret:hover {
-  color: var(--marque);
+.quiet-link:hover {
+  color: var(--brand);
 }
 
-/* ----- Boutons ------------------------------------------------------------ */
+/* ----- Buttons ------------------------------------------------------------ */
 
-.bouton {
+.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -469,29 +469,29 @@ pre {
   cursor: pointer;
 }
 
-.bouton-primaire {
-  background: var(--marque);
+.button-primary {
+  background: var(--brand);
   color: #ffffff;
 }
 
-.bouton-primaire:hover {
-  background: color-mix(in oklab, var(--marque) 85%, black);
+.button-primary:hover {
+  background: color-mix(in oklab, var(--brand) 85%, black);
 }
 
-.bouton-secondaire {
+.button-secondary {
   background: var(--surface);
-  color: var(--encre);
-  border: 1px solid var(--filet);
+  color: var(--ink);
+  border: 1px solid var(--line);
 }
 
-.bouton-fantome {
+.button-ghost {
   height: 2rem;
   padding: 0 0.75rem;
   background: transparent;
-  color: var(--encre);
+  color: var(--ink);
   font-size: 0.875rem;
 }
 
-.bouton-fantome:hover {
-  background: var(--filet);
+.button-ghost:hover {
+  background: var(--line);
 }