/*
 * Site public de Printaya : la présentation (landing.blade.php) et les pages du menu, qui partagent
 * le gabarit layouts/site.blade.php.
 *
 * Même règle que dashboard.css : CSS écrit à la main, aucune étape de build. Direction visuelle :
 * un ciel de nuit au-dessus d'une nappe de nuages -- l'impression « dans le nuage », prise au pied
 * de la lettre. Aucune image : les fonctionnalités sont illustrées par de petites maquettes
 * d'interface en HTML et CSS.
 */

:root {
    --nuit: #060f1c;
    --ciel: #0c1e33;
    --halo: #d6e7f6;
    --bleu: #8fb7d9;
    --encre: #f3f6f9;
    --ardoise: #9fb0c2;
    /* 5,5:1 sur une carte, 6,2:1 sur le fond : lisible partout, y compris à 12px. */
    --ardoise-sombre: #8295a8;
    /*
     * Deux couleurs vives, deux rôles qui ne se mélangent jamais :
     *
     *  - l'orange Printaya dit **qui** et **où cliquer** : le logo, le bouton principal, les
     *    surtitres. Jamais un état -- sa teinte (13°) est trop proche du rouge d'un échec ;
     *  - le vert dit **que ça a marché** : imprimante prête, document sorti, version disponible.
     *
     * Texte sur l'orange : blanc, par choix de marque. Le contraste tombe alors à 3,5:1, sous les
     * 4,5:1 attendus pour du texte normal -- d'où le libellé en gras, et un survol qui **fonce**
     * (4,6:1) au lieu d'éclaircir, ce qui l'aurait encore dégradé.
     */
    --marque: #f0562d;
    --marque-survol: #da3a10;
    --sorti: #9fe3c4;
    --ambre: #f2c879;
    --filet: rgba(159, 176, 194, 0.16);
    --filet-fort: rgba(159, 176, 194, 0.32);
    --largeur: 1120px;
    --police: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* L'en-tête est fixe : sans cette marge, « Voir comment ça marche » amènerait le titre de la
       section juste dessous, à moitié caché. */
    scroll-padding-top: 92px;
}

body {
    margin: 0;
    background: var(--nuit);
    color: var(--encre);
    font-family: var(--police);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
}

svg {
    display: block;
    max-width: 100%;
}

:focus-visible {
    outline: 2px solid var(--halo);
    outline-offset: 3px;
    border-radius: 6px;
}

.conteneur {
    width: min(100% - 48px, var(--largeur));
    margin-inline: auto;
}

.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Le lien d'évitement passe au-dessus de l'en-tête fixe : sinon, il apparaît derrière lui au
   premier Tab, donc invisible pour la seule personne à qui il sert. */
.evitement {
    position: fixed;
    left: 16px;
    top: -48px;
    z-index: 40;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--encre);
    color: var(--nuit);
    font-size: 14px;
    text-decoration: none;
}

.evitement:focus {
    top: 12px;
}

/* --- Boutons et badges ------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: 500 15px/1 var(--police);
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}

.btn:active {
    transform: translateY(1px);
}

/* L'action principale, partout, en orange Printaya, libellé en blanc. */
.btn-clair {
    background: var(--marque);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 10px 30px -12px rgba(240, 86, 45, 0.6);
}

.btn-clair:hover {
    background: var(--marque-survol);
}

.btn-voile {
    background: rgba(12, 30, 51, 0.55);
    border-color: var(--filet-fort);
    color: var(--encre);
}

.btn-voile:hover {
    border-color: rgba(214, 231, 246, 0.55);
}

.btn-petit {
    height: 34px;
    padding: 0 12px;
    font-size: 14px;
}

.badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.badge-dispo {
    border: 1px solid rgba(159, 227, 196, 0.35);
    background: rgba(159, 227, 196, 0.07);
    color: var(--sorti);
}

.badge-bientot {
    border: 1px solid rgba(143, 183, 217, 0.35);
    background: rgba(143, 183, 217, 0.07);
    color: var(--bleu);
}

.lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    color: var(--halo);
    font-size: 14.5px;
    text-decoration: none;
}

.lien-fleche:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --- En-tête et menu -------------------------------------------------------- */

/*
 * L'en-tête suit le défilement. `fixed` et non `sticky` : il ne prend alors aucune place dans le
 * flux, exactement comme l'`absolute` qu'il remplace -- le hero garde son cadrage, sans avoir à
 * reprendre ses marges.
 *
 * Le fond opaque translucide est le comportement de repli, valable partout : au-dessus du contenu
 * d'une page, un en-tête transparent rendrait ses liens illisibles.
 */
