/* =====================================================================
   « NE FAITES PLUS VISITER VOTRE MAISON. FAITES-LA ESSAYER. »
   L'animation proprietaires de l'accueil (parts/essai-proprio.php).
   =====================================================================
   Tout est pilote par un attribut data-tl-pas sur la section, pose par
   essai-proprio.js dans l'ordre du scenario. Chaque « pas » n'ecrit que
   des transforms et des opacites : pas de reflow, pas de peinture lourde,
   et la carte graphique fait le travail. Rien ne bouge avec
   prefers-reduced-motion : la scene finale est simplement affichee. */

.tl-essai {
    position: relative;
    z-index: 1;
    padding: 56px 5vw 40px;
    background: #fff;
}

.tl-essai-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: center;
}

@media (min-width: 900px) {
    .tl-essai { padding: 72px 5vw 56px; }
    .tl-essai-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
    .tl-essai-texte { order: 1; }
    .tl-essai-scene { order: 2; }
}

/* ---- Le texte -------------------------------------------------------- */

.tl-essai-sur {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tl-primary-ink, #CA0025);
}

.tl-essai-titre {
    margin: 0 0 14px;
    font-size: clamp(30px, 4.2vw, 48px);
    line-height: 1.06;
    letter-spacing: -.03em;
    font-weight: 800;
    color: #101010;
    text-wrap: balance;
}

