/* Site de Joris v5 (08/11/2026, 20 h 45) : la vie. Mouvement, photos, icônes ; léger (CSS et un peu de JS, aucune bibliothèque). Chargé après pro.css. */
.sec { padding: 104px 0; }
.entete-sec { margin-bottom: 52px; }

/* Haut de page centré, lumière vivante */
.haut { position: relative; overflow: hidden; padding-top: 92px; text-align: center; background: var(--fond-2); }
.haut .texte { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }
.haut .intro { margin: 24px auto 32px; }
.haut .boutons { justify-content: center; }
.haut .note { text-align: center; }
.aurore { position: absolute; inset: -20% -10% auto; height: 900px; z-index: 0; pointer-events: none; filter: blur(70px); opacity: .55; }
.aurore i { position: absolute; border-radius: 50%; }
.aurore i:nth-child(1) { width: 520px; height: 520px; left: 8%; top: 18%; background: #d8d0fb; animation: derive1 18s ease-in-out infinite alternate; }
.aurore i:nth-child(2) { width: 460px; height: 460px; right: 6%; top: 8%; background: #cfe0ff; animation: derive2 22s ease-in-out infinite alternate; }
.aurore i:nth-child(3) { width: 300px; height: 300px; left: 46%; top: 42%; background: #f3e4c4; opacity: .7; animation: derive3 16s ease-in-out infinite alternate; }
@keyframes derive1 { to { transform: translate(120px, 60px) scale(1.15); } }
@keyframes derive2 { to { transform: translate(-140px, 80px) scale(.9); } }
@keyframes derive3 { to { transform: translate(-90px, -50px) scale(1.2); } }
.mots span { display: inline-block; opacity: 0; transform: translateY(.45em); animation: mot .8s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes mot { to { opacity: 1; transform: none; } }
.haut .sur, .haut .intro, .haut .boutons, .haut .note { opacity: 0; animation: mot .8s cubic-bezier(.2, .7, .2, 1) forwards; }
.haut .sur { animation-delay: .05s; } .haut .intro { animation-delay: .55s; } .haut .boutons { animation-delay: .7s; } .haut .note { animation-delay: .85s; }

/* Vitrine qui se redresse au défilement, notifications autour */
.scene3d { perspective: 1600px; margin-top: 64px; position: relative; z-index: 1; }
.vitrine { transform-origin: 50% 0; transform: rotateX(var(--incl, 16deg)) scale(var(--ech, .94)); transition: transform .1s linear; will-change: transform; text-align: left; }
.bulles-vie { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.notif { position: absolute; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border: 1px solid #e6e3f3; border-radius: 14px; padding: 11px 15px; font-size: 14px; color: var(--encre); box-shadow: 0 18px 40px rgba(11, 26, 51, .14); opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .6s, transform .6s cubic-bezier(.2, .7, .2, 1); white-space: nowrap; }
.notif.vue { opacity: 1; transform: none; }
.notif i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.notif i svg { width: 15px; height: 15px; }
.notif small { display: block; color: var(--gris); font-size: 12px; }
.notif.n1 { left: -2%; top: 22%; } .notif.n1 i { background: #e8f5ee; }
.notif.n2 { right: -3%; top: 12%; } .notif.n2 i { background: #efecfb; }
.notif.n3 { left: 2%; top: 64%; } .notif.n3 i { background: #eef2ff; }
.notif.n4 { right: 0; top: 56%; } .notif.n4 i { background: #fdf3e1; }

/* Défilé des tâches réelles */
.defile { padding: 34px 0 30px; border-bottom: 1px solid var(--trait); overflow: hidden; }
.defile p { text-align: center; font-size: 13.5px; color: var(--gris); margin-bottom: 18px; letter-spacing: .02em; }
.defile .rails { display: grid; gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.rang { display: flex; gap: 10px; width: max-content; animation: glisse 80s linear infinite; }
.rang.inv { animation-direction: reverse; animation-duration: 95s; }
.rails:hover .rang { animation-play-state: paused; }
.rang span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--trait); font-size: 14.5px; color: var(--texte); }
.rang span svg { width: 15px; height: 15px; }
.rang span b { color: var(--encre); font-weight: 600; }
@keyframes glisse { to { transform: translateX(-50%); } }

/* Colonnes : icônes animées, compteurs */
.colonnes svg { transition: transform .4s; }
.colonnes > div:hover svg { transform: translateY(-3px); }
.compteur { font-variant-numeric: tabular-nums; }

/* Usages : photo + carte de demande, réponse qui s'écrit */
.panneau.photo { background: none; padding: 0; grid-template-columns: 1.05fr .95fr; gap: 28px; min-height: 0; align-items: stretch; }
.panneau.photo::before { display: none; }
.cadre-photo { position: relative; border-radius: 22px; overflow: hidden; min-height: 440px; background: #e9e6df; }
.cadre-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.profil.actif .cadre-photo img { transform: scale(1); }
.cadre-photo .demande { position: absolute; left: 22px; right: 22px; bottom: 22px; }
.cote-reponse { background: var(--lavande); border-radius: 22px; padding: 34px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.cote-reponse::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(120deg, rgba(255, 255, 255, .25) 0 1px, transparent 1px 90px); }
.cote-reponse .reponse { opacity: 0; transform: translateY(12px); transition: opacity .6s .9s, transform .6s .9s; }
.profil.actif .cote-reponse .reponse { opacity: 1; transform: none; }
.cote-reponse .tape { position: relative; display: inline-flex; gap: 4px; padding: 10px 14px; background: #fff; border-radius: 12px; align-self: flex-start; margin-bottom: 14px; box-shadow: 0 8px 20px rgba(11, 26, 51, .08); }
.cote-reponse .tape i { width: 6px; height: 6px; border-radius: 50%; background: var(--mauve); animation: point 1.2s infinite; }
.cote-reponse .tape i:nth-child(2) { animation-delay: .15s; } .cote-reponse .tape i:nth-child(3) { animation-delay: .3s; }
@keyframes point { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.liste-icones { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; margin-top: 34px; padding: 0; }
.liste-icones li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--encre); }
.liste-icones li i { width: 34px; height: 34px; border-radius: 10px; background: #f3f1ec; display: grid; place-items: center; flex: none; }
.liste-icones li i svg { width: 17px; height: 17px; }
.liste-icones li span { padding-top: 6px; line-height: 1.4; }

/* Comment ça marche : fil qui se remplit */
.lignes { position: relative; border-top: 0; }
.lignes::before { content: ""; position: absolute; left: 15px; top: 40px; bottom: 40px; width: 1px; background: var(--trait); }
.lignes .fil-vif { position: absolute; left: 15px; top: 40px; width: 1px; height: var(--avance, 0px); max-height: calc(100% - 80px); background: linear-gradient(var(--mauve), var(--bleu)); transition: height .2s linear; }
.ligne { border-bottom: 0; padding: 30px 0; }
.ligne .titre span { position: relative; z-index: 1; background: #fff; transition: background .4s, color .4s, border-color .4s; }
.ligne.vu .titre span { background: var(--encre); color: #fff; border-color: var(--encre); }
.ligne .mini-carte { transform: translateX(18px); opacity: 0; transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s; }
.ligne.vu .mini-carte { transform: none; opacity: 1; }

/* Film : compacte, dans une seule zone */
.film-zone { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.film-zone .legende { display: block; padding: 0; }
.film-zone .legende h3 { font-size: 34px; margin-bottom: 14px; }
.film-zone .media { box-shadow: 0 30px 70px rgba(11, 26, 51, .18); }
.film-zone .media .lecture span { animation: pouls 2.6s ease-in-out infinite; }
@keyframes pouls { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 50% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }

/* Cette page a été créée par Joris */
.cree { background: var(--encre); color: #f7f3ec; position: relative; overflow: hidden; }
.cree::before { content: ""; position: absolute; right: -200px; top: -200px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(109, 76, 224, .3), transparent 60%); filter: blur(10px); }
.cree h2 { color: #f7f3ec; }
.cree .grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; position: relative; }
.cree .intro { color: rgba(247, 243, 236, .75); margin-top: 18px; }
.cree .chiffres-cree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 34px; }
.cree .chiffres-cree div { border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 16px; }
.cree .chiffres-cree strong { display: block; font-family: var(--titre); font-size: 34px; font-weight: 500; color: #fff; line-height: 1.1; }
.cree .chiffres-cree span { font-size: 13.5px; color: rgba(247, 243, 236, .65); }
.journal { list-style: none; position: relative; }
.journal::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: rgba(255, 255, 255, .14); }
.journal li { position: relative; padding: 0 0 22px 34px; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.journal li.vu { opacity: 1; transform: none; }
.journal li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--encre); border: 2px solid #8f7cf0; }
.journal li:last-child::before { background: #8f7cf0; box-shadow: 0 0 0 6px rgba(143, 124, 240, .2); }
.journal time { font-size: 13px; color: #b9aef5; font-weight: 600; letter-spacing: .02em; }
.journal p { color: rgba(247, 243, 236, .88); font-size: 15.5px; margin-top: 2px; }
.signature { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 10px 16px 10px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); font-size: 14px; color: rgba(247, 243, 236, .85); }
.signature img { width: 26px; height: 26px; border-radius: 50%; }

/* Inscription : carte d'invitation dans la colonne gauche */
.invitation { margin-top: 30px; border-radius: 16px; padding: 20px; background: linear-gradient(135deg, #0B1A33, #1d2f5a 60%, #3b2f7a); color: #f7f3ec; position: relative; overflow: hidden; transform: rotate(-1.5deg); box-shadow: 0 20px 44px rgba(11, 26, 51, .25); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.invitation:hover { transform: rotate(0); }
.invitation::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .18) 45%, transparent 60%); transform: translateX(-100%); animation: reflet 5s ease-in-out infinite; }
@keyframes reflet { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.invitation .ligne-i { display: flex; justify-content: space-between; align-items: center; }
.invitation img { height: 22px; width: auto; }
.invitation small { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 243, 236, .6); }
.invitation strong { display: block; font-family: var(--titre); font-weight: 500; font-size: 22px; margin: 18px 0 4px; }
.invitation span { font-size: 13.5px; color: rgba(247, 243, 236, .7); }

/* FAQ en deux colonnes */
.faq-deux { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq-deux .faq { max-width: none; margin: 0; }
.faq-deux .cote { position: sticky; top: 110px; }
.faq-deux .cote p { color: var(--gris); margin-top: 14px; }
.faq h3.cat { display: flex; align-items: center; gap: 10px; }
.faq h3.cat svg { width: 22px; height: 22px; }

/* Bandeau final avec photo */
.final { background: var(--encre) url('u4.jpg') center / cover no-repeat; }
.final::before { left: 0; top: 0; width: 100%; height: 100%; transform: none; background: linear-gradient(180deg, rgba(11, 26, 51, .78), rgba(11, 26, 51, .92)); }

/* Survols */
.btn-fonce { position: relative; overflow: hidden; }
.btn-fonce::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; }
.btn-fonce:hover::after { transform: translateX(120%); }
.mini-carte, .tdb-carte, .tdb-vue { transition: transform .3s, box-shadow .3s; }
.mini-carte:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(11, 26, 51, .1); }

.pied .credit-joris { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: rgba(247, 243, 236, .7); }
.pied .credit-joris i { width: 7px; height: 7px; border-radius: 50%; background: #8f7cf0; box-shadow: 0 0 10px #8f7cf0; }

@media (prefers-reduced-motion: reduce) {
  .aurore i, .rang, .invitation::after, .film-zone .media .lecture span { animation: none; }
  .mots span, .haut .sur, .haut .intro, .haut .boutons, .haut .note { animation: none; opacity: 1; transform: none; }
  .vitrine { transform: none; } .notif, .journal li, .ligne .mini-carte, .cote-reponse .reponse { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 1020px) {
  .panneau.photo, .cree .grille, .film-zone, .faq-deux { grid-template-columns: 1fr; gap: 28px; }
  .faq-deux .cote { position: static; }
  .notif.n1, .notif.n3 { left: 0; } .notif.n2, .notif.n4 { right: 0; }
}
@media (max-width: 760px) {
  .sec { padding: 72px 0; }
  .haut { padding-top: 56px; }
  .scene3d { margin-top: 40px; }
  .notif { font-size: 12.5px; padding: 8px 11px; } .notif small { display: none; }
  .notif.n1 { top: -18px; left: 4px; } .notif.n2 { display: none; } .notif.n3 { display: none; } .notif.n4 { top: auto; bottom: 30px; right: 4px; }
  .cadre-photo { min-height: 340px; }
  .cote-reponse { padding: 18px; }
  .liste-icones { grid-template-columns: 1fr; }
  .cree .chiffres-cree { grid-template-columns: 1fr 1fr 1fr; } .cree .chiffres-cree strong { font-size: 24px; }
  .lignes::before, .lignes .fil-vif { display: none; }
}

/* Notifications sur les bords de la vitrine, hors du contenu (21 h) */
@media (min-width: 1021px) {
  .notif.n1 { left: -64px; top: 9%; } .notif.n2 { right: -64px; top: 4%; left: auto; }
  .notif.n3 { left: -64px; top: 52%; } .notif.n4 { right: -64px; top: 44%; left: auto; }
}

/* v5.1 (21 h 25) : moins de vide, plus de vie */
.sec { padding: 88px 0; }
.entete-sec { margin-bottom: 44px; }
.precision { margin-top: 16px; }
@media (min-width: 1021px) {
  .notif.n1 { left: -150px; top: 10%; } .notif.n3 { left: -150px; top: 50%; }
  .notif.n2 { right: -150px; top: 5%; } .notif.n4 { right: -150px; top: 42%; }
}
/* Pictogrammes qui se dessinent */
.picto path, .picto rect, .picto circle:not([fill="#c9a15a"]) { stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.8s cubic-bezier(.4, .1, .2, 1); }
.vu .picto path, .vu .picto rect, .vu .picto circle, .picto.vu path, .picto.vu rect, .picto.vu circle { stroke-dashoffset: 0; }
.picto circle[fill="#c9a15a"] { transform-origin: center; transform-box: fill-box; transform: scale(0); transition: transform .6s 1.2s cubic-bezier(.3, 1.6, .5, 1); }
.vu .picto circle[fill="#c9a15a"] { transform: scale(1); }
/* Titres mot à mot au défilement */
.mots-defile span { display: inline-block; opacity: 0; transform: translateY(.4em); }
.mots-defile.vu span { animation: mot .7s cubic-bezier(.2, .7, .2, 1) forwards; }
/* Cascades */
.colonnes.apparait > div, .liste-coches > li, .liste-icones > li, .faq.apparait details, .faq.apparait h3.cat, .offre .gauche li { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.colonnes.apparait.vu > div, .garanties.vu .liste-coches > li, .profil.actif .liste-icones > li, .faq.apparait.vu details, .faq.apparait.vu h3.cat, .offre.vu .gauche li { opacity: 1; transform: none; }
/* Coches qui se tracent */
.liste-coches svg path, .offre .gauche li svg path { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .6s; transition-delay: calc(var(--i, 0) * 90ms + 250ms); }
.garanties.vu .liste-coches svg path, .offre.vu .gauche li svg path { stroke-dashoffset: 0; }
/* Photos : léger zoom au survol, légère dérive au défilement */
.cadre-photo:hover img { transform: scale(1.03); }
.final { background-position: center var(--dérive, 50%); }
/* Icônes de la bande « déjà » qui s'animent au survol */
.outils li svg { transition: transform .35s; } .outils li:hover svg { transform: translateY(-3px) rotate(-6deg); }
@media (prefers-reduced-motion: reduce) {
  .picto path, .picto rect, .picto circle, .liste-coches svg path, .offre .gauche li svg path { stroke-dashoffset: 0; transition: none; }
  .picto circle[fill="#c9a15a"] { transform: none; }
  .mots-defile span, .colonnes.apparait > div, .liste-coches > li, .liste-icones > li, .faq.apparait details, .faq.apparait h3.cat, .offre .gauche li { opacity: 1; transform: none; animation: none; }
}
@media (max-width: 760px) { .sec { padding: 64px 0; } }

@media (min-width: 1021px) { .notif.n1, .notif.n3 { left: -96px; } .notif.n2, .notif.n4 { right: -96px; } }
@media (min-width: 1021px) and (max-width: 1360px) { .notif.n1, .notif.n3 { left: -24px; } .notif.n2, .notif.n4 { right: -24px; } }