.entete {
    position: fixed;
    inset: 0 0 auto;
    z-index: 30;
    border-bottom: 1px solid var(--filet);
    background: rgba(6, 15, 28, 0.78);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
}

/*
 * Quand le navigateur sait suivre le défilement (Chrome, Edge), on fait mieux : en haut de page,
 * l'en-tête est transparent et laisse voir le ciel du hero ; le fond n'apparaît qu'une fois la
 * page défilée, là où il devient nécessaire. Ailleurs, le repli ci-dessus s'applique -- une
 * dégradation invisible pour qui n'a pas connu les deux.
 */
@supports (animation-timeline: scroll()) {
    .entete {
        border-bottom-color: transparent;
        background-color: transparent;
        animation: entete-au-defilement linear both;
        animation-timeline: scroll();
        animation-range: 0 110px;
    }
}

@keyframes entete-au-defilement {
    to {
        border-bottom-color: var(--filet);
        background-color: rgba(6, 15, 28, 0.86);
    }
}

.entete .conteneur {
    display: flex;
    align-items: center;
    gap: 34px;
    height: 68px;
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.marque-signe {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--marque);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.nav {
    display: flex;
    gap: 22px;
    font-size: 14px;
}

.nav a,
.lien-discret {
    color: var(--ardoise);
    text-decoration: none;
    transition: color 0.15s;
}

.nav a:hover,
.nav a[aria-current="page"],
.lien-discret:hover {
    color: var(--encre);
}

.entete-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    font-size: 14px;
}

.menu-mobile {
    display: none;
    position: relative;
}

.menu-mobile summary {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--filet-fort);
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
}

.menu-mobile summary::-webkit-details-marker {
    display: none;
}

.menu-mobile-icone,
.menu-mobile-icone::before,
.menu-mobile-icone::after {
    display: block;
    width: 16px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--encre);
}

.menu-mobile-icone {
    position: relative;
}

.menu-mobile-icone::before,
.menu-mobile-icone::after {
    content: "";
    position: absolute;
    left: 0;
}

.menu-mobile-icone::before {
    top: -5px;
}

.menu-mobile-icone::after {
    top: 5px;
}

.menu-mobile nav {
    position: absolute;
    right: 0;
    top: 46px;
    display: grid;
    min-width: 230px;
    padding: 8px;
    border: 1px solid var(--filet);
    border-radius: 12px;
    background: rgba(8, 20, 36, 0.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
}

.menu-mobile nav a {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ardoise);
    font-size: 15px;
    text-decoration: none;
}

.menu-mobile nav a:hover {
    background: rgba(143, 183, 217, 0.08);
    color: var(--encre);
}

/* --- Le ciel : dégradé, étoiles, lueur, nuages ------------------------------ */

.ciel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(120% 85% at 50% 34%, #17314d 0%, var(--ciel) 44%, var(--nuit) 100%);
}

.etoiles,
.etoiles::after {
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 85%);
    mask-image: linear-gradient(to bottom, #000 35%, transparent 85%);
}

.etoiles {
    background-image:
        radial-gradient(1px 1px at 24px 36px, rgba(255, 255, 255, 0.55), transparent 60%),
        radial-gradient(1px 1px at 150px 96px, rgba(255, 255, 255, 0.3), transparent 60%),
        radial-gradient(1.2px 1.2px at 236px 168px, rgba(214, 231, 246, 0.6), transparent 60%),
        radial-gradient(1px 1px at 88px 214px, rgba(255, 255, 255, 0.28), transparent 60%),
        radial-gradient(1px 1px at 302px 44px, rgba(255, 255, 255, 0.4), transparent 60%);
    background-size: 340px 260px;
}

.etoiles::after {
    content: "";
    background-image:
        radial-gradient(1.3px 1.3px at 60px 120px, rgba(255, 255, 255, 0.7), transparent 60%),
        radial-gradient(1px 1px at 380px 60px, rgba(214, 231, 246, 0.5), transparent 60%),
        radial-gradient(1px 1px at 250px 330px, rgba(255, 255, 255, 0.45), transparent 60%),
        radial-gradient(1.4px 1.4px at 470px 240px, rgba(255, 255, 255, 0.55), transparent 60%);
    background-size: 530px 410px;
    animation: scintille 7s ease-in-out infinite alternate;
}

.lueur {
    position: absolute;
    left: 50%;
    top: 26%;
    z-index: -2;
    width: 620px;
    height: 620px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(214, 231, 246, 0.14) 0%, rgba(214, 231, 246, 0.04) 32%, transparent 64%);
    pointer-events: none;
}

