/* REVEAL STAGE — au scroll, des cartes "tableur" s'accumulent dans tous
   les sens jusqu'a remplir l'ecran, puis le logo Swifto balaie tout pour
   reveler un ecran de l'app. Anime en continu avec la position de scroll
   (scrubbing), pas au chargement : voir assets/js/reveal-stage.js. */

.reveal-stage {
    position: relative;
    /* Doit couvrir au moins SWEEP_END (6.5) + une marge, en "hauteurs
       d'ecran" (voir reveal-stage.js) : 6.5 x 100vh + un peu d'air. */
    height: 665vh;
}

.reveal-stage__pin {
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Calque 1 (fond) : l'ecran de l'app, revele a la fin --- */
.reveal-stage__screen {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 2vw, 24px);
}
/* Le mockup vient d'un design a taille fixe (1600x1110) : on le met a
   l'echelle via les unites de conteneur pour qu'il tienne dans l'espace
   dispo, quelle que soit la taille d'ecran, sans avoir a le redessiner
   en CSS responsive. Prend un maximum de place a l'ecran (contraint a
   la fois en largeur et en hauteur pour ne jamais deborder). */
.app-screenshot {
    container-type: inline-size;
    /* "max-height" ne se combine pas de facon fiable avec aspect-ratio
       dans un flex item (certains navigateurs l'ignorent et debordent,
       coupes ensuite par l'overflow:hidden du pin). On borne donc tout
       via la largeur uniquement : le 3e terme convertit une limite de
       hauteur (le viewport) en largeur equivalente via le ratio du mockup. */
    width: min(1700px, 97vw, calc(94dvh * 1600 / 1110));
    aspect-ratio: 1600 / 1110;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lifted);
    background: #F7F5F1;
}
.app-screenshot__frame {
    width: 1600px;
    height: 1110px;
    transform-origin: top left;
    transform: scale(calc(100cqw / 1600px));
}
/* Mockup decoratif : les liens/boutons ont l'air cliquables (curseur
   main) ; le bloc est aria-hidden + inert (index.php), donc aucun
   clic ni focus reel. */
.app-screenshot__frame a,
.app-screenshot__frame button {
    cursor: pointer;
}

/* --- Calque 2 : le chaos de cartes "tableur" qui s'accumulent --- */
.reveal-stage__clutter {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--canvas);
    transition: opacity .35s linear;
}
.reveal-stage__clutter.is-hidden { opacity: 0; }

/* Titre sur le fond de la scene de chaos (meme gabarit que le titre du
   hero), colle en haut a droite pour rester visible (les cartes couvrent
   surtout le centre/la gauche de l'ecran). Le flex de positionnement est
   sur un wrapper distinct : display:flex directement sur le <h2> casse
   les <br> (flex ignore les retours a la ligne, il aligne chaque bout de
   texte comme un item separe cote a cote). */
.reveal-stage__chaos-title-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: clamp(90px, 14vh, 160px) 5vw 0 0;
}
.reveal-stage__chaos-title {
    margin: 0;
    text-align: right;
    font: var(--weight-bold) clamp(26px, 7.3vw, 72px)/1.2 var(--font-ui);
    letter-spacing: var(--track-tighter);
    color: var(--ink);
}
.reveal-stage__chaos-title .accent-grad {
    /* Le clip du degrade sur le texte peut rogner le dernier caractere
       avec un tracking negatif serre : un peu d'air evite que le "n" de
       "quotidien" soit coupe. */
    display: inline-block;
    padding-right: .06em;
    margin-right: -.06em;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Volontairement moche : grille "vieil export Excel", pas le design
   system de la vitrine (pas de radius, pas d'ombre douce, bordures
   noires franches, gris de header par defaut, couleurs criardes de
   mise en forme conditionnelle). C'est le point : ca doit jurer avec
   l'ecran de l'app revele juste apres. */
.clutter-card {
    position: absolute;
    width: clamp(340px, 40vw, 600px);
    background: #fff;
    border: 1px solid #8c8c8c;
    border-radius: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
    overflow: hidden;
    opacity: 0;
    transform: scale(.6) rotate(var(--rot, 0deg));
    transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.clutter-card.is-visible {
    opacity: 1;
    transform: scale(1) rotate(var(--rot, 0deg));
}

.clutter-card__bar {
    padding: 6px 9px;
    background: #4a4a4a;
    border-bottom: 1px solid #8c8c8c;
    font: 700 clamp(11px, 1.3vw, 14px)/1.3 Arial, sans-serif;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clutter-card__row {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    font: 400 clamp(11px, 1.25vw, 13.5px)/1.4 Arial, sans-serif;
    color: #1a1a1a;
}
.clutter-card__row:nth-child(even) { background: #f2f2f2; }
.clutter-card__row > span {
    padding: 5px 8px;
    border: 1px solid #c4c4c4;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.clutter-card__row--head > span {
    background: #d9d9d9;
    color: #1a1a1a;
    font-weight: 700;
    border-color: #8c8c8c;
}

/* Couleurs de mise en forme conditionnelle "Excel par defaut", poussees
   au maximum (le but est le chaos visuel, pas la lisibilite). */
.cell--ok { background: #c6efce; color: #006100; font-weight: 700; }
.cell--warn { background: #ffeb9c; color: #8a5a00; font-weight: 700; }
.cell--bad { background: #ffc7ce; color: #9c0006; font-weight: 700; }
.cell--violet { background: #e4c7f7; color: #5b0d9c; font-weight: 700; }
.cell--blue { background: #bdd7ff; color: #0b3d91; font-weight: 700; }
.cell--orange { background: #ffd8a8; color: #9c4d00; font-weight: 700; }
.cell--type { font-style: italic; color: #6b6b6b; }

/* --- Calque 3 : le panneau qui balaie l'ecran --- */
.reveal-stage__sweep {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2.4vw, 28px);
    padding: 24px;
    /* Voile translucide de la couleur de fond du site (pas une couleur de
       marque) : ce qu'il y a derriere doit rester tres legerement
       devinable au travers, comme un filtre pose sur l'ecran. Le logo
       (enfant) est le vrai logo couleur, identique a celui du header. */
    background: rgba(247, 245, 241, .88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .2);
    transform: translateX(-120%);
    will-change: transform;
}
.reveal-stage__sweep-logo {
    width: clamp(200px, 28vw, 340px);
    height: auto;
    /* Le vrai logo couleur (meme fichier que le header), pas de filtre. */
}
.reveal-stage__sweep .reveal-stage__title {
    font: var(--weight-bold) clamp(20px, 2.6vw, 34px)/1.25 var(--font-ui);
    letter-spacing: var(--track-tight);
    color: var(--ink);
    text-align: center;
    max-width: 20ch;
}
.reveal-stage__sweep .reveal-stage__title .accent-grad {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .clutter-card,
    .reveal-stage__clutter,
    .reveal-stage__sweep { transition: none; }
}

@media (max-width: 560px) {
    .clutter-card { width: clamp(230px, 78vw, 300px); }
}