/* ===== LES MAQUETTES VIVANTES · jimmy-amory.fr · 19/08/2026 =====
   Partage par index.html et realisations.html.

   L IDEE, dictee par Jimmy : « au scroll le site s ouvre progressivement en prenant
   absolument toute la page, comme si on etait reellement sur le site ». L encadre
   d ordinateur n est donc pas une vignette : c est un point de depart. Il grandit
   jusqu a occuper l ecran entier, le chrome du navigateur s efface, les coins
   s aplatissent, et il ne reste que le site. Le clic l ouvre pour de vrai.

   TROIS PIEGES PAYES EN ECRIVANT CE FICHIER, tous mesures :

   1. UNE VARIABLE CSS N EST PAS UN NOMBRE. `calc(16% * var(--ouv))` fait jeter toute
      la declaration en silence tant que la variable n est pas declaree par
      `@property`. Mesure : largeur bloquee a 823 px de bout en bout.

   2. UNE `transition` SUR UNE LARGEUR PILOTEE PAR UNE VARIABLE LA GELE. Mesure :
      avec la transition, 823 px a l ouverture 0 ET a l ouverture 1 ; sans elle,
      823 px puis 980 px. On ne met JAMAIS de transition sur ce qu on pilote soi-meme.

   3. `body { overflow-x: hidden }` EMPECHE `position: sticky` DE COLLER. C est la
      regle du book, deja payee deux fois : on passe a `clip`, qui coupe pareil mais
      ne cree pas de zone de defilement. Sans ca, rien ne s epingle et le site ne
      prend jamais l ecran.
*/