.nuages {
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: -4%;
    z-index: -1;
    height: 56%;
    opacity: 0.6;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%);
    mask-image: linear-gradient(to top, #000 30%, transparent 100%);
    animation: derive 80s ease-in-out infinite alternate;
    will-change: transform;
}

.nuages svg {
    width: 100%;
    height: 100%;
}

.ciel-hero,
.ciel-page {
    display: flex;
    flex-direction: column;
}

/*
 * Le hero remplit l'écran sans l'exiger : à 100svh, la carte du parcours flottait au-dessus de
 * 200px de nuages vides sur un écran de portable.
 */
.ciel-hero {
    min-height: max(620px, 82svh);
}

/* Fondu vers le fond de page : sans lui, les nuages s'arrêtent net sur une ligne horizontale. */
.ciel-hero::after,
.ciel-page::after,
.ciel-final::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    height: 200px;
    pointer-events: none;
}

.ciel-hero::after,
.ciel-page::after {
    bottom: 0;
    background: linear-gradient(to bottom, transparent, var(--nuit));
}

.ciel-final::before {
    top: 0;
    background: linear-gradient(to top, transparent, var(--nuit));
}

.ciel-hero + .section {
    border-top: 0;
}

/* --- Hero ------------------------------------------------------------------- */

.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 112px 0 64px;
    text-align: center;
}

.hero h1,
.page-simple h1 {
    max-width: 17ch;
    margin: 0;
    font-size: clamp(2.5rem, 1.1rem + 4.6vw, 4.5rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.042em;
    text-wrap: balance;
}

.chapeau {
    max-width: 40rem;
    margin: 26px auto 0;
    color: #c4d0dc;
    font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem);
    line-height: 1.7;
    text-wrap: pretty;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
}

/* Le parcours réel d'un travail, sous le titre. */
.trajet {
    width: min(100%, 880px);
    margin: 44px 0 0;
    padding: 22px 26px 24px;
    border: 1px solid var(--filet);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(12, 30, 51, 0.62), rgba(6, 15, 28, 0.74));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 32px 80px -32px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-align: left;
}

.trajet .surtitre {
    margin-bottom: 18px;
}

/*
 * La piste : une ligne d'un bout à l'autre, la part déjà parcourue en couleur, et le document
 * qui avance de halte en halte. Les cinq haltes tombent à 10, 30, 50, 70 et 90 % -- le centre de
 * chacune des cinq colonnes de `.etapes` juste en dessous, pour que le document s'arrête pile
 * au-dessus de l'étape qui s'allume.
 *
 * Hauteur fixe et positions en pixels : tout ce qui suit s'y réfère, et une hauteur en pourcentage
 * décalerait la ligne dès que la police de l'utilisateur change.
 */
.trajet-piste {
    position: relative;
    height: 34px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--filet);
}

.trajet-piste::before,
.trajet-piste::after {
    content: "";
    position: absolute;
    top: 31px;
    height: 2px;
    border-radius: 2px;
}

.trajet-piste::before {
    left: 10%;
    right: 10%;
    background: rgba(159, 176, 194, 0.18);
}

/* La part parcourue avance en même temps que le document : elle part de l'orange de l'action et
   finit sur le vert de la réussite, les deux seules couleurs vives de la page. */
.trajet-piste::after {
    left: 10%;
    width: 0;
    background: linear-gradient(90deg, var(--marque), var(--sorti));
    animation: trajet-progression 9s linear infinite;
}

/*
 * Le document. Sa position est animée avec `left` et non `transform` : un pourcentage de
 * `transform` se calcule sur la largeur de l'élément (26 px), pas sur celle de la piste -- il ne
 * pourrait donc pas viser les haltes. Un seul élément déplacé toutes les quelques secondes, le
 * coût est négligeable.
 */
.trajet-doc {
    position: absolute;
    top: 31px;
    left: 10%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 1px solid var(--filet-fort);
    border-radius: 8px;
    background: rgba(9, 21, 36, 0.96);
    color: var(--encre);
    box-shadow: 0 0 0 5px rgba(6, 15, 28, 0.85), 0 10px 24px -10px rgba(0, 0, 0, 0.9);
    animation: trajet-doc 9s linear infinite;
}

.trajet-doc svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.etapes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 12px 0 0;
    list-style: none;
}

/* Une étape à venir reste lisible (5,9:1) : elle porte le vocabulaire de l'API, pas un décor. */
.etape {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--ardoise);
    font-size: 12.5px;
    line-height: 1.45;
    opacity: 0.8;
    animation-duration: 9s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* L'icône dit le lieu (le nuage, la file, le poste, l'imprimante, la feuille sortie) ; le code
   dit ce que répond l'API au même moment. Les deux s'allument ensemble, sur la couleur héritée. */
