/* Téléphones et écrans de l'application, redessinés d'après docs/captures/.
   Les écrans sont dessinés à 375 px de large puis réduits (--k). Mêmes couleurs, mêmes
   pictogrammes, mêmes libellés que l'application ; Poppins n'est utilisé que dans ces écrans,
   comme dans l'application. */

:root {
    --vert: #15803D; --vert-clair: #DCFCE7; --ambre: #B45309; --ambre-clair: #FEF3C7; --ardoise: #64748B;
    --bleu-clair: #DBEAFE; --bleu-clair-texte: #1E40AF; --action: #2563EB; --nuit: #1F3A60;
    --famille: #0E5F59; --fond-app: #F4F6F9; --bordure-app: #E6EAF0;
    --police-app: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --titres-app: "Poppins", var(--police-app);
}
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../assets/fonts/poppins-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../assets/fonts/poppins-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }

/* Téléphone : les écrans sont dessinés à 375 px de large, puis réduits (--k) */
.telephone {
    --k: .7; position: relative; z-index: 1; flex: none;
    width: calc(375px * var(--k) + 20px); height: calc(780px * var(--k) + 20px);
    background: #101828; border-radius: 40px; padding: 10px;
    box-shadow: var(--ombre-haute), inset 0 0 0 2px #344054;
}
.telephone::before {
    content: ""; position: absolute; top: 18px; left: 50%; width: 76px; height: 20px; margin-left: -38px;
    background: #101828; border-radius: 99px; z-index: 5;
}
.telephone__ecran { width: calc(375px * var(--k)); height: calc(780px * var(--k)); border-radius: 31px; overflow: hidden; background: var(--fond-app); position: relative; }
.ecran { width: 375px; height: 780px; transform: scale(var(--k)); transform-origin: top left; position: relative; overflow: hidden; background: var(--fond-app); color: #101828; font-size: 16px; line-height: 1.4; text-align: left; }
.ecran * { box-sizing: border-box; }
.ecran .ico { width: 20px; height: 20px; }
.tel--lg { --k: .86; }
.tel--md { --k: .68; }

/* Éléments d'interface de l'application, redessinés fidèlement */
.app-entete { background: var(--famille); color: #fff; padding: 46px 16px 12px; display: flex; align-items: center; gap: 12px; }
.app-btn-carre { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; flex: none; position: relative; }
.app-btn-carre .ico { width: 22px; height: 22px; }
.app-entete__titre { flex: 1; min-width: 0; }
.app-entete__titre strong { display: block; font: 600 1.08rem/1.2 var(--titres-app); }
.app-entete__titre span { font-size: .82rem; opacity: .9; }
.app-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 99px; background: #E11D48; border: 2px solid var(--famille); font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.app-avatar { width: 28px; height: 28px; border-radius: 99px; background: #fff; color: var(--nuit); display: grid; place-items: center; font-size: .8rem; font-weight: 700; border: 2px solid var(--vert); }
.app-nav {
    position: absolute; left: 0; right: 0; bottom: 0; height: 76px; background: #fff; border-top: 1px solid var(--bordure-app);
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; text-align: center; font-size: .72rem; color: var(--ardoise); padding-bottom: 8px;
}
.app-nav span { display: grid; justify-items: center; gap: 3px; }
.app-nav .ico { width: 24px; height: 24px; }
.app-nav .actif { color: var(--vert); font-weight: 700; }
.app-nav .photo { width: 54px; height: 54px; border-radius: 16px; background: var(--famille); color: #fff; margin: 0 auto; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.app-nav .photo .ico { width: 26px; height: 26px; }
.app-contenu { padding: 18px 16px 90px; }
.app-h1 { font: 600 1.7rem/1.15 var(--titres-app); margin: 6px 0 14px; color: #101828; }
.app-h2 { font: 600 1.25rem/1.2 var(--titres-app); display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.app-compteur { background: #EAECF0; border-radius: 99px; font: 600 .8rem/1 var(--police-app); padding: 6px 10px; color: #475467; }
.app-note { display: flex; gap: 10px; color: #475467; font-size: .88rem; margin-bottom: 12px; }
.app-note .ico { width: 18px; height: 18px; margin-top: 2px; }
.app-bandeau { background: var(--bleu-clair); color: var(--bleu-clair-texte); border-radius: 12px; padding: 12px 14px; font-size: .88rem; display: flex; gap: 10px; margin-bottom: 18px; }
.app-bandeau .ico { margin-top: 2px; width: 18px; height: 18px; }
.app-carte { background: #fff; border: 1px solid #BFD9D6; border-radius: 18px; padding: 14px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(16, 24, 40, .07); }
.app-carte--neutre { border-color: #D0D5DD; }
.app-ligne { display: flex; gap: 12px; align-items: center; }
.app-vignette { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; border: 1px solid #BFD9D6; }
.app-carte strong.nom { display: block; font: 600 1.02rem/1.25 var(--titres-app); }
.app-carte .meta { color: #475467; font-size: .84rem; }
.app-choix { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.app-choix > span { font-size: .84rem; color: #475467; font-weight: 600; margin-right: 2px; }
.app-choix i { width: 48px; height: 40px; border-radius: 10px; border: 1px solid #D0D5DD; background: #fff; display: grid; place-items: center; color: var(--ardoise); }
.app-choix i.on { background: var(--vert); border-color: var(--vert); color: #fff; width: 72px; }
.app-choix i.on-ambre { background: var(--ambre-clair); border-color: var(--ambre); color: var(--ambre); }
.app-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.puce { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 5px 10px; font-size: .78rem; font-weight: 700; }
.puce .ico { width: 14px; height: 14px; }
.puce--ambre { background: var(--ambre-clair); color: var(--ambre); }
.puce--vert { background: var(--vert-clair); color: #14532D; }
.puce--gris { background: #EEF2F6; color: #475467; }
.app-personne { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; }
.app-pastille { width: 26px; height: 26px; border-radius: 99px; color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vert); margin: 0 3px; }
.app-lien { color: var(--action); font-weight: 600; font-size: .9rem; margin-top: 12px; display: block; }
.app-champ { margin-bottom: 14px; }
.app-champ label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.app-champ label small { font-weight: 400; color: #475467; }
.app-saisie { height: 46px; border: 1px solid #D0D5DD; border-radius: 12px; background: #fff; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; font-size: .95rem; }
.app-saisie--actif { border: 2px solid var(--nuit); box-shadow: 0 0 0 3px rgba(31, 58, 96, .14); }
.app-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app-photos { display: flex; gap: 10px; }
.app-photos img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; }
.app-ajout { width: 96px; height: 96px; border: 2px dashed var(--action); border-radius: 12px; color: var(--action); display: grid; place-items: center; text-align: center; font-size: .72rem; font-weight: 600; padding: 6px; }
.app-ajout .ico { width: 24px; height: 24px; margin: 0 auto 2px; }
.app-publier { background: var(--action); color: #fff; border-radius: 12px; height: 48px; display: grid; place-items: center; font-weight: 700; margin-top: 8px; }
.app-fiche { background: #fff; border-radius: 20px; box-shadow: 0 1px 3px rgba(16, 24, 40, .07); padding: 18px 16px 16px; }
.app-tri-bar { display: flex; align-items: center; gap: 10px; padding: 46px 16px 8px; }
.app-tri-bar .btn-blanc { width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); display: grid; place-items: center; color: var(--nuit); flex: none; }
.app-tri-bar .t { flex: 1; text-align: center; }
.app-tri-bar .t strong { display: block; font: 600 1.02rem/1.2 var(--titres-app); }
.app-tri-bar .t span { font-size: .8rem; color: #475467; }
.app-progres { margin: 4px 16px 14px; height: 5px; background: #E4E7EC; border-radius: 99px; overflow: hidden; }
.app-progres i { display: block; width: 24%; height: 100%; background: var(--vert); border-radius: 99px; }
.app-tri-carte { margin: 0 16px; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 24px rgba(16, 24, 40, .14); }
.app-tri-carte > img { width: 100%; height: 400px; object-fit: cover; }
.app-tri-info { padding: 14px 16px 16px; position: relative; }
.app-tri-info .meta { font-size: .84rem; color: #475467; }
.app-tri-info .nom { font: 600 1.35rem/1.2 var(--titres-app); display: block; margin: 2px 0 10px; padding-right: 44px; }
.app-tri-info .i { position: absolute; right: 14px; top: 16px; width: 36px; height: 36px; border-radius: 99px; border: 1px solid #E4E7EC; display: grid; place-items: center; color: var(--nuit); }
.app-tri-info .app-puces { margin: 0; }
.app-tri-actions { display: flex; justify-content: space-around; align-items: flex-start; padding: 16px 12px 0; text-align: center; font-size: .78rem; color: #475467; }
.app-tri-actions div { width: 33%; display: grid; justify-items: center; gap: 6px; }
.app-rond { border-radius: 99px; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(16, 24, 40, .14); }
.app-rond--m { width: 56px; height: 56px; color: var(--ardoise); }
.app-rond--ambre { width: 52px; height: 52px; color: var(--ambre); }
.app-rond--vert { width: 64px; height: 64px; background: var(--vert); color: #fff; box-shadow: 0 8px 18px rgba(21, 128, 61, .4); }
.app-rond .ico { width: 26px; height: 26px; }
.app-rond--vert .ico { width: 30px; height: 30px; }
.app-aide { text-align: center; color: #475467; font-size: .85rem; margin-top: 14px; }


.tri { position: absolute; inset: 0; background: var(--fond-app); color: #101828; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.tri .app-tri-bar { padding-top: 48px; }
.tri__pile { position: relative; margin: 0 16px; height: 505px; }
.tri__carte {
    position: absolute; inset: 0 0 auto 0; height: 496px; background: #fff; border-radius: 22px; overflow: hidden;
    box-shadow: 0 10px 24px rgba(16, 24, 40, .14); cursor: grab; transition: transform .32s cubic-bezier(.2, .8, .3, 1), opacity .32s; will-change: transform;
}
.tri__carte { touch-action: none; }
.tri__carte.glisse { transition: none; cursor: grabbing; }
.tri__carte img { width: 100%; height: 346px; object-fit: cover; pointer-events: none; }
.tri__sceau {
    position: absolute; top: 20px; padding: 6px 14px; border-radius: 10px; border: 3px solid currentColor; font: 700 1.1rem/1 var(--titres-app);
    text-transform: uppercase; opacity: 0; background: rgba(255, 255, 255, .9); pointer-events: none;
}
.tri__sceau--coeur { left: 20px; color: var(--vert); transform: rotate(-8deg); }
.tri__sceau--non { right: 20px; color: var(--ardoise); transform: rotate(8deg); }
.tri__sceau--main { left: 50%; margin-left: -62px; color: var(--ambre); }
.tri__actions { display: flex; justify-content: space-around; align-items: flex-start; padding: 8px 10px 0; }
.tri__actions button { background: none; border: 0; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: 6px; width: 33%; font: inherit; font-size: .78rem; color: #475467; }
.tri__actions button:active .app-rond { transform: scale(.92); }
.tri__fin { position: absolute; inset: 0; background: var(--fond-app); display: none; flex-direction: column; justify-content: center; text-align: center; padding: 56px 28px 28px; gap: 14px; }
.tri.est-fini .tri__fin { display: flex; }
.tri__fin h4 { font-size: 1.5rem; color: #101828; }
.tri__fin p { color: #475467; font-size: .95rem; }
.tri__bilan { display: flex; justify-content: center; gap: 14px; margin: 6px 0; }
.tri__bilan span { background: #fff; border-radius: 14px; padding: 12px 14px; display: grid; justify-items: center; gap: 4px; min-width: 76px; font: 600 1.4rem/1 var(--titres-app); box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }
.tri__bilan small { font: 400 .72rem/1.1 var(--police-app); color: #475467; }
.tri__fin button, .tri__annuler { font: 600 .92rem var(--police-app); border-radius: 12px; border: 0; cursor: pointer; }
.tri__fin .btn { margin: 6px auto 0; width: 100%; max-width: 260px; }
.tri__fin #tri-recommencer { background: none; color: var(--ardoise); font-weight: 500; font-size: .85rem; padding: 6px 12px; border-radius: 6px; cursor: pointer; text-decoration: underline; }
.tri__fin #tri-recommencer:hover { color: var(--action); }
.tri__annuler { background: none; color: var(--action); padding: 4px 8px; }
.tri__sous-barre { display: flex; justify-content: center; margin-top: 4px; }

/* Invitation à toucher : tant que personne n'a essayé, la carte du dessus se penche vers la droite
   et le bouton « Coup de cœur » pulse doucement. Tout s'arrête à la première interaction. */
@keyframes tri-invite { 0%, 100% { transform: none; } 30% { transform: translateX(22px) rotate(2.6deg); } 55% { transform: translateX(-4px) rotate(-.4deg); } 75% { transform: none; } }
@keyframes tri-sceau-invite { 0%, 100% { opacity: 0; } 30% { opacity: .95; } 60% { opacity: 0; } }
@keyframes tri-pouls { 0% { box-shadow: 0 8px 18px rgba(21, 128, 61, .4), 0 0 0 0 rgba(21, 128, 61, .5); } 70%, 100% { box-shadow: 0 8px 18px rgba(21, 128, 61, .4), 0 0 0 18px rgba(21, 128, 61, 0); } }
.tri__carte.indice { animation: tri-invite 1.5s ease-in-out; }
.tri__carte.indice .tri__sceau--coeur { animation: tri-sceau-invite 1.5s ease-in-out; }
.tri:not(.a-interagi) [data-reponse="coeur"] .app-rond { animation: tri-pouls 2.2s ease-out infinite; }
.tri__aide { font-size: .85rem; color: #475467; }
.tri.a-interagi .tri__aide { display: none; }
.tri:not(.a-interagi) .tri__annuler { display: none; }
@media (prefers-reduced-motion: reduce) {
    .tri__carte.indice, .tri__carte.indice .tri__sceau--coeur, .tri:not(.a-interagi) [data-reponse="coeur"] .app-rond { animation: none; }
}