/* Sections explicatives : même langage que l'histoire (fin, calme, photos arrondies). */

/* Ouverture : ce qu'est feetch, dit clairement */
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 7px 14px; border-radius: 999px; font-size: .78rem; font-weight: 500; letter-spacing: .02em; color: var(--ivory); background: rgba(244, 239, 228, .12); box-shadow: inset 0 0 0 1px rgba(244, 239, 228, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(231, 167, 74, .7); animation: pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(231, 167, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 167, 74, 0); } }
.hero-copy { max-width: 46rem; }
.hero-sub { max-width: 44ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; color: rgba(244, 239, 228, .9); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pill-ivory { height: 48px; padding: 0 20px; background: var(--ivory); color: var(--forest); font-size: .92rem; }
.pill-glass { height: 48px; padding: 0 20px; background: rgba(244, 239, 228, .12); color: var(--ivory); font-size: .92rem; box-shadow: inset 0 0 0 1px rgba(244, 239, 228, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-shade { background: linear-gradient(180deg, rgba(11, 26, 20, .38) 0%, rgba(11, 26, 20, 0) 24%, rgba(11, 26, 20, .05) 45%, rgba(11, 26, 20, .82) 100%), radial-gradient(90% 70% at 0% 100%, rgba(11, 26, 20, .6), transparent 70%); }

/* Le principe en trois points, juste sous l'ouverture */
.brief { padding: clamp(40px, 7vh, 72px) clamp(20px, 4vw, 56px) clamp(20px, 4vh, 40px); }
.brief-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1240px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 44px); }
.brief-list li { display: flex; gap: 16px; align-items: flex-start; }
.brief-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--forest); color: var(--amber-hi); font-size: 1.35rem; }
.brief-list h2 { font-size: 1.12rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.brief-list p { margin-top: 4px; font-size: .92rem; color: var(--ink-soft); max-width: 30ch; }
@media (max-width: 860px) { .brief-list { grid-template-columns: 1fr; gap: 22px; } }

/* Blocs */
.block { max-width: 1280px; margin: 0 auto; padding: clamp(80px, 13vh, 130px) clamp(20px, 4vw, 56px); }
.block-head { max-width: 44rem; margin-bottom: clamp(32px, 5vh, 52px); }
.block-title { margin-top: 12px; font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.08; letter-spacing: -0.035em; }
.block-title em { background: var(--g-text-light); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em; }

/* Cartes photo */
.card { margin: 0; }
.card-img { position: relative; overflow: hidden; border-radius: 20px; background: var(--sand); aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -44px rgba(16, 36, 28, .55); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease-out); }
.card.is-in .card-img img { transform: none; }
@media (hover: hover) { .card:hover .card-img img { transform: scale(1.04); } }
.card figcaption { padding: 16px 4px 0; }
.card h3 { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.015em; }
.card p { margin-top: 4px; font-size: .9rem; color: var(--ink-soft); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.where-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: clamp(14px, 2vw, 24px); align-items: start; }
.where-grid .card:first-child .card-img { aspect-ratio: 4 / 5.2; }
.where-grid .card:not(:first-child) .card-img { aspect-ratio: 4 / 4.2; }
@media (max-width: 960px) { .why-grid { grid-template-columns: 1fr 1fr; } .where-grid { grid-template-columns: 1fr; } .where-grid .card .card-img { aspect-ratio: 4 / 3 !important; } }

/* L'histoire : petite étiquette au-dessus */
.scene-side { position: relative; }
.story-kicker { margin-bottom: 26px; color: var(--forest); font-weight: 500; }
.story-kicker i { color: var(--amber-deep); }
@media (max-width: 900px) { .story-kicker { display: none; } }

/* Comment ça marche : étapes (le téléphone est dans app.css) */
.how-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.how-steps { list-style: none; margin: 0; padding: 0; }
.how-step { display: flex; gap: 20px; align-items: flex-start; min-height: 46vh; padding-top: 8vh; opacity: .35; transition: opacity .6s var(--ease-out); }
.how-step:first-child { padding-top: 4vh; }
.how-step.is-active { opacity: 1; }
.how-step .num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 500; font-size: .95rem; color: var(--forest); box-shadow: inset 0 0 0 1.5px var(--forest); transition: background-color .5s, color .5s; }
.how-step.is-active .num { background: var(--forest); color: var(--ivory); }
.how-step h3 { font-size: clamp(1.35rem, 2.1vw, 1.9rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.how-step p { margin-top: 10px; max-width: 36ch; font-size: .98rem; color: var(--ink-soft); }
@media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; } .how-step { min-height: 52vh; padding-top: 2vh; } .how-step:last-child { min-height: 40vh; } }

/* Commerçants */
.shop { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.shop-img { margin: 0; overflow: hidden; border-radius: 24px; aspect-ratio: 4 / 5; box-shadow: 0 40px 80px -50px rgba(16, 36, 28, .5); }
.shop-img img { width: 100%; height: 100%; object-fit: cover; }
.ticks { list-style: none; margin: 24px 0 26px; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-size: .98rem; }
.ticks i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(29, 59, 48, .08); color: var(--forest); font-size: .9rem; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--forest); font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .45s var(--ease-out); }
@media (hover: hover) { .text-link:hover { background-size: 0 1px; background-position: 100% 100%; } }
@media (max-width: 900px) { .shop { grid-template-columns: 1fr; } .shop-img { aspect-ratio: 4 / 3.4; } }

/* Questions */
.faq-list { max-width: 820px; border-top: 1px solid rgba(19, 33, 27, .12); }
.faq details { border-bottom: 1px solid rgba(19, 33, 27, .12); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 2px; cursor: pointer; list-style: none; font-size: clamp(1rem, 1.3vw, 1.12rem); font-weight: 500; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(19, 33, 27, .18); transition: transform .45s var(--ease-out), background-color .3s; }
.faq details[open] summary i { transform: rotate(45deg); background: var(--forest); color: var(--ivory); box-shadow: none; }
.faq details p { padding: 0 2px 24px; max-width: 60ch; color: var(--ink-soft); }
@media (hover: hover) { .faq summary:hover i { background: rgba(29, 59, 48, .08); } }

.credits { opacity: .7; }
.tomorrow { padding-top: clamp(80px, 13vh, 130px); padding-bottom: clamp(80px, 13vh, 130px); }
.block-lead { margin-top: 14px; max-width: 46ch; font-size: 1rem; color: var(--ink-soft); }
.join .scene-detail { max-width: 44ch; }