.etape-icone {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    border: 1px solid var(--filet);
    border-radius: 9px;
    background: rgba(143, 183, 217, 0.06);
}

.etape-icone svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.etape code {
    display: block;
    font-family: var(--mono);
    font-size: 12px;
}

/* Chaque étape s'allume à son tour, sur un cycle de 9 s. */
.etape:nth-child(1) { animation-name: etape-stocke; }
.etape:nth-child(2) { animation-name: etape-file; }
.etape:nth-child(3) { animation-name: etape-reserve; }
.etape:nth-child(4) { animation-name: etape-impression; }
.etape:nth-child(5) { animation-name: etape-sorti; }

/* --- Sections ----------------------------------------------------------------- */

/*
 * Rythme vertical : assez d'air pour séparer deux sujets, pas au point de laisser croire que la
 * page est finie. Avant : 136px, soit 272px de vide entre deux sections sur un grand écran.
 */
.section {
    padding: clamp(68px, 6.4vw, 100px) 0;
    border-top: 1px solid var(--filet);
}

/*
 * Le ciel du hero revient au milieu de la page, en beaucoup plus discret : sans ces deux lueurs,
 * les 5 000 px entre le hero et le pied de page sont d'un bleu nuit parfaitement plat, et la
 * moitié de la page ne ressemble plus au reste du site.
 */
.section-lueur {
    position: relative;
    isolation: isolate;
    /*
     * La lueur déborde de 10 % de chaque côté pour que son dégradé ne s'arrête pas net sur le
     * bord : sans cette coupe, ces 10 % élargissaient la page entière et faisaient apparaître
     * une barre de défilement horizontale. `clip` plutôt que `hidden` : il coupe sans créer de
     * conteneur de défilement, donc sans rien changer pour l'en-tête fixe ni les ancres.
     */
    overflow: clip;
}

.section-lueur::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 -10%;
    background: radial-gradient(760px 420px at 18% 12%, rgba(23, 49, 77, 0.55), transparent 68%);
    pointer-events: none;
}

.section-lueur-droite::before {
    background: radial-gradient(820px 460px at 82% 20%, rgba(23, 49, 77, 0.5), transparent 68%);
}

/* En orange Printaya : c'est lui qui relie les sections entre elles. 5,6:1 sur le fond. */
.surtitre {
    margin: 0 0 16px;
    color: var(--marque);
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.03em;
}

.titre-section {
    max-width: 22ch;
    margin: 0;
    font-size: clamp(1.9rem, 1.15rem + 2.4vw, 3rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.036em;
    text-wrap: balance;
}

.intro {
    max-width: 40rem;
    margin: 18px 0 0;
    color: var(--ardoise);
    text-wrap: pretty;
}

.note {
    margin: 22px 0 0;
    color: var(--ardoise-sombre);
    font-size: 0.9rem;
}

/* Pourquoi Printaya + nouveautés */
/*
 * Le titre de la section vit dans la colonne de gauche, avec les avantages : sinon l'encadré
 * « Nouveautés » démarre sous le chapeau et laisse un vide de 400px de large en haut à droite.
 */
.pourquoi {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(32px, 5vw, 64px);
}

.pourquoi-principal .avantages {
    margin-top: 44px;
}

.avantages {
    display: grid;
    gap: 32px;
}

.avantage {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
}

.avantage-icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--filet-fort);
    border-radius: 12px;
    background: rgba(143, 183, 217, 0.07);
    color: var(--halo);
}

.avantage-icone svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avantage h3,
.version h3,
.marche h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.avantage p,
.marche p {
    margin: 0;
    color: var(--ardoise);
    font-size: 0.975rem;
    text-wrap: pretty;
}

.nouveautes {
    padding: 8px 24px;
    border: 1px solid var(--filet);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(12, 30, 51, 0.6), rgba(12, 30, 51, 0.2));
}

.nouveautes-titre {
    margin: 16px 0 0;
    color: var(--ardoise);
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 400;
}

.nouveaute {
    padding: 18px 0;
}

.nouveaute + .nouveaute {
    border-top: 1px solid var(--filet);
}

.nouveaute time {
    color: var(--ardoise-sombre);
    font-family: var(--mono);
    font-size: 12px;
}

.nouveaute h3 {
    margin: 4px 0 6px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.nouveaute p {
    margin: 0;
    color: var(--ardoise);
    font-size: 0.94rem;
}

/* Fonctionnalités : grille « bento » de cartes, chacune avec une petite maquette d'interface en HTML.
   Pas d'illustration : une maquette sobre dit ce que fait le produit, sans rien imiter. */
.bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 44px;
}