.tl-essai-titre em {
    font-style: normal;
    color: var(--tl-primary-ink, #CA0025);
}

.tl-essai-chapo {
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 1.6;
    color: #4b4842;
    max-width: 46ch;
}

/* Le recit : deux etats superposes, un seul visible a la fois. */
.tl-essai-recit {
    display: grid;
    margin-bottom: 22px;
}

.tl-essai-etape {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
}

.tl-essai[data-tl-scene="visite"] .tl-essai-etape[data-tl-etape="visite"],
.tl-essai[data-tl-scene="sejour"] .tl-essai-etape[data-tl-etape="sejour"] {
    opacity: 1;
    transform: none;
}

.tl-essai-etiquette {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 12px;
    border-radius: 100px;
    background: #f1efe9;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #6a675f;
}

.tl-essai-etiquette.is-trylidays {
    background: var(--tl-primary-soft, rgba(255, 56, 92, .1));
    color: var(--tl-primary-ink, #CA0025);
}

.tl-essai-lignes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.tl-essai-lignes li {
    font-size: 18px;
    color: #6a675f;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .4s ease, transform .4s ease;
}

.tl-essai-lignes li strong { color: #101010; font-weight: 800; font-variant-numeric: tabular-nums; }
.tl-essai-lignes li.is-zero strong { color: var(--tl-primary-ink, #CA0025); }

/* Chaque ligne s'allume a son pas. */
.tl-essai[data-tl-pas="dedans"] li[data-tl-ligne="1"],
.tl-essai[data-tl-pas="sortie"] li[data-tl-ligne="1"],
.tl-essai[data-tl-pas="sortie"] li[data-tl-ligne="2"],
.tl-essai[data-tl-pas="depart"] li[data-tl-ligne] { opacity: 1; transform: none; }

.tl-essai-sejour {
    margin: 0 0 4px;
    font-size: 18px;
    color: #101010;
}

.tl-essai-remunere {
    margin: 10px 0 2px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1B6B44;
}

.tl-essai-compteur {
    margin: 0;
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -.03em;
    color: #1B6B44;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.tl-essai-simulation {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #8d887f;
    max-width: 40ch;
}

/* ---- Les actions ------------------------------------------------------- */

.tl-essai-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
}

.tl-essai-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 100px;
    background: var(--tl-primary-gradient, linear-gradient(135deg, #FF385C 0%, #CA0025 100%));
    color: #fff;
    font-weight: 700;
    font-size: 15.5px;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(202, 0, 37, .22);
    transition: transform .18s ease, box-shadow .18s ease;
}

.tl-essai-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(202, 0, 37, .28); }

.tl-essai-controles {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tl-essai-puce,
.tl-essai-rejouer {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #ddd9d1;
    border-radius: 100px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    color: #6a675f;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.tl-essai-puce[aria-pressed="true"] { background: #101010; border-color: #101010; color: #fff; }
.tl-essai-puce:hover, .tl-essai-rejouer:hover { border-color: #101010; color: #101010; }
.tl-essai-puce:focus-visible, .tl-essai-rejouer:focus-visible, .tl-essai-cta:focus-visible { outline: 3px solid rgba(255, 56, 92, .45); outline-offset: 2px; }

@media (max-width: 899px) {
    /* Sur telephone, la scene d'abord : on la voit pendant que le texte se raconte dessous. */
    .tl-essai-scene { order: -1; }
    .tl-essai-cta { width: 100%; }
}

/* ---- La scene ---------------------------------------------------------- */

.tl-essai-scene {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 61, 70, .14), 0 0 0 1px rgba(15, 61, 70, .06);
    background: #F6F4EF;
}

.tl-essai-svg { display: block; width: 100%; height: auto; }

.tl-essai-svg text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Tout ce qui apparait/disparait partage la meme regle. */
.tl-ciel-dore, .tl-ciel-nuit, .tl-soleil, .tl-lune, .tl-etoiles,
.tl-chrono, .tl-chrono-texte, .tl-couple, .tl-valise, .tl-velo,
.tl-terrasse-scene, .tl-bulle, .tl-offre {
    opacity: 0;
    transition: opacity .6s ease;
}

.tl-voiture {
    transform: translateX(-140px);
    transition: transform .9s cubic-bezier(.22, .8, .3, 1);
}

.tl-couple {
    /* Position par variables : le JS ne fait que changer les pas, le CSS
       decide ou marche le couple. Origine au sol (y = 332). */
    transform: translate(var(--x, 150px), 332px) scale(var(--k, 1));
    transition: transform .9s cubic-bezier(.4, 0, .3, 1), opacity .4s ease;
}

.tl-porte {
    transform-box: fill-box;
    transform-origin: left center;
    transition: transform .35s ease;
}

.tl-chrono-aiguille {
    transform-box: view-box;
    transform-origin: 320px 82px;
}

.tl-fenetre { transition: fill .6s ease; }

.tl-quartier { transition: transform 1.6s linear; }

.tl-bulle { transform: translateY(6px); transition: opacity .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.tl-offre { transform: translateY(10px); transition: opacity .4s ease .1s, transform .45s cubic-bezier(.34, 1.56, .64, 1) .1s; }

.tl-etiquette-fond { transition: fill .5s ease, stroke .5s ease; }
.tl-etiquette-texte { transition: fill .5s ease; }

/* ---- SCENE 1 : LA VISITE ----------------------------------------------- */

.tl-essai[data-tl-pas="voiture"] .tl-voiture,
.tl-essai[data-tl-pas="marche"] .tl-voiture,
.tl-essai[data-tl-pas="dedans"] .tl-voiture,
.tl-essai[data-tl-pas="sortie"] .tl-voiture { transform: translateX(60px); }

.tl-essai[data-tl-pas="depart"] .tl-voiture { transform: translateX(-260px); transition-timing-function: cubic-bezier(.6, 0, .9, .6); }

.tl-essai[data-tl-pas="marche"] .tl-couple { opacity: 1; --x: 300px; }
.tl-essai[data-tl-pas="dedans"] .tl-couple { opacity: 0; --x: 300px; }
.tl-essai[data-tl-pas="dedans"] .tl-porte,
.tl-essai[data-tl-pas="sortie"] .tl-porte { transform: scaleX(.15); }

.tl-essai[data-tl-pas="dedans"] .tl-chrono,
.tl-essai[data-tl-pas="sortie"] .tl-chrono,
.tl-essai[data-tl-pas="depart"] .tl-chrono { opacity: 1; }

.tl-essai[data-tl-pas="dedans"] .tl-chrono-aiguille { animation: tl-essai-chrono 1.1s linear both; }
.tl-essai[data-tl-pas="sortie"] .tl-chrono-aiguille,
.tl-essai[data-tl-pas="depart"] .tl-chrono-aiguille { transform: rotate(216deg); }

.tl-essai[data-tl-pas="sortie"] .tl-chrono-texte,
.tl-essai[data-tl-pas="depart"] .tl-chrono-texte { opacity: 1; }

.tl-essai[data-tl-pas="sortie"] .tl-couple { opacity: 1; --x: 160px; }
.tl-essai[data-tl-pas="depart"] .tl-couple { opacity: 0; --x: 160px; }

@keyframes tl-essai-chrono {
    from { transform: rotate(0deg); }
    to   { transform: rotate(936deg); } /* deux tours et 18 « minutes » */
}

/* ---- SCENE 2 : LE SEJOUR ----------------------------------------------- */

.tl-essai[data-tl-scene="sejour"] .tl-ciel-dore { opacity: 1; }
.tl-essai[data-tl-scene="sejour"] .tl-soleil { opacity: 1; }
.tl-essai[data-tl-scene="sejour"] .tl-etiquette-fond { fill: #FF385C; stroke: #FF385C; }
.tl-essai[data-tl-scene="sejour"] .tl-etiquette-texte { fill: #FFF; }

/* Arrivee a pied, valise a la main : depuis la gauche jusqu'a la porte. */
.tl-essai[data-tl-pas="arrivee"] .tl-couple { opacity: 1; --x: 300px; transition-duration: 1.1s; }
.tl-essai[data-tl-pas="arrivee"] .tl-valise { opacity: 1; }
.tl-essai[data-tl-scene="sejour"][data-tl-pas="attente"] .tl-couple { opacity: 0; --x: -60px; transition: none; }
.tl-essai[data-tl-pas="attente"] .tl-quartier { transition: none; }

/* Pendant la remise a zero (JS), rien ne glisse. */
.tl-essai.is-reset *, .tl-essai.is-reset *::before, .tl-essai.is-reset *::after { transition: none !important; animation: none !important; }

/* Petit-dejeuner sur la terrasse : le couple, plus petit, au bord de la terrasse. */
.tl-essai[data-tl-pas="terrasse"] .tl-couple { opacity: 1; --x: 428px; --k: .82; }
.tl-essai[data-tl-pas="terrasse"] .tl-terrasse-scene { opacity: 1; }
.tl-essai[data-tl-pas="terrasse"] .tl-porte,
.tl-essai[data-tl-pas="matin"] .tl-porte,
.tl-essai[data-tl-pas="offre"] .tl-porte { transform: scaleX(.15); }
.tl-essai[data-tl-pas="terrasse"] .tl-vapeur { animation: tl-essai-vapeur 1.2s ease-in-out infinite; }

/* Decouverte du quartier : le decor defile, le couple pedale sur place. */
.tl-essai[data-tl-pas="quartier"] .tl-couple { opacity: 1; --x: 150px; --k: .9; transition-duration: .5s; }
.tl-essai[data-tl-pas="quartier"] .tl-velo { opacity: 1; }
.tl-essai[data-tl-pas="quartier"] .tl-quartier { transform: translateX(-380px); }
.tl-essai[data-tl-pas="quartier"] .tl-route-traits { animation: tl-essai-route 1.6s linear both; }

/* Nuit dans la maison. */
.tl-essai[data-tl-pas="nuit"] .tl-ciel-nuit { opacity: 1; }
.tl-essai[data-tl-pas="nuit"] .tl-soleil { opacity: 0; }
.tl-essai[data-tl-pas="nuit"] .tl-lune,
.tl-essai[data-tl-pas="nuit"] .tl-etoiles { opacity: 1; }
.tl-essai[data-tl-pas="nuit"] .tl-fenetre { fill: #FFD980; }
.tl-essai[data-tl-pas="nuit"] .tl-couple { opacity: 0; --x: 300px; }
.tl-essai[data-tl-pas="nuit"] .tl-quartier { transform: translateX(-380px); transition: none; }

/* Le matin : cafe sur la terrasse, et la bulle. */
.tl-essai[data-tl-pas="matin"] .tl-couple,
.tl-essai[data-tl-pas="offre"] .tl-couple { opacity: 1; --x: 428px; --k: .82; }
.tl-essai[data-tl-pas="matin"] .tl-terrasse-scene,
.tl-essai[data-tl-pas="offre"] .tl-terrasse-scene { opacity: 1; }
.tl-essai[data-tl-pas="matin"] .tl-vapeur,
.tl-essai[data-tl-pas="offre"] .tl-vapeur { animation: tl-essai-vapeur 1.2s ease-in-out infinite; }
.tl-essai[data-tl-pas="matin"] .tl-quartier,
.tl-essai[data-tl-pas="offre"] .tl-quartier { transform: translateX(-380px); transition: none; }
.tl-essai[data-tl-pas="matin"] .tl-bulle,
.tl-essai[data-tl-pas="offre"] .tl-bulle { opacity: 1; transform: none; }
.tl-essai[data-tl-pas="offre"] .tl-offre { opacity: 1; transform: none; }

@keyframes tl-essai-vapeur {
    0%, 100% { transform: translateY(0); opacity: .9; }
    50%      { transform: translateY(-4px); opacity: .4; }
}

@keyframes tl-essai-route {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -480; }
}

/* Le couple marche : un leger balancement tant qu'il se deplace. */
.tl-essai[data-tl-pas="marche"] .tl-perso,
.tl-essai[data-tl-pas="sortie"] .tl-perso,
.tl-essai[data-tl-pas="arrivee"] .tl-perso {
    animation: tl-essai-pas .34s ease-in-out infinite alternate;
}
.tl-essai .tl-perso-b { animation-delay: .17s; }

@keyframes tl-essai-pas {
    from { transform: translateY(0); }
    to   { transform: translateY(-3px); }
}

/* ---- Sobriete ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .tl-essai *,
    .tl-essai *::before,
    .tl-essai *::after {
        animation: none !important;
        transition: none !important;
    }
}