/* doc-project | public/assets/css/home.css | met en scène l'accueil avec illustrations, cartes de parcours et animations sobres */
.hero { position: relative; overflow: hidden; padding: 72px 0 90px; }
.hero::before { content: ''; position: absolute; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 200, 159, .32), transparent 68%); top: -240px; left: -180px; pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(480px, 1.12fr); align-items: center; gap: clamp(40px, 7vw, 90px); }
.hero__content { position: relative; z-index: 2; }
.hero h1 { margin-bottom: 28px; }
.hero h1 em { color: var(--accent-dark); font-weight: 500; }
.hero__lead { max-width: 650px; color: var(--muted); font-size: clamp(1.08rem, 1.8vw, 1.3rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 28px; }
.trust-list { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: .9rem; font-weight: 700; }
.trust-list li { display: flex; align-items: center; gap: 8px; }
.trust-list li::before { content: '✓'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sage); color: var(--success); }
.hero__visual { position: relative; min-width: 0; }
.hero__image { position: relative; z-index: 2; width: 100%; filter: drop-shadow(0 28px 40px rgba(23, 53, 47, .15)); animation: houseFloat 6s ease-in-out infinite; }
.hero__halo { position: absolute; inset: 7% 5% 2%; border-radius: 44% 56% 46% 54%; background: linear-gradient(135deg, rgba(232, 200, 159, .35), rgba(107, 169, 161, .18)); transform: rotate(-7deg); }
.hero__floating-card { position: absolute; z-index: 4; right: -12px; bottom: 9%; display: grid; padding: 17px 20px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 17px; background: rgba(255, 255, 255, .84); backdrop-filter: blur(15px); box-shadow: var(--shadow-lg); animation: cardFloat 5s ease-in-out infinite reverse; }
.hero__floating-card span { color: var(--muted); font-size: .78rem; }
.journey { padding: 80px 0 120px; }
.section-heading { max-width: 760px; margin-bottom: 44px; }
.section-heading p { color: var(--muted); font-size: 1.08rem; }
.journey__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.journey-card { position: relative; overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255, 255, 255, .8); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.journey-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.journey-card img { width: 100%; border-radius: 18px; margin-bottom: 20px; }
.journey-card > span { color: var(--accent-dark); font-weight: 900; font-size: .78rem; letter-spacing: .12em; }
.journey-card h3 { margin: 10px 0; font-family: var(--font-serif); font-size: 1.65rem; font-weight: 500; }
.journey-card p { margin-bottom: 0; color: var(--muted); }
.mode-section { padding: 100px 0; background: var(--paper-warm); }
.mode-section__grid { display: grid; grid-template-columns: .9fr 1fr 1fr; gap: 22px; align-items: stretch; }
.mode-intro { padding: 28px 30px 28px 0; }
.mode-intro h2 { margin-bottom: 18px; }
.mode-intro p { color: var(--muted); }
.mode-card { position: relative; display: flex; flex-direction: column; min-height: 330px; padding: 34px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.mode-card::after { content: ''; position: absolute; right: -70px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: var(--sage); opacity: .75; }
.mode-card:hover { transform: translateY(-7px) rotate(-.35deg); box-shadow: var(--shadow-lg); }
.mode-card--dark { color: var(--white); background: var(--ink); }
.mode-card--dark::after { background: var(--accent); opacity: .28; }
.mode-card__badge { position: relative; z-index: 2; width: fit-content; padding: 7px 11px; border-radius: 999px; background: var(--paper-warm); color: var(--accent-dark); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.mode-card--dark .mode-card__badge { background: rgba(255, 255, 255, .12); color: #f2d9b7; }
.mode-card h3 { position: relative; z-index: 2; margin: 50px 0 14px; font-family: var(--font-serif); font-size: 2rem; font-weight: 500; }
.mode-card p { position: relative; z-index: 2; color: var(--muted); }
.mode-card--dark p { color: rgba(255, 255, 255, .72); }
.mode-card__link { position: relative; z-index: 2; margin-top: auto; font-weight: 800; }
@keyframes houseFloat { 0%, 100% { transform: translateY(0) rotate(.2deg); } 50% { transform: translateY(-10px) rotate(-.2deg); } }
@keyframes cardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 1040px) { .hero__grid { grid-template-columns: 1fr; } .hero__visual { max-width: 760px; margin-inline: auto; } .mode-section__grid { grid-template-columns: 1fr 1fr; } .mode-intro { grid-column: 1 / -1; max-width: 720px; } }
@media (max-width: 760px) { .hero { padding-top: 48px; } .hero__actions { align-items: stretch; } .hero__actions .button { width: 100%; } .hero__floating-card { right: 6px; bottom: 2%; font-size: .85rem; } .journey { padding: 60px 0 80px; } .journey__grid, .mode-section__grid { grid-template-columns: 1fr; } .mode-intro { grid-column: auto; padding-right: 0; } .mode-card { min-height: 285px; } }