.bento-large {
    grid-column: span 2;
}

.bento-carte {
    display: grid;
    padding: 7px;
    border: 1px solid rgba(159, 176, 194, 0.1);
    border-radius: 22px;
    background: rgba(12, 30, 51, 0.25);
}

.bento-panneau {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--filet);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(20, 41, 64, 0.55) 0%, rgba(8, 19, 33, 0.88) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.2s;
}

.bento-carte:hover .bento-panneau {
    border-color: var(--filet-fort);
}

/*
 * La maquette absorbe la hauteur que la carte gagne quand sa voisine de rangée est plus haute.
 * Avec une hauteur fixe, c'est le bas de la carte qui se creusait : un trou de 100px entre la
 * maquette et le titre, sur la carte la plus large de la rangée.
 */
.bento-visuel {
    position: relative;
    /*
     * La base vaut 230px et non 0 : quand la carte n'a pas de hauteur imposée par sa rangée
     * (une colonne unique, sur mobile), une base nulle fait occuper à la maquette toute la carte
     * et le texte sort par le bas.
     */
    flex: 1 1 230px;
    min-height: 230px;
    overflow: hidden;
    background: radial-gradient(60% 70% at 50% 45%, rgba(143, 183, 217, 0.1), transparent 70%);
}

/* Les maquettes se fondent dans la carte au lieu de s'arrêter net au-dessus du texte. */
.bento-visuel::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    height: 44px;
    background: linear-gradient(transparent, rgba(9, 21, 36, 0.96));
    pointer-events: none;
}

.bento-texte {
    padding: 16px 18px 20px;
}

.bento-texte h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.018em;
}

.bento-texte p {
    margin: 0;
    color: var(--ardoise);
    font-size: 0.95rem;
    text-wrap: pretty;
}

/* Éléments d'interface communs aux maquettes */
.puce-ui {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 11px;
    border: 1px solid var(--filet-fort);
    border-radius: 8px;
    background: rgba(12, 30, 51, 0.92);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.85);
    color: #c4d0dc;
    font-size: 12.5px;
    white-space: nowrap;
}

.point {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--ardoise-sombre);
}

.point-ok {
    background: var(--sorti);
    box-shadow: 0 0 8px rgba(159, 227, 196, 0.8);
}

.point-alerte {
    background: var(--ambre);
    box-shadow: 0 0 8px rgba(242, 200, 121, 0.7);
}

.icone-ui svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icone-carree {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--filet-fort);
    border-radius: 12px;
    background: #10233a;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.9);
    color: var(--halo);
}

.icone-carree .icone-ui {
    display: block;
    width: 20px;
    height: 20px;
}

/* Fenêtre d'application commune aux maquettes */
.fenetre-ui {
    position: absolute;
    top: 22px;
    left: 50%;
    width: min(88%, 460px);
    overflow: hidden;
    border: 1px solid var(--filet-fort);
    border-radius: 12px;
    background: rgba(12, 30, 51, 0.9);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
    transform: translateX(-50%);
}

.fenetre-ui-barre {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 28px;
    padding: 0 10px;
    border-bottom: 1px solid var(--filet);
}

.pastilles {
    display: flex;
    flex: none;
    gap: 4px;
}

.pastilles i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(214, 231, 246, 0.28);
}

.fenetre-ui-titre {
    overflow: hidden;
    color: var(--ardoise);
    font-family: var(--mono);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.etat {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    white-space: nowrap;
}

.etat-ok {
    background: rgba(159, 227, 196, 0.12);
    color: var(--sorti);
}

.etat-alerte {
    background: rgba(242, 200, 121, 0.12);
    color: var(--ambre);
}

.etat-off {
    background: rgba(159, 176, 194, 0.12);
    color: var(--ardoise);
}

/* 1. Imprimantes : la liste d'un poste, et l'état de chacune */
.liste-ui {
    margin: 0;
    padding: 4px 0;
    list-style: none;
}

.liste-ui li {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 31px;
    padding: 0 12px;
    color: #c4d0dc;
    font-size: 12.5px;
}

.liste-ui li + li {
    border-top: 1px solid rgba(159, 176, 194, 0.08);
}

.liste-ui .icone-ui {
    display: block;
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--ardoise);
}

