/* ---------------------------------------------------------------------------
 * Composition propre à la vitrine publique (lot 1).
 *
 * Cette feuille N'EST PAS le socle : elle assemble les composants de
 * `charte.css` dans les cinq `<section>` d'`accueil.html` — accroche, la suite,
 * le socle, journal, accès — plus le bandeau de repères qui suit l'accroche.
 * La sixième section de la maquette est le PIED DE PAGE : il vit dans
 * `base.html` et reste stylé par `charte.css`, que le portail du lot 2
 * partagera. Ce portail réutilisera `polices.css` + `charte.css`, pas celle-ci.
 *
 * Ordre de chargement : polices.css → charte.css → vitrine.css.
 * Aucune ressource externe, aucun `url()`.
 * ------------------------------------------------------------------------- */

/* --- Accroche --------------------------------------------------------------- */

.accroche {
  border-top: none;
  padding-top: var(--espace-8);
  /* Le décor animé des deux bords est calé sur cette section et déborde
     volontairement de la colonne centrale : `overflow: hidden` le rogne au bord
     de l'accroche. Chaque colonne `[data-hero-anim]` porte en plus son propre
     `overflow: hidden` (plus bas), qui rogne son défilement interne. */
  position: relative;
  overflow: hidden;
}

/* Héros à deux colonnes de la maquette : texte à gauche, cockpit à droite.
   `z-index: 2` place le contenu réel AU-DESSUS du décor (`z-index: 1`). */
.accroche__grille {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--espace-8);
  flex-wrap: wrap;
}

.accroche__bloc {
  display: flex;
  flex-direction: column;
  gap: var(--espace-5);
  /* Base de 430 px = la valeur de la maquette. `min-width: 0` autorise la
     colonne à passer sous cette base quand la fenêtre est plus étroite : sans
     lui, le bloc élargirait la page à 360 px. */
  flex: 1 1 26.875rem;
  min-width: 0;
  max-width: 44rem;
}

.accroche__pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
}

.accroche__pastille::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.accroche__actions {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  flex-wrap: wrap;
  margin-top: var(--espace-2);
}

/* --- Accroche : décor animé des deux bords ----------------------------------
 * Transposition des deux colonnes `data-hero-anim` de la maquette (lignes 187
 * à 484). PUREMENT ORNEMENTAL, et marqué `aria-hidden` dans le gabarit : rien
 * de ce qui est écrit ici n'est du contenu. Aucun script — tout est en CSS.
 *
 * Trois garde-fous délibérés :
 *   1. masquage sous 1380 px — valeur de la maquette, conservée telle quelle ;
 *   2. `prefers-reduced-motion` — ÉCART VOLONTAIRE : la maquette laisse tourner
 *      les boucles infinies, une animation sans fin doit pouvoir être coupée ;
 *   3. `pointer-events: none` — le décor n'intercepte jamais un clic.
 * ------------------------------------------------------------------------- */

