/* POS — "Swifto s'adapte a tous vos POS" : deux mockups d'appareil
   (ordinateur portable, tablette) affichant le meme dashboard que la
   sequence chaos->reveal, cote a cote sur une seule ligne avec leur
   libelle en dessous. */

#pos {
    padding-bottom: 0;
}

/* Le titre reprend le meme gabarit que les autres gros titres de la
   page (hero, chaos, sweep) au lieu du .section-title plus petit du
   design system d'origine - coherence visuelle entre tous les titres. */
#pos .section-title {
    font: var(--weight-bold) clamp(24px, 7vw, 52px)/1.25 var(--font-ui);
    letter-spacing: var(--track-tight);
    color: var(--ink);
}
#pos .section-title .accent-grad {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pos-footnote {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--body);
}

/* Cette section a besoin de plus de place que le .wrap standard
   (1140px) pour laisser les mockups respirer. */
#pos .wrap {
    max-width: 1560px;
}

/* Les deux appareils cote a cote sur une seule ligne (au lieu du
   quinconce empile) : plus compact, chacun avec son libelle centre en
   dessous. Repasse en colonne (un appareil par ligne) des que la
   largeur manque. */
.pos-showcase {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(32px, 5vw, 64px);
    margin-top: 64px;
    margin-bottom: 40px;
}

.pos-showcase__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.pos-showcase__item.is-visible { opacity: 1; transform: none; }

.device-frame__label {
    margin: 0;
    text-align: center;
    font: var(--weight-semibold) 15px/1.4 var(--font-ui);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--body);
}

/* ============================================================
   Mockups fideles aux mesures px du design "Swifto Mockups.dc.html" :
   chaque appareil est construit a sa taille reelle (position absolue,
   pixels fixes, aucun pourcentage approximatif), puis l'ensemble
   (chrome + dashboard deja cale dedans) est mis a l'echelle EN UNE
   SEULE FOIS via un wrapper responsive (meme technique que
   .app-screenshot). Ca evite tout ecart d'arrondi ou de ratio qui
   provoquait des bandes vides ou du rognage.
   ============================================================ */

.device-mock { container-type: inline-size; overflow: hidden; }
.device-mock__canvas {
    position: relative;
    transform-origin: top left;
}

/* Le dashboard est rendu a une largeur choisie pour que son ratio
   colle exactement a celui de l'ecran cible (1776px pour l'ecran
   1512x945 du portable, 1589px pour le 1194x834 de la tablette) :
   zero bande vide, zero rognage. La largeur/scale sont fixees en
   inline sur chaque instance (voir index.php). */
.dm-dashboard {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
}
.dm-dashboard a,
.dm-dashboard button { cursor: pointer; }

/* --- Ordinateur portable (canvas fixe 1760 x 1013px) --- */
/* Largeur calculee pour que la hauteur rendue soit la meme que celle
   de la tablette (~340px de haut a taille max) : les 2 appareils
   paraissent du meme gabarit cote a cote au lieu que le PC ecrase
   visuellement l'iPad. */
.device-mock--laptop {
    width: min(680px, 76vw);
    aspect-ratio: 1760 / 1013;
}
.device-mock--laptop .device-mock__canvas {
    width: 1760px;
    height: 1013px;
    transform: scale(calc(100cqw / 1760px));
}
.dm-laptop-lid {
    position: absolute;
    left: 106px;
    top: 0;
    width: 1548px;
    height: 979px;
    border-radius: 20px 20px 6px 6px;
    background: linear-gradient(180deg, #3A3A3C, #1D1D1F);
    box-shadow: 0 50px 90px -46px rgba(27, 26, 23, .6);
}
.dm-laptop-screen {
    position: absolute;
    left: 18px;
    top: 16px;
    width: 1512px;
    height: 945px;
    border-radius: 6px;
    overflow: hidden;
    background: #F7F5F1;
}
.dm-laptop-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 210px;
    height: 22px;
    border-radius: 0 0 12px 12px;
    background: #1D1D1F;
}
.dm-laptop-neck {
    position: absolute;
    left: 106px;
    top: 979px;
    width: 1548px;
    height: 12px;
    background: linear-gradient(180deg, #1D1D1F, #2C2C2E);
}
.dm-laptop-base {
    position: absolute;
    left: 0;
    top: 991px;
    width: 1760px;
    height: 22px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, #C6C6C9, #9A9A9E);
    box-shadow: 0 26px 46px -26px rgba(27, 26, 23, .55);
}
.dm-laptop-base-notch {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 190px;
    height: 9px;
    border-radius: 0 0 9px 9px;
    background: #8E8E93;
}

/* --- Tablette (canvas fixe 1230 x 870px) --- */
.device-mock--tablet {
    width: min(553px, 62vw);
    aspect-ratio: 1230 / 870;
}
.device-mock--tablet .device-mock__canvas {
    width: 1230px;
    height: 870px;
    transform: scale(calc(100cqw / 1230px));
}
.dm-tablet-body {
    position: absolute;
    inset: 0;
    border-radius: 44px;
    background: linear-gradient(145deg, #3A3A3C, #1D1D1F);
    box-shadow: 0 50px 90px -46px rgba(27, 26, 23, .6);
}
.dm-tablet-screen {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 1194px;
    height: 834px;
    border-radius: 28px;
    overflow: hidden;
    background: #F7F5F1;
}
.dm-tablet-camera {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: #48484A;
}
.dm-tablet-btn {
    position: absolute;
    right: -3px;
    width: 3px;
    height: 70px;
    border-radius: 2px;
    background: #8E8E93;
}
.dm-tablet-btn--1 { top: 150px; }
.dm-tablet-btn--2 { top: 240px; }
.dm-tablet-btn-top {
    position: absolute;
    top: -3px;
    right: 190px;
    width: 90px;
    height: 3px;
    border-radius: 2px;
    background: #8E8E93;
}

@media (prefers-reduced-motion: reduce) {
    .pos-showcase__item { transition: none; opacity: 1; transform: none; }
}