.liste-nom {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 2. Agent : le service Windows, et ses deux garanties */
.service-ui {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
}

.service-ui .marque-signe {
    flex: none;
    width: 26px;
    height: 26px;
}

.service-nom {
    flex: 1;
    min-width: 0;
    color: var(--encre);
    font-size: 12.5px;
    line-height: 1.3;
}

.service-nom small {
    display: block;
    overflow: hidden;
    color: var(--ardoise);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.puces-colonne {
    position: absolute;
    top: 122px;
    left: 50%;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 8px;
    transform: translateX(-50%);
}

.puce-ui .icone-ui {
    display: block;
    flex: none;
    width: 13px;
    height: 13px;
    color: var(--halo);
}

/* 3. Coupures : la chronologie d'une coupure réseau */
.chronologie {
    position: absolute;
    top: 50%;
    right: 22px;
    left: 22px;
    transform: translateY(-58%);
    z-index: 2;
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chronologie::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 2.5px;
    width: 1px;
    background: var(--filet-fort);
}

.chronologie li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 26px;
    color: #c4d0dc;
    font-size: 12.5px;
}

.chronologie time {
    margin-left: auto;
    color: var(--ardoise-sombre);
    font-family: var(--mono);
    font-size: 11px;
}

.chrono-attente {
    padding-left: 18px;
}

.docs {
    display: flex;
    flex: none;
}

.docs i {
    width: 16px;
    height: 20px;
    margin-left: -7px;
    border: 1px solid rgba(6, 15, 28, 0.5);
    border-radius: 3px;
    background: linear-gradient(#f3f6f9, #c9d6e2);
}

.docs i:first-child {
    margin-left: 0;
}

/* 4. Smart Routing : l'imprimante écartée, et celle qui prend le relais */
.barres {
    position: absolute;
    top: 50%;
    right: 16px;
    left: 16px;
    transform: translateY(-58%);
    z-index: 2;
    display: grid;
    gap: 4px;
}

.barre-ui {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--filet-fort);
    border-radius: 999px;
    background: rgba(12, 30, 51, 0.92);
    font-size: 12.5px;
}

.barre-ecartee {
    opacity: 0.7;
}

.barre-ecartee .barre-texte {
    text-decoration: line-through;
    text-decoration-color: rgba(159, 176, 194, 0.6);
}

.barre-texte {
    flex: 1;
    overflow: hidden;
    color: #c4d0dc;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barre-etat {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(242, 200, 121, 0.12);
    color: var(--ambre);
    font-size: 11.5px;
}

.barre-etat-ok {
    background: rgba(159, 227, 196, 0.12);
    color: var(--sorti);
}

.renvoi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    color: var(--bleu);
    font-family: var(--mono);
    font-size: 11px;
}

.renvoi .icone-ui {
    display: block;
    width: 14px;
    height: 14px;
}

/* 5. Flux : une application, trois sites */
.branches {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.branches path {
    fill: none;
    stroke: rgba(159, 176, 194, 0.3);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

.visuel-flux .icone-carree {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tuile {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 64px;
    height: 34px;
    border: 1px solid var(--filet-fort);
    border-radius: 9px;
    background: rgba(12, 30, 51, 0.92);
    color: #c4d0dc;
    font-family: var(--mono);
    font-size: 11px;
    transform: translateY(-50%);
}

.tuile-app { left: 7%; top: 50%; }
.tuile-site { right: 7%; }
.tuile-site:nth-of-type(2) { top: 20%; }
.tuile-site:nth-of-type(3) { top: 50%; }
.tuile-site:nth-of-type(4) { top: 80%; }

/* 6. Supervision : la capture du tableau de bord, cadrée en haut à gauche pour garder les
   chiffres et le premier tableau visibles quelle que soit la hauteur de la carte. */
.bento-visuel .capture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

/* Mise en route */
.fonctionnement {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
    gap: clamp(40px, 6vw, 80px);
}

.pas {
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: pas;
}

.pas li {
    position: relative;
    padding: 0 0 28px 48px;
    counter-increment: pas;
}

.pas li::before {
    content: counter(pas);
    position: absolute;
    left: 0;
    top: 1px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--filet-fort);
    border-radius: 50%;
    color: var(--halo);
    font-family: var(--mono);
    font-size: 12.5px;
}

.pas li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 36px;
    bottom: 6px;
    width: 1px;
    background: var(--filet);
}

.pas h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.pas p {
    margin: 0;
    color: var(--ardoise);
    font-size: 0.975rem;
}

.pas code {
    font-family: var(--mono);
    font-size: 0.88em;
}

.langages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-left: 48px;
}

.langages-titre {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 4px;
    color: var(--ardoise);
    font-size: 14px;
}

.langage {
    padding: 3px 9px;
    border: 1px solid var(--filet);
    border-radius: 6px;
    color: #c4d0dc;
    font-family: var(--mono);
    font-size: 12px;
}

.terminal {
    position: sticky;
    top: 32px;
    overflow: hidden;
    border: 1px solid var(--filet);
    border-radius: 14px;
    background: #071425;
    box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}