[data-hero-anim] {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Largeur des deux colonnes, reprise telle quelle de la maquette : la gouttière
   (`(100% - 1240px) / 2`) plus 56 px. Ces 56 px sont la BORNE HAUTE de
   `--marge-laterale` (`clamp(1.25rem, 4vw, 3.5rem)`, soit 20 à 56 px), écrite en
   dur faute de pouvoir relire un `clamp()` depuis un `max()` : au-delà de
   1400 px de fenêtre `4vw` dépasse 3,5 rem et l'écart est nul ; entre 1380 et
   1400 px il vaut au plus 0,8 px, et sous 1380 px le décor est masqué.
   La colonne GAUCHE s'arrête ainsi là où commence la colonne centrale
   (`max(56px, …)`). La colonne DROITE ne s'y aligne pas : son plancher est de
   150 px (`max(150px, …)`), valeur de la maquette elle aussi. */
.deco-hero--gauche {
  left: 0;
  width: max(56px, calc((100% - var(--largeur-contenu)) / 2 + 56px));
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to right, #000 0, #000 58%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to right, #000 0, #000 58%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
  mask-composite: intersect;
}

.deco-hero--droite {
  right: 0;
  width: max(150px, calc((100% - var(--largeur-contenu)) / 2 + 56px));
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to left, #000 0, #000 58%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to left, #000 0, #000 58%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
  mask-composite: intersect;
}

/* Halo orange qui éclaire le fond derrière chaque colonne. */
.deco-hero__halo {
  position: absolute;
  top: 14%;
  width: 210px;
  height: 62%;
}

.deco-hero--gauche .deco-hero__halo {
  left: -24px;
  background: radial-gradient(ellipse at 30% 50%, rgba(255, 138, 61, 0.085), transparent 72%);
}

.deco-hero--droite .deco-hero__halo {
  right: -24px;
  background: radial-gradient(ellipse at 70% 50%, rgba(255, 138, 61, 0.085), transparent 72%);
}

/* Les quatre plans en perspective. Chaque valeur est celle de la maquette. */
.deco-hero__plan {
  position: absolute;
}

.deco-hero__plan--code-fin {
  left: 8px;
  top: -4%;
  width: 214px;
  transform: perspective(720px) rotateY(-30deg) rotateZ(8deg);
  transform-origin: right center;
  opacity: 0.28;
  filter: blur(0.7px);
}

.deco-hero__plan--code-large {
  left: -20px;
  top: -10%;
  width: 330px;
  transform: perspective(900px) rotateY(33deg) rotateZ(-5deg);
  transform-origin: left center;
  opacity: 0.95;
}

.deco-hero__plan--blocs {
  right: 64px;
  top: -6%;
  width: 150px;
  transform: perspective(760px) rotateY(26deg) rotateZ(-7deg);
  transform-origin: left center;
  opacity: 0.3;
  filter: blur(0.7px);
}

.deco-hero__plan--cartes {
  right: 8px;
  top: 0;
  height: 100%;
  width: 192px;
  transform: perspective(900px) rotateY(-31deg) rotateZ(5deg);
  transform-origin: right center;
}

/* Défilement sans fin : le bloc contient DEUX fois la même suite et remonte de
   la moitié de sa hauteur, si bien que la boucle ne se voit pas. */
@keyframes defilement-decor {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.deco-code,
.deco-blocs {
  display: flex;
  flex-direction: column;
  animation: defilement-decor 74s linear infinite;
}

.deco-code--fine {
  animation-delay: -24s;
}

.deco-code--large {
  animation: defilement-decor 44s linear infinite;
}

.deco-code {
  /* Couleur héritée par tout ce que le gabarit n'enveloppe pas — ponctuation,
     espaces et opérateurs, soit 1 738 des 6 238 caractères de texte des deux
     colonnes de faux code. */
  color: #3a414f;
}

.deco-code > span {
  display: block;
  white-space: pre;
  flex-shrink: 0;
  font-family: var(--police-mono);
  line-height: 2;
}

.deco-code--fine > span {
  font-size: 5px;
}

.deco-code--large > span {
  font-size: 6.5px;
}

/* Coloration syntaxique du faux code. Noms courts à dessein : ces sept classes
   sont posées 790 fois dans `templates/accroche-decor.html`, et ce décor
   `aria-hidden` n'est lu par personne. Le détail des 790 :
   dk = mot-clé (214) · di = identifiant (394) · df = appel de fonction (114)
   dn = nombre (20) · ds = chaîne (32) · da = ligne ajoutée (10)
   dr = ligne retirée (6) */
.dk {
  color: var(--accent);
}

.di {
  color: var(--texte-secondaire);
}

.df {
  color: var(--accent-clair);
}

.dn {
  color: var(--accent-profond);
}

.ds {
  color: #7a8290;
}

.da {
  color: #5fae7c;
}

.dr {
  color: #b06a6a;
}

/* Colonne droite : une pile de fenêtres muettes qui défile. */
.deco-blocs {
  gap: 22px;
  animation-duration: 104s;
  animation-delay: -34s;
}

.deco-blocs > span {
  width: 120px;
  flex-shrink: 0;
  border: 1px solid #1f242e;
  border-radius: 7px;
  background: var(--surface);
}

/* Colonne droite : cinq cartes d'application qui apparaissent et s'effacent. */
@keyframes apparition-carte {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
  7% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  31% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  40% {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  100% {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
}

.deco-cartes {
  display: flex;
  flex-direction: column;
  gap: 34px;
  justify-content: center;
  height: 100%;
}

.deco-carte {
  flex-shrink: 0;
  width: 154px;
  background: #0d1015;
  border: 1px solid #232935;
  border-radius: var(--rayon);
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: var(--ombre-carte);
  animation: apparition-carte 12s ease-in-out infinite;
}

/* Durées, retards et décalages relevés carte par carte dans la maquette : c'est
   leur désaccord qui donne l'impression d'une file d'événements. */
.deco-carte--1 {
  margin-left: 0;
  animation-duration: 11.3s;
  animation-delay: 0s;
}

.deco-carte--2 {
  margin-left: 10px;
  animation-duration: 13.7s;
  animation-delay: 2.4s;
}

.deco-carte--3 {
  margin-left: -4px;
  animation-duration: 9.4s;
  animation-delay: 5.1s;
}

.deco-carte--4 {
  margin-left: 13px;
  animation-duration: 15.1s;
  animation-delay: 7.3s;
}

.deco-carte--5 {
  margin-left: 2px;
  animation-duration: 12.2s;
  animation-delay: 3.6s;
}

.deco-carte__entete {
  display: flex;
  align-items: center;
  gap: 7px;
}

.deco-carte__nom {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: -0.01em;
  color: var(--texte);
}

.deco-carte__espace {
  flex: 1;
}

.deco-carte__pastille {
  width: 3px;
  height: 3px;
  border-radius: 50%;
}

.deco-carte__pastille--accent {
  background: var(--accent);
}

.deco-carte__pastille--clair {
  background: var(--accent-clair);
}

.deco-carte__pastille--profond {
  background: var(--accent-profond);
}

.deco-carte__lignes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deco-carte__lignes > span {
  display: flex;
  gap: 4px;
}

.deco-carte__trait {
  height: 3px;
  border-radius: 1px;
  background: var(--bordure-nette);
}

.deco-carte__trait--accent {
  background: var(--accent);
}

.deco-carte__trait--clair {
  background: var(--accent-clair);
}

.deco-carte__trait--profond {
  background: var(--accent-profond);
}

.deco-carte__pied {
  font-family: var(--police-mono);
  font-size: 7px;
  letter-spacing: 0.05em;
  color: var(--texte-discret);
  border-top: 1px solid var(--bordure);
  padding-top: 8px;
}

/* Seuil de la maquette : sous 1380 px la colonne centrale touche les bords et
   le décor n'aurait plus de place. Conservé tel quel. */
@media (max-width: 1380px) {
  [data-hero-anim] {
    display: none;
  }
}

/* --- Accroche : cockpit produit ---------------------------------------------
 * Fausse fenêtre NovaFactory, relevée lignes 496 à 548 de la maquette. C'est
 * une ILLUSTRATION : le gabarit la marque `aria-hidden`, et le texte du héros
 * ne renvoie jamais à elle.
 *
 * ÉCART DÉLIBÉRÉ sur les gris : la maquette emploie `#6b7280` (4,12:1 sur le
 * fond), déjà écarté par la charte au profit de `--texte-discret` (#7b8393).
 * Le cockpit suit la charte : même si son texte est décoratif, il reste lu par
 * un œil humain, et deux gris « discrets » différents sur la même page ne se
 * justifieraient pas.
 * ------------------------------------------------------------------------- */

.cockpit {
  flex: 1 1 26.875rem;
  min-width: 0;
  background: var(--surface);
  border: 1px solid #1f242e;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  font-family: var(--police-mono);
}

/* Sous 480 px, la fenêtre ne tient plus dans les 430 px que la maquette lui
   donne : elle est masquée plutôt que tassée en bouillie illisible. Le héros
   redevient alors une simple colonne de texte, que son `min-width: 0` autorise
   à descendre sous sa base flex de 430 px. */
@media (max-width: 30rem) {
  .cockpit {
    display: none;
  }
}

.cockpit__espace {
  flex: 1;
}

.cockpit__titre {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  padding: 11px 14px;
  border-bottom: 1px solid #161a21;
  background: #0c0e13;
}

.cockpit__feux {
  display: flex;
  gap: 6px;
}

.cockpit__feux span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bordure-nette);
}

.cockpit__nom {
  font-size: 10px;
  color: var(--texte-discret);
}

.cockpit__actifs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  color: var(--texte-attenue);
}

@keyframes pouls-cockpit {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.cockpit__pouls {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: pouls-cockpit 2.4s ease-in-out infinite;
}

.cockpit__corps {
  display: flex;
  min-height: 296px;
}

.cockpit__lateral {
  width: 162px;
  flex: none;
  border-right: 1px solid #161a21;
  padding: 13px 0 10px;
  display: flex;
  flex-direction: column;
  background: #090b0f;
}

.cockpit__rubrique {
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: var(--texte-discret);
  padding: 0 12px 9px;
}

.cockpit__rubrique--terminaux {
  padding: 12px 12px 8px;
  border-top: 1px solid #12151c;
  margin-top: 10px;
}

.cockpit__fichier {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  padding: 3px 12px;
  color: var(--texte-attenue);
}

.cockpit__chevron {
  color: var(--texte-discret);
  font-size: 8px;
}

.cockpit__fichier--racine {
  color: var(--texte);
}

.cockpit__fichier--niveau2 {
  padding-left: 22px;
}

.cockpit__fichier--niveau3 {
  padding-left: 34px;
}

.cockpit__fichier--actif {
  color: var(--texte);
  background: #12151c;
  border-left: 2px solid var(--accent);
}

.cockpit__modifie {
  color: var(--accent);
  font-size: 9px;
}

.cockpit__terminal {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  padding: 3px 12px;
  font-size: 10.5px;
  color: var(--texte);
}

.cockpit__voyant {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.cockpit__terminal--inactif {
  color: var(--texte-discret);
}

.cockpit__terminal--inactif .cockpit__voyant {
  background: var(--bordure-nette);
}

.cockpit__compteur {
  color: var(--texte-discret);
  font-size: 9.5px;
}

.cockpit__principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cockpit__onglets {
  display: flex;
  border-bottom: 1px solid #161a21;
  background: #090b0f;
}

.cockpit__onglet {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font-size: 10.5px;
  color: var(--texte-discret);
  border-right: 1px solid #161a21;
  white-space: nowrap;
}

.cockpit__onglet--actif {
  color: var(--texte);
  background: var(--surface);
  border-top: 1px solid var(--accent);
}

.cockpit__onglet-mode {
  color: var(--accent);
}

.cockpit__jeton {
  color: var(--texte-attenue);
  background: #12151c;
  border-radius: 3px;
  padding: 0 5px;
}

.cockpit__diff {
  flex: 1;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
}

.cockpit__ligne {
  display: grid;
  grid-template-columns: 30px 12px 1fr;
  font-size: 11px;
  line-height: 1.9;
}

.cockpit__ligne--ajout {
  background: rgba(74, 222, 128, 0.07);
}

.cockpit__ligne--retrait {
  background: rgba(248, 113, 113, 0.07);
}

.cockpit__numero {
  color: #3f4553;
  text-align: right;
  padding-right: 8px;
}

.cockpit__signe {
  color: #3f4553;
}

.cockpit__ligne--ajout .cockpit__signe {
  color: #4ade80;
}

.cockpit__ligne--retrait .cockpit__signe {
  color: #f87171;
}

.cockpit__code {
  color: var(--texte-doux);
  white-space: pre;
}

.cockpit__statut {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid #161a21;
  background: #0c0e13;
  font-size: 10px;
}

.cockpit__branche,
.cockpit__raccourci {
  color: var(--texte-attenue);
}

.cockpit__ajouts {
  color: #4ade80;
}

.cockpit__retraits {
  color: #f87171;
}

.cockpit__taches {
  color: var(--texte-discret);
  white-space: nowrap;
}

/* --- Mouvement réduit : décor et cockpit ------------------------------------
 * ÉCART VOLONTAIRE PAR RAPPORT À LA MAQUETTE. Elle laisse tourner quatre
 * boucles infinies ; une animation sans fin doit pouvoir être coupée.
 *
 * La règle générique de `charte.css` ne suffit pas : elle PLAFONNE la boucle
 * (durée 0,01 ms, une seule itération) au lieu de l'arrêter. L'animation reste
 * déclarée et joue encore — comprimée en un passage imperceptible, mais jouée.
 * Plafonner n'est pas neutraliser ; seul `animation: none` arrête réellement
 * la boucle. Les quatre familles retombent alors sur leur style de base :
 * colonnes immobiles en haut de leur course (`translateY(0)`) et cinq cartes
 * pleinement visibles, aucune de ces règles ne déclarant d'`opacity` de repos
 * autre que la valeur par défaut.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .deco-code,
  .deco-blocs,
  .deco-carte,
  .cockpit__pouls {
    animation: none;
  }
}

/* --- Bandeau de repères (quatre cellules sous l'accroche) ------------------- */

.bandeau {
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  background: var(--fond-alterne);
}

.bandeau__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0;
  padding: 0;
}

.bandeau__cellule {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  padding: var(--espace-5) var(--espace-5) var(--espace-5) 0;
}

.bandeau__cellule + .bandeau__cellule {
  border-left: 1px solid var(--filet);
  padding-left: var(--espace-5);
}

.bandeau__valeur {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--texte);
}

/* --- Les quatre applications ------------------------------------------------ */

.apps {
  display: flex;
  flex-direction: column;
  gap: var(--espace-6);
}

.apps__logo {
  width: 34px;
  height: 34px;
  flex: none;
}

/* --- Le socle : quatre règles + citation ------------------------------------ */

.regles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--espace-6);
  margin-top: var(--espace-7);
}