@property --ouv {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

/* piege 3 · sans cette ligne, aucun epinglage ne fonctionne */
body { overflow-x: clip; }

/* ---------- la piste : c est sa hauteur qui donne la duree de l ouverture ---------- */
.maquette-bloc {
    position: relative;
    height: 240vh;
    margin-top: 10px;
}

.maquette-colle {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* ---------- le cadre, qui passe d un ordinateur pose a l ecran entier ---------- */
.maquette-cadre {
    --w0: min(880px, 64vw);           /* largeur de depart */

    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;

    /* PIEGE SIGNALE PAR JIMMY, ET C ETAIT UNE ERREUR DE CONCEPTION · « on ne voit que
       la moitie de la barre du haut du site en apercu ». Je remplissais le cadre EN
       COUVRANT : des que le cadre n avait pas exactement la proportion 16:10 du site
       rendu, le trop-plein etait rogne, moitie en haut moitie en bas, et ce qui se
       trouve tout en haut d un site, c est justement sa barre de navigation.
       Sur un ecran 1512x861, l ecart etait de 84 px : 42 px manges en haut.
       LA VRAIE REPONSE n est pas de mieux rogner, c est de ne JAMAIS avoir a rogner :
       on donne au cadre la PROPORTION DE L ECRAN du visiteur (--rap, pose par le
       moteur), a tous les instants de l ouverture. La vitre garde donc la meme
       proportion du debut a la fin, le site s y inscrit exactement, et il n y a ni
       rognage ni bande vide. */
    width:  calc(var(--w0) + (100vw - var(--w0)) * var(--ouv, 0));
    height: calc((var(--w0) + (100vw - var(--w0)) * var(--ouv, 0)) * var(--rap, .625)
                 + 42px * (1 - var(--ouv, 0)));
    border-radius: calc(16px * (1 - var(--ouv, 0)));
    box-shadow: 0 calc(30px * (1 - var(--ouv, 0))) calc(70px * (1 - var(--ouv, 0)))
                rgba(0, 0, 0, calc(.55 * (1 - var(--ouv, 0))));
    background: #0c0c0c;
}

/* la barre du navigateur se retracte puis disparait : on quitte la maquette */
.maquette-cadre .browser-header {
    height: calc(42px * (1 - var(--ouv, 0)));
    min-height: 0;
    padding: 0 16px;
    opacity: calc(1 - var(--ouv, 0) * 2.4);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    /* la barre du site est pensee pour un fond sombre : sur le theme clair elle
       devenait blanc sur blanc et l adresse disparaissait. On la repose ici avec
       un gris neutre, lisible dans les deux themes (mesure : 15,4 et 18,2). */
    background: rgba(128, 128, 128, .16);
    border-bottom: 1px solid rgba(128, 128, 128, .22);
}
.maquette-cadre .browser-url {
    flex: 1;
    text-align: center;
    font-size: .78rem;
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(128, 128, 128, .14);
    color: var(--color-text, #222);
    opacity: .8;
}
.maquette-cadre .browser-dots { display: flex; gap: 6px; }
.maquette-cadre .browser-dots span { width: 10px; height: 10px; border-radius: 50%; }
.maquette-cadre .browser-dots span:nth-child(1) { background: #ff5f57; }
.maquette-cadre .browser-dots span:nth-child(2) { background: #ffbd2e; }
.maquette-cadre .browser-dots span:nth-child(3) { background: #28c840; }

/* ---------- la vitre : le vrai site, mis a l echelle par le moteur ---------- */
.vitre {
    position: relative;
    width: 100%;
    height: calc(100% - 42px * (1 - var(--ouv, 0)));
    overflow: hidden;
    background: #0c0c0c;
}
.vitre iframe {
    position: absolute;
    top: 0; left: 0;
    border: 0;
    transform-origin: 0 0;
    /* sans ca, la molette est avalee par le site interieur et la page ne defile plus */
    pointer-events: none;
    background: #0c0c0c;
}
.vitre.ordi iframe { width: 1440px; height: calc(1440px * var(--rap, .625)); }
.vitre.tel  iframe { width: 390px;  height: 844px; }

/* ---------- l invitation, qui grandit avec le cadre ---------- */
/* l invitation ne doit pas rester plantee au milieu pendant qu on parcourt le site :
   elle sert AVANT (pour dire qu on peut entrer), pas pendant. */
.maquette-bloc.en-plein .maquette-invite { opacity: 0; }
.maquette-invite {
    position: absolute;
    left: 50%;
    transition: opacity .3s ease;
    bottom: calc(18px + 30px * var(--ouv, 0));
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: calc(10px + 4px * var(--ouv, 0)) calc(20px + 10px * var(--ouv, 0));
    border-radius: 50px;
    font-size: calc(.85rem + .1rem * var(--ouv, 0));
    font-weight: 600;
    white-space: nowrap;
    background: rgba(12, 12, 12, .74);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
    z-index: 3;
}
.maquette-cadre:hover .maquette-invite {
    background: var(--color-primary, #cfae4e);
    border-color: transparent;
    color: #14110a;
}
.maquette-invite .fl { transition: transform .3s ease; }
.maquette-cadre:hover .maquette-invite .fl { transform: translateX(4px); }

/* ---------- la barre de commande, en plein ecran seulement ----------
   Elle ne vit QUE pendant le temps ou le site occupe l ecran : c est la qu on est
   enferme et qu il faut une porte. Elle est posee HORS du lien qui recouvre le
   cadre, sinon un clic sur un bouton ouvrirait le site au lieu d agir. */
.maquette-commandes {
    position: absolute;
    top: 18px; right: 18px;
    display: flex; gap: 10px;
    z-index: 6;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .34s ease, transform .34s ease;
}
.maquette-bloc.en-plein .maquette-commandes {
    opacity: 1; transform: none; pointer-events: auto;
}
.maquette-commandes button {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border-radius: 50px; cursor: pointer;
    font: 600 13px/1.2 inherit; white-space: nowrap;
    color: #fff; background: rgba(14,14,16,.66);
    border: 1px solid rgba(255,255,255,.20);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 8px 26px rgba(0,0,0,.34);
    transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.maquette-commandes button:hover {
    background: var(--color-primary, #cfae4e); color: #14110a; border-color: transparent;
}
.maquette-commandes button:focus-visible {
    outline: 2px solid var(--color-primary, #cfae4e); outline-offset: 3px;
}

/* ---------- LA BARRE DU SITE SE REPLIE PENDANT L APERCU ----------
   Demande de Jimmy : « cette barre cache le site dessous au scroll ». Pendant qu on
   parcourt une maquette en plein ecran, la grande barre de navigation n a plus
   aucune raison d occuper le haut de l ecran : on est CHEZ LE CLIENT, pas chez
   Jimmy. Elle se replie donc en une petite pastille « ← Jimmy Amory », qui dit en
   trois mots ou l on est et comment revenir. Elle reprend sa taille des que
   l apercu se referme, sans que rien ne soit detruit. */
body.apercu-plein .nav-pill-wrap {
    opacity: 0;
    transform: translateX(-50%) translateY(-14px) scale(.96);
    pointer-events: none;
}
.nav-pill-wrap { transition: opacity .3s ease, transform .3s ease; }

#mini-jimmy {
    position: fixed;
    top: 18px; left: 18px;
    z-index: 1001;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px 9px 12px;
    border-radius: 50px;
    font: 600 13px/1.2 var(--font-family, system-ui), system-ui, sans-serif;
    text-decoration: none; white-space: nowrap;
    color: #fff;
    background: rgba(14, 14, 16, .66);
    border: 1px solid rgba(255, 255, 255, .20);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .34);
    opacity: 0;
    transform: translateY(-12px) scale(.94);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, background .22s ease, color .22s ease;
}
body.apercu-plein #mini-jimmy {
    opacity: 1; transform: none; pointer-events: auto;
}
#mini-jimmy:hover {
    background: var(--color-primary, #cfae4e); color: #14110a; border-color: transparent;
}
#mini-jimmy svg { flex: 0 0 auto; transition: transform .22s ease; }
#mini-jimmy:hover svg { transform: translateX(-3px); }

@media (max-width: 900px) {
    /* pas d apercu plein ecran sur telephone : la barre ne se replie jamais */
    body.apercu-plein .nav-pill-wrap { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
    #mini-jimmy { display: none; }
}

/* le fil d avancement : ou en est-on DANS le site qu on parcourt. Sans lui, on ne
   sait pas si on en a vu le quart ou les trois quarts, et on ne sait pas non plus
   qu il va bientot se refermer. */
.maquette-fil {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    z-index: 6;
    background: rgba(255,255,255,.12);
    opacity: 0; transition: opacity .3s ease;
    pointer-events: none;
}
.maquette-bloc.en-plein .maquette-fil { opacity: 1; }
.maquette-fil i {
    display: block; height: 100%;
    width: calc(var(--avance, 0) * 100%);
    background: var(--color-primary, #cfae4e);
}
.maquette-pc {
    position: absolute; right: 18px; bottom: 14px;
    font: 600 11px/1 inherit; letter-spacing: .08em;
    color: rgba(255,255,255,.72);
    text-shadow: 0 1px 8px rgba(0,0,0,.8);
    z-index: 6; opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.maquette-bloc.en-plein .maquette-pc { opacity: 1; }

/* ---------- le telephone, qui s efface quand le site prend l ecran ---------- */
.maquette-tel {
    position: absolute;
    right: calc(50% - min(880px, 64vw) / 2 - 34px);
    bottom: calc(50% - min(880px, 64vw) * .3125 - 30px);
    width: 168px;
    border-radius: 24px;
    overflow: hidden;
    z-index: 4;
    border: 3px solid rgba(255, 255, 255, .14);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .55);
    opacity: calc(1 - var(--ouv, 0) * 2.2);
    pointer-events: none;
}
.maquette-tel .vitre.tel { height: auto; aspect-ratio: 390 / 844; }
.maquette-tel .mobile-notch {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 54px; height: 14px; background: #000;
    border-radius: 0 0 10px 10px; z-index: 2;
}

/* ---------- la version simple, pour l accueil : un cadre pose, sans epinglage ---------- */
.maquette-simple { position: relative; max-width: 980px; margin: 0 auto; }
.maquette-simple .maquette-cadre {
    --w0: 100%;
    width: 100%;
    height: auto;
    height: auto;
    aspect-ratio: 1440 / calc(1440 * var(--rap, .625) + 42);
    border-radius: 14px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}
.maquette-simple .browser-header { height: 42px; opacity: 1; }
.maquette-simple .vitre { height: calc(100% - 42px); }
.maquette-simple .maquette-tel {
    right: -14px; bottom: -44px; width: 158px;
    opacity: 1;
}
.maquette-simple .maquette-invite { bottom: 18px; }

/* ---------- telephone : on ne peut pas prendre « tout l ecran » a 375 px ---------- */
@media (max-width: 900px) {
    /* sur telephone il n y a pas de « plein ecran » a prendre : le cadre est deja
       aussi large que l ecran, et il n y a donc rien a quitter. */
    .maquette-commandes { display: none; }
    .maquette-bloc { height: auto; margin-top: 28px; }
    .maquette-colle { position: static; height: auto; overflow: visible; display: block; }
    .maquette-cadre {
        width: 100%; height: auto; aspect-ratio: 1440 / 942;
        border-radius: 14px;
    }
    .maquette-cadre .browser-header { height: 38px; opacity: 1; }
    .vitre { height: calc(100% - 38px); }
    .maquette-tel {
        position: static; width: 132px; margin: 20px auto 0;
        opacity: 1; display: block;
    }
    .maquette-tel .vitre.tel { height: auto; aspect-ratio: 390 / 844; }
    .maquette-invite { bottom: 12px; font-size: .78rem; padding: 8px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .maquette-bloc { height: auto; }
    .maquette-colle { position: static; height: auto; display: block; }
    .maquette-cadre { width: 100%; height: auto; aspect-ratio: 1440 / 942; border-radius: 14px; }
    .maquette-cadre .browser-header { height: 42px; opacity: 1; }
    .vitre { height: calc(100% - 42px); }
}