.terminal-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--filet);
    color: var(--ardoise-sombre);
    font-family: var(--mono);
    font-size: 12px;
}

.terminal pre {
    margin: 0;
    padding: 20px;
    overflow-x: auto;
    color: #c9d6e2;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.8;
}

.terminal pre + pre {
    border-top: 1px dashed var(--filet);
}

.t-com { color: var(--ardoise-sombre); }
.t-opt { color: var(--bleu); }
.t-val { color: var(--halo); }
.t-ok { color: var(--sorti); }

/* Feuille de route */
.versions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 48px;
}

.version {
    padding: 26px;
    border: 1px solid var(--filet);
    border-radius: 14px;
    background: rgba(12, 30, 51, 0.35);
}

.version-actuelle {
    border-color: rgba(159, 227, 196, 0.32);
    background: linear-gradient(180deg, rgba(159, 227, 196, 0.06), rgba(12, 30, 51, 0.3));
}

.version-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.version-nom {
    color: var(--halo);
    font-family: var(--mono);
    font-size: 13px;
}

.version ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.version li {
    position: relative;
    padding-left: 18px;
    color: var(--ardoise);
    font-size: 0.95rem;
}

.version li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 8px;
    height: 1px;
    background: var(--filet-fort);
}

/* Marchés */
.marches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 48px;
    border-top: 1px solid var(--filet);
    border-left: 1px solid var(--filet);
}

.marche {
    padding: 26px 26px 28px;
    border-right: 1px solid var(--filet);
    border-bottom: 1px solid var(--filet);
}

/* Marques d'imprimantes */
.section-marques {
    padding: clamp(64px, 8vw, 100px) 0;
    border-top: 1px solid var(--filet);
    text-align: center;
}

.section-marques .titre-section {
    margin-inline: auto;
    font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem);
}

.marques {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 44px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.marques li {
    color: #52667c;
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Appel final, pied de page, pages en préparation */
.final {
    padding: clamp(100px, 12vw, 150px) 0 0;
    text-align: center;
}

.final .titre-section,
.final .intro {
    margin-inline: auto;
}

.pied {
    padding: 110px 0 32px;
}

.pied-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.pied-marque p {
    max-width: 30ch;
    margin: 12px 0 0;
    color: var(--ardoise);
    font-size: 14px;
}

.pied-colonne h2 {
    margin: 0 0 14px;
    color: var(--ardoise-sombre);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.03em;
}

.pied-colonne ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    list-style: none;
}

.pied-bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 56px;
    padding-top: 22px;
    border-top: 1px solid var(--filet);
    color: var(--ardoise-sombre);
    font-size: 13px;
}

.ciel-page {
    min-height: 560px;
}

.page-simple {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 150px 0 110px;
    text-align: center;
}

/* Page de téléchargement */
.btn-grand {
    gap: 10px;
    height: 48px;
    padding: 0 22px;
    font-size: 16px;
}

.btn-grand svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn[aria-disabled="true"] {
    cursor: default;
    opacity: 0.75;
}

.telechargement-meta {
    margin: 16px 0 0;
    color: var(--ardoise);
    font-size: 14px;
}

.telechargement {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(40px, 6vw, 80px);
}

.telechargement-infos {
    display: grid;
    gap: 14px;
}

.carte-info {
    padding: 22px 24px;
    border: 1px solid var(--filet);
    border-radius: 14px;
    background: rgba(12, 30, 51, 0.4);
}

.carte-info h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
}

.carte-info p {
    margin: 0 0 10px;
    color: var(--ardoise);
    font-size: 0.93rem;
}

.carte-info p:last-child {
    margin-bottom: 0;
}

.liste-info {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.liste-info li {
    position: relative;
    padding-left: 18px;
    color: #c4d0dc;
    font-size: 0.93rem;
}

.liste-info li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--marque);
}

.empreinte {
    display: block;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--filet);
    border-radius: 8px;
    background: #071425;
    color: var(--halo);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.pas strong {
    color: var(--encre);
    font-weight: 600;
}

/* --- Mouvement ---------------------------------------------------------------- */