.regle {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  border-top: 1px solid var(--bordure-nette);
  padding-top: var(--espace-4);
}

.regle__numero {
  font-family: var(--police-mono);
  font-size: 0.68rem;
  color: var(--accent);
}

.regle__titre {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.regle p {
  color: var(--texte-attenue);
  font-size: 0.86rem;
  line-height: 1.7;
}

.signature {
  display: flex;
  gap: var(--espace-7);
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--filet);
  padding-top: var(--espace-6);
  margin-top: var(--espace-7);
}

.signature__citation {
  flex: 1 1 22rem;
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.6vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--texte-doux);
}

.signature__famille {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}

.signature__logos {
  display: flex;
  align-items: center;
  gap: var(--espace-5);
}

.signature__logos img {
  width: 26px;
  height: 26px;
}

.signature__logos img:first-child {
  width: 32px;
  height: 32px;
}

/* --- Journal ---------------------------------------------------------------- */

.journal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--espace-8);
}

.journal__entrees {
  display: flex;
  flex-direction: column;
}

.journal__entree {
  display: flex;
  gap: var(--espace-5);
  flex-wrap: wrap;
  align-items: baseline;
  padding: var(--espace-4) 0;
  border-top: 1px solid var(--bordure);
}

.journal__entree:last-child {
  border-bottom: 1px solid var(--bordure);
}

/* Mention technique lue en ligne : même plancher de 0,8 rem que `.mono`
   (cf. écart 2 en tête de `charte.css`). La gouttière passe de 4 à 4,5 rem :
   « 2026.07 » mesure 53,8 px à cette taille en JetBrains Mono, la colonne doit
   rester plus large que le texte pour que les trois dates restent alignées. */
.journal__date {
  font-family: var(--police-mono);
  font-size: 0.8rem;
  color: var(--texte-discret);
  flex: none;
  width: 4.5rem;
}

.journal__corps {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
}

.journal__titre {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 0.97rem;
  margin: 0;
}

.journal__corps p {
  color: var(--texte-attenue);
  font-size: 0.86rem;
  line-height: 1.65;
}

/* --- Accès ------------------------------------------------------------------ */

.acces {
  display: flex;
  gap: var(--espace-7);
  align-items: center;
  flex-wrap: wrap;
}

.acces__texte {
  flex: 1 1 24rem;
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}

.acces__action {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  align-items: flex-start;
}