.apparait {
    animation: apparait 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.delai-1 { animation-delay: 0.08s; }
.delai-2 { animation-delay: 0.18s; }
.delai-3 { animation-delay: 0.32s; }

@keyframes apparait {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes scintille {
    from { opacity: 0.3; }
    to { opacity: 0.95; }
}

@keyframes derive {
    from { transform: translateX(-3%); }
    to { transform: translateX(3%); }
}

/*
 * Les cinq minutages suivent le document : il atteint une halte, l'étape s'allume juste après.
 * Le palier de `printing` est le plus long (45 % -> 79 %), parce que c'est le seul moment du
 * parcours qui dure réellement : imprimer prend des secondes, le reste des millisecondes.
 */
@keyframes etape-stocke {
    0%, 2% { opacity: 0.8; color: var(--ardoise); }
    5%, 94% { opacity: 1; color: var(--encre); }
    100% { opacity: 0.8; color: var(--ardoise); }
}

@keyframes etape-file {
    0%, 13% { opacity: 0.8; color: var(--ardoise); }
    17%, 94% { opacity: 1; color: var(--encre); }
    100% { opacity: 0.8; color: var(--ardoise); }
}

@keyframes etape-reserve {
    0%, 27% { opacity: 0.8; color: var(--ardoise); }
    31%, 94% { opacity: 1; color: var(--encre); }
    100% { opacity: 0.8; color: var(--ardoise); }
}

@keyframes etape-impression {
    0%, 41% { opacity: 0.8; color: var(--ardoise); }
    45%, 94% { opacity: 1; color: var(--encre); }
    100% { opacity: 0.8; color: var(--ardoise); }
}

@keyframes etape-sorti {
    0%, 84% { opacity: 0.8; color: var(--ardoise); }
    89%, 96% { opacity: 1; color: var(--sorti); }
    100% { opacity: 0.8; color: var(--ardoise); }
}

/*
 * Le document s'efface avant la fin du cycle et revient au début : sans ce fondu, on le verrait
 * repartir du bac vers le stockage à contresens, ce qui raconterait l'inverse du produit.
 */
@keyframes trajet-doc {
    0% { left: 10%; opacity: 0; }
    3%, 5% { left: 10%; opacity: 1; color: var(--encre); border-color: var(--filet-fort); }
    15%, 17% { left: 30%; }
    29%, 31% { left: 50%; }
    43%, 79% { left: 70%; }
    88%, 95% { left: 90%; opacity: 1; color: var(--sorti); border-color: rgba(159, 227, 196, 0.55); }
    100% { left: 90%; opacity: 0; color: var(--sorti); border-color: rgba(159, 227, 196, 0.55); }
}

/* La ligne colorée s'arrête exactement sous le document : 20 % de piste par halte franchie. */
@keyframes trajet-progression {
    0%, 5% { width: 0; }
    15%, 17% { width: 20%; }
    29%, 31% { width: 40%; }
    43%, 79% { width: 60%; }
    88%, 100% { width: 80%; }
}

/* --- Écrans moyens et petits --------------------------------------------------- */

@media (max-width: 1024px) {
    .nav {
        display: none;
    }

    .bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .menu-mobile {
        display: block;
    }
}

@media (max-width: 900px) {
    .pourquoi,
    .fonctionnement,
    .telechargement {
        grid-template-columns: minmax(0, 1fr);
    }

    .terminal {
        position: static;
    }

    .versions {
        grid-template-columns: minmax(0, 1fr);
    }

    .marches {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pied-colonnes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pied-marque {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .entete-actions .lien-discret {
        display: none;
    }

    .trajet {
        padding: 18px;
    }

    .etapes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 18px;
    }

    .etape {
        align-items: flex-start;
        text-align: left;
    }

    /* Sur deux colonnes, la piste ne relierait plus rien : elle disparaît, les icônes restent. */
    .trajet-piste {
        height: 0;
        margin-top: 14px;
        padding-top: 0;
    }

    .trajet-piste::before,
    .trajet-piste::after,
    .trajet-doc {
        display: none;
    }

    .actions {
        flex-direction: column;
        align-items: center;
    }

    .actions .btn {
        width: min(100%, 320px);
    }

    .marches,
    .bento {
        grid-template-columns: minmax(0, 1fr);
    }

    .bento-large {
        grid-column: auto;
    }

    .langages {
        padding-left: 0;
    }

    .terminal pre {
        padding: 16px;
        font-size: 11.5px;
    }
}

/* En dernier, pour l'emporter à spécificité égale sur les règles d'animation ci-dessus. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .apparait,
    .nuages,
    .etoiles::after {
        animation: none;
    }

    .etapes .etape {
        animation: none;
        opacity: 1;
        color: var(--encre);
    }

    .etapes .etape:last-child {
        color: var(--sorti);
    }

    /* Le parcours est figé à son aboutissement plutôt que supprimé : le document est sorti du
       bac, la ligne est parcourue en entier. L'image reste celle que l'animation raconte. */
    .trajet-piste::after {
        animation: none;
        width: 80%;
    }

    .trajet-doc {
        animation: none;
        left: 90%;
        opacity: 1;
        color: var(--sorti);
        border-color: rgba(159, 227, 196, 0.55);
    }
}