/* ═══════════════════════════════════════════════════════════════════════ FYROS — socle de design du site (fyros.fr) Un seul fichier pour les 4 pages : tokens, typographie, composants. Navy #011224 · Or #c18943 (dégradé #d9a86a → #b5792f) · Or-encre #8a5c22 sur fond clair · Barlow Condensed (titres, capitales) · Manrope (texte). ═══════════════════════════════════════════════════════════════════════ */ :root { --navy: #011224; --navy-2: #071b30; --navy-3: #0a1627; --gold: #c18943; --gold-hi: #d9a86a; --gold-lo: #b5792f; --gold-ink: #8a5c22; /* or lisible sur fond clair (6,2:1) */ --gold-deep: #b5792f; /* or profond pour les gros titres sur clair (AA large) */ --ice: #f2f2f2; --mist: #b9c6d3; --mist-2: #dbe3ea; --muted: #8ea0b0; --slate: #3a4a58; --slate-2: #5a6b7a; --danger: #c0392b; --grad: linear-gradient(135deg, #d9a86a, #b5792f); --grad-h: linear-gradient(90deg, #e2b479, #b5792f); --r-sm: 10px; --r-md: 16px; --r-pill: 40px; --sh-card: 0 26px 60px rgba(1,18,36,0.28); --sh-deep: 0 30px 70px rgba(0,0,0,0.5); --sh-gold: 0 12px 34px rgba(193,137,67,0.38); --wrap: 1140px; --wrap-narrow: 820px; --header-h: 64px; } /* ── Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; background: var(--navy); color: var(--ice); overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; transition: color .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease; } img { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font-family: inherit; font-size: inherit; } input::placeholder, textarea::placeholder { color: #8a97a5; } ::selection { background: var(--gold); color: var(--navy); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; } [id] { scroll-margin-top: calc(var(--header-h) + 20px); } strong { font-weight: 700; } /* ── Typographie ── */ h1, h2, .display { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; } h1, h2 { text-transform: uppercase; letter-spacing: 0.02em; text-wrap: balance; } h1 { font-weight: 900; line-height: 1.05; font-size: clamp(46px, 7.5vw, 88px); } h2 { font-weight: 800; line-height: 1.1; font-size: clamp(34px, 5vw, 56px); } h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px; line-height: 1.2; letter-spacing: 0.01em; } h4 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; } .lead { font-weight: 800; line-height: 1.15; font-size: clamp(22px, 3.2vw, 36px); } .sub { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; color: var(--mist); max-width: 560px; } .eyebrow { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 3px; font-size: 14px; text-transform: uppercase; color: var(--gold); } .kicker { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 2px; font-size: 15px; text-transform: uppercase; color: var(--gold); } .gold { color: var(--gold); } .center { text-align: center; } .on-light { color: var(--navy); } .on-light .gold, .on-light .eyebrow, .on-light .kicker, .gold-ink { color: var(--gold-ink); } .on-light h2 .gold { color: var(--gold-deep); } .on-light p { color: var(--slate); } .shimmer-text { background: linear-gradient(90deg, #b5792f, #e2b479, #d9a86a, #b5792f); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: fyShimmer 7s ease-in-out infinite; } /* ── Mise en page ── */ section { padding: clamp(60px, 9vw, 110px) 24px; position: relative; } section.tight { padding: clamp(44px, 6vw, 72px) 24px; } section.light { background: var(--ice); } section.navy { background: var(--navy); } .wrap { max-width: var(--wrap); margin: 0 auto; } .wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; } .hairline { height: 2px; background: linear-gradient(90deg, transparent, rgba(193,137,67,0.75), transparent); box-shadow: 0 0 20px rgba(193,137,67,0.3); } .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; } .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 5vw, 56px); align-items: center; } .sec-head { text-align: center; margin-bottom: 52px; } .sec-head p:not(.eyebrow) { font-size: 16px; max-width: 640px; margin: 16px auto 0; line-height: 1.6; color: var(--mist); } .on-light .sec-head p:not(.eyebrow) { color: var(--slate); } /* ── Boutons ── */ .btn-gold { position: relative; overflow: hidden; display: inline-block; text-align: center; font-weight: 800; letter-spacing: 1px; font-size: 15px; text-transform: uppercase; color: var(--navy); background: var(--grad); padding: 16px 32px; border: none; border-radius: var(--r-sm); box-shadow: var(--sh-gold); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .btn-gold:hover { filter: brightness(1.06); box-shadow: 0 16px 40px rgba(193,137,67,0.55); transform: translateY(-3px); } .btn-gold:disabled { opacity: .6; cursor: wait; transform: none; } .btn-ghost { display: inline-block; text-align: center; font-weight: 600; letter-spacing: 1px; font-size: 15px; text-transform: uppercase; color: var(--ice); background: transparent; border: 1px solid rgba(193,137,67,0.5); padding: 15px 28px; border-radius: var(--r-sm); cursor: pointer; transition: background .25s ease, border-color .25s ease; } .btn-ghost:hover { color: #fff; background: rgba(193,137,67,0.14); border-color: var(--gold); } .on-light .btn-ghost { color: var(--navy); border-color: rgba(1,18,36,0.22); } .on-light .btn-ghost:hover { color: var(--navy); background: rgba(193,137,67,0.12); border-color: var(--gold); } .btn-sm { padding: 11px 18px; font-size: 13px; } .sheen { position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.32), transparent); animation: fySheen 6s ease-in-out infinite; pointer-events: none; } .text-link { font-weight: 700; color: var(--gold); white-space: nowrap; } .text-link:hover { text-decoration: underline; text-underline-offset: 3px; } .on-light .text-link { color: var(--gold-ink); } .arrow-link { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 1px; font-size: 14px; text-transform: uppercase; color: var(--gold); } .on-light .arrow-link { color: var(--gold-ink); } /* ── Puces & badges ── */ .chip { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: #c9d3dd; background: rgba(193,137,67,0.08); border: 1px solid rgba(193,137,67,0.25); padding: 9px 16px; border-radius: var(--r-pill); } .chip strong { color: #fff; font-weight: 600; } .chip img { width: 22px; height: 22px; } .tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-ink); background: rgba(193,137,67,0.1); border: 1px solid rgba(193,137,67,0.32); padding: 7px 15px; border-radius: var(--r-pill); } .navy .tag, .tag.on-navy { color: var(--mist-2); } .pill-gold { display: inline-block; font-weight: 700; letter-spacing: 2px; font-size: 11px; text-transform: uppercase; color: var(--navy); background: var(--grad); padding: 6px 16px; border-radius: var(--r-pill); } .trust { background: var(--navy-2); border-top: 1px solid rgba(193,137,67,0.18); border-bottom: 1px solid rgba(193,137,67,0.18); padding: 20px 24px; } .trust .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } .checks { display: flex; flex-direction: column; gap: 8px; } .checks > div { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--mist-2); } .checks .gold { font-weight: 800; } /* ── Cartes ── */ .card { background: var(--navy); border-radius: var(--r-md); padding: 38px 30px; text-align: center; transition: transform .3s ease, box-shadow .3s ease; } .card:hover { transform: translateY(-8px); box-shadow: 0 20px 46px rgba(193,137,67,0.28); } .card h3 { color: var(--ice); margin: 0 0 14px; } .card p { color: var(--mist); font-size: 14.5px; line-height: 1.6; } .card .em { color: var(--gold); font-weight: 600; } .card-light { background: var(--ice); border-radius: var(--r-md); padding: 38px 30px; text-align: center; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; } .card-light:hover { background: #fff; transform: translateY(-8px); box-shadow: 0 22px 50px rgba(0,0,0,0.4); } .card-light h3 { color: var(--navy); margin: 0 0 14px; } .card-light p { color: var(--slate); font-size: 14.5px; line-height: 1.6; } .card-light .em { color: var(--gold-ink); font-weight: 600; } .card-white { background: #fff; border: 1px solid rgba(1,18,36,0.1); border-radius: var(--r-md); padding: clamp(24px, 3vw, 34px); text-align: center; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .card-white:hover { border-color: rgba(193,137,67,0.4); transform: translateY(-6px); box-shadow: 0 18px 44px rgba(1,18,36,0.14); } .card-white p { color: var(--slate); font-size: 14.5px; line-height: 1.6; } .card-ghost { background: rgba(255,255,255,0.03); border: 1px solid rgba(193,137,67,0.2); border-radius: var(--r-md); padding: 26px 28px; } .ico { width: 72px; height: 72px; object-fit: contain; margin: 0 auto 20px; filter: drop-shadow(0 6px 14px rgba(193,137,67,0.25)); } .ico-sm { width: 54px; height: 54px; object-fit: contain; margin: 0 auto 14px; filter: drop-shadow(0 6px 14px rgba(193,137,67,0.25)); } .framed { border-radius: var(--r-md); border: 1px solid rgba(193,137,67,0.4); box-shadow: var(--sh-deep); overflow: hidden; } .on-light .framed { box-shadow: var(--sh-card); } /* ── Commutateur Présentiel | Online (en-tête, les 2 pages) ── */ .mode-switch { display: inline-flex; align-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(193,137,67,0.3); border-radius: var(--r-pill); padding: 3px; gap: 2px; } .mode-switch a { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 1.5px; font-size: 13px; text-transform: uppercase; color: var(--mist-2); padding: 8px 16px; border-radius: var(--r-pill); white-space: nowrap; } .mode-switch a:hover { color: #fff; } .mode-switch a[aria-current="page"] { color: var(--navy); background: var(--grad); box-shadow: 0 4px 14px rgba(193,137,67,0.35); } @media (max-width: 560px) { .mode-switch a { padding: 8px 12px; font-size: 12px; letter-spacing: 1px; } } /* ── Deux portes (hero accueil + miroir online) ── */ .doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .door { position: relative; display: flex; flex-direction: column; gap: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(193,137,67,0.35); border-radius: var(--r-md); padding: 26px 26px 24px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; color: var(--ice); } .door:hover { transform: translateY(-4px); border-color: var(--gold); background: rgba(255,255,255,0.05); box-shadow: 0 18px 44px rgba(193,137,67,0.22); } .door.is-current { border-color: rgba(193,137,67,0.7); background: linear-gradient(160deg, rgba(193,137,67,0.12), rgba(193,137,67,0.03)); } .door .kicker { display: flex; align-items: center; gap: 10px; margin: 0; } .door .kicker img { width: 30px; height: 30px; } .door h3 { font-size: 22px; color: var(--ice); margin: 0; } .door p { color: var(--mist); font-size: 14.5px; line-height: 1.6; margin: 0; } .door .tags { display: flex; flex-wrap: wrap; gap: 8px; } .door .tags span { font-size: 12px; font-weight: 600; color: var(--mist-2); background: rgba(193,137,67,0.1); border: 1px solid rgba(193,137,67,0.3); padding: 5px 12px; border-radius: var(--r-pill); } .door .price { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 28px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .door .price small { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px; -webkit-text-fill-color: var(--mist); } .door .go { margin-top: auto; padding-top: 6px; } .door .you { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); background: rgba(193,137,67,0.12); border: 1px solid rgba(193,137,67,0.35); padding: 4px 10px; border-radius: var(--r-pill); } /* ── En-tête ── */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(1,18,36,0.85); border-bottom: 1px solid rgba(193,137,67,0.18); } .site-header .bar { max-width: 1220px; margin: 0 auto; padding: 10px 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; min-height: var(--header-h); } .site-header .bar > .mode-switch { justify-self: center; } .site-header nav { justify-self: end; } .brand { display: flex; align-items: center; gap: 11px; } .brand img { width: 40px; height: 40px; } .brand span { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 3px; font-size: 22px; color: var(--ice); } .site-header nav { position: relative; display: flex; align-items: center; gap: 12px; } .menu-btn { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: 1px; font-size: 13px; text-transform: uppercase; color: var(--ice); background: transparent; border: 1px solid rgba(193,137,67,0.4); padding: 10px 18px; border-radius: var(--r-sm); cursor: pointer; transition: background .2s ease, border-color .2s ease; white-space: nowrap; } .menu-btn:hover { color: #fff; background: rgba(193,137,67,0.14); border-color: var(--gold); } .menu-btn .car { transition: transform .3s ease; display: inline-flex; } .menu-btn[aria-expanded="true"] .car { transform: rotate(180deg); } .menu { position: absolute; right: 0; top: calc(100% + 12px); background: var(--navy-2); border: 1px solid rgba(193,137,67,0.3); border-radius: var(--r-sm); padding: 8px; min-width: 240px; box-shadow: 0 18px 46px rgba(0,0,0,0.55); display: none; flex-direction: column; gap: 2px; } .menu.show { display: flex; } .menu a { padding: 11px 14px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--mist-2); } .menu a:hover { color: #fff; background: rgba(193,137,67,0.14); } .menu a.alt { border: 1px solid rgba(193,137,67,0.35); margin-top: 4px; } .menu a.cta { margin-top: 4px; padding: 12px 14px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-align: center; color: var(--navy); background: var(--grad); } @media (max-width: 640px) { .brand span { display: none; } .site-header .bar { padding: 8px 16px; gap: 10px; } .menu-btn { padding: 9px 12px; } } /* ── Hero ── */ .hero { overflow: hidden; padding: clamp(56px, 9vh, 110px) 24px clamp(60px, 10vh, 120px); } .hero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; } .hero .veil { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, rgba(6,32,58,0.45), rgba(1,18,36,0.96)); } .hero .wrap { position: relative; z-index: 2; } .hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 5vw, 48px); align-items: center; } .hero-copy h1 { margin-bottom: 10px; } .hero-copy .lead { margin-bottom: 22px; } .hero-copy .sub { margin-bottom: 24px; } .hero-copy .checks { margin-bottom: 24px; } .hero-copy .notall { border-top: 1px solid rgba(193,137,67,0.2); padding-top: 22px; margin-bottom: 28px; } .hero-copy .notall p:first-child { font-weight: 700; font-size: clamp(17px, 2vw, 22px); color: var(--ice); margin-bottom: 6px; } .hero-copy .notall p:last-child { font-size: 15px; color: var(--mist); } .hero-copy .ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .hero-copy .fine { font-size: 13.5px; color: var(--muted); margin-top: 14px; display: flex; align-items: center; gap: 8px; } .rise { animation: fyRise .7s ease both; } .d1 { animation-delay: .1s } .d2 { animation-delay: .2s } .d3 { animation-delay: .3s } .d4 { animation-delay: .4s } .d5 { animation-delay: .5s } .d6 { animation-delay: .6s } /* Prolonge la cadence du hero pour ce qui le suit immédiatement à l'écran. */ .d7 { animation-delay: .7s } .d8 { animation-delay: .8s } .hero-visual { display: flex; justify-content: center; align-items: center; } .hero-photo { position: relative; width: 100%; max-width: 440px; animation: fyRise .9s ease .25s both; } .hero-photo img { width: 100%; transform-origin: 50% 30%; animation: fyKenBurns 22s ease-in-out infinite alternate; } .hero-photo .stats { position: absolute; left: 0; right: 0; bottom: 0; padding: 52px 20px 16px; background: linear-gradient(to top, rgba(1,18,36,0.95) 30%, rgba(1,18,36,0)); display: flex; justify-content: space-around; gap: 10px; text-align: center; } .hero-photo .stats b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 26px; color: #fff; line-height: 1.1; } .hero-photo .stats small { font-size: 11px; color: var(--mist); letter-spacing: 1px; } @media (max-width: 768px) { .hero-copy { text-align: center; } .hero-copy .sub { margin-left: auto; margin-right: auto; } .hero-copy .checks, .hero-copy .ctas, .hero-copy .fine, .hero-copy .doors-row { justify-content: center; align-items: center; } .hero-copy .checks > div { text-align: left; } } /* ── Avis (slider) ── */ .rating { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 40px; } .rating .num { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 52px; color: var(--gold); line-height: 1; } .rating .stars { color: var(--gold); font-size: 18px; letter-spacing: 2px; } .rating small { display: block; font-size: 12px; color: #9fb0c0; } .rev-card { position: relative; background: var(--ice); border-radius: var(--r-md); padding: clamp(28px, 4vw, 44px); text-align: left; min-height: 220px; cursor: grab; touch-action: pan-y; user-select: none; } .rev-quote { position: absolute; top: 18px; right: 26px; font-size: 56px; line-height: 1; color: rgba(193,137,67,0.35); font-family: 'Barlow Condensed', sans-serif; } .rev-stars { color: var(--gold-ink); font-size: 16px; letter-spacing: 2px; margin-bottom: 16px; } .rev-text { color: #2f3d4a; font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; white-space: pre-line; } .rev-more { background: none; border: none; cursor: pointer; padding: 0; margin: 0 0 20px; color: var(--gold-ink); font-weight: 700; font-size: 14px; } .rev-who { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(1,18,36,0.1); padding-top: 18px; } .rev-av { width: 46px; height: 46px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--navy); font-size: 17px; flex-shrink: 0; } .rev-name { font-weight: 700; color: var(--navy); font-size: 15px; } .rev-meta { font-size: 12px; color: #5f6d7a; } .rev-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 26px; } .rev-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(193,137,67,0.45); background: transparent; color: var(--gold); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; } .rev-arrow:hover { border-color: var(--gold); background: var(--gold); color: var(--navy); } .rev-dots { display: flex; gap: 9px; align-items: center; } .rev-dot { width: 9px; height: 9px; border-radius: 16px; border: none; cursor: pointer; padding: 0; background: rgba(255,255,255,0.25); transition: all .3s ease; } .rev-dot[aria-current="true"] { width: 26px; background: var(--gold); } .rev-hint { font-size: 12.5px; color: #7f8ea0; margin: 16px 0 0; } /* ── FAQ & accordéons ── */ .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; } .faq-item { background: #fff; border: 1px solid rgba(1,18,36,0.1); border-radius: var(--r-sm); overflow: hidden; } .faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--navy); font-size: 15.5px; font-weight: 700; } .faq-q.upper { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; padding: 18px 20px; } .faq-sign { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; } .faq-a { padding: 0 22px 22px; color: var(--slate); font-size: 14.5px; line-height: 1.65; } .faq-item[data-open="false"] .faq-a { display: none; } /* ── Formulaire ── */ .form { background: var(--ice); border-radius: var(--r-md); padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 18px; } .form label { display: flex; flex-direction: column; gap: 7px; } .form label > span { font-size: 13px; font-weight: 700; color: var(--navy); } .form input, .form select, .form textarea { background: #fff; border: 1px solid rgba(1,18,36,0.15); border-radius: var(--r-sm); padding: 13px 15px; color: var(--navy); font-size: 15px; outline: none; transition: border-color .2s ease; width: 100%; } .form select.accent { border-color: rgba(193,137,67,0.5); font-weight: 600; } .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--gold); } .form textarea { resize: vertical; } .form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; } .form .err { font-size: 13px; color: var(--danger); text-align: center; font-weight: 600; display: none; } .form .err.show { display: block; } .form .fine { font-size: 12px; color: #5f6d7a; text-align: center; } .sent-box { background: var(--ice); border-radius: var(--r-md); padding: 48px 32px; text-align: center; display: none; } .sent-box.show { display: block; } .sent-box h3 { color: var(--navy); font-size: 24px; margin-bottom: 12px; } .sent-box p { color: var(--slate); font-size: 15.5px; line-height: 1.6; margin-bottom: 20px; } /* ── Pied de page ── */ .site-footer { background: var(--ice); border-top: 1px solid rgba(193,137,67,0.3); padding: clamp(52px, 7vw, 84px) 24px 48px; color: var(--navy); } .foot-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; } .foot-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; } .foot-logo img { width: 44px; height: 44px; } .foot-logo span { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: 3px; font-size: 24px; color: var(--navy); } .site-footer p { color: #4a5a68; font-size: 15px; line-height: 1.7; } .site-footer h4 { color: var(--navy); margin-bottom: 16px; font-size: 14px; letter-spacing: 2px; } .foot-social { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; } .foot-social a { font-weight: 600; letter-spacing: 1px; font-size: 13px; color: var(--navy); border: 1px solid rgba(1,18,36,0.22); padding: 11px 18px; border-radius: var(--r-sm); } .foot-social a:hover { border-color: var(--gold); background: rgba(193,137,67,0.1); } .foot-social a.ig { color: var(--navy); background: var(--grad); border-color: transparent; font-weight: 700; text-transform: uppercase; } .foot-social a.ig:hover { filter: brightness(1.06); } .foot-link { color: var(--gold-ink); font-weight: 600; font-size: 14px; display: inline-block; margin-top: 16px; } .foot-link:hover { text-decoration: underline; text-underline-offset: 3px; } .foot-bottom { max-width: var(--wrap); margin: 44px auto 0; padding-top: 22px; border-top: 1px solid rgba(1,18,36,0.12); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; font-size: 13px; color: #586675; } .foot-bottom div { display: flex; gap: 20px; flex-wrap: wrap; } .foot-bottom a { color: var(--slate-2); } .foot-bottom a:hover { color: var(--gold-ink); } @media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; } .foot-logo, .foot-social, .foot-bottom, .foot-bottom div { justify-content: center; } .site-footer { padding-bottom: 120px; } } /* ── UI flottante ── */ #fyProgress { position: fixed; top: 0; left: 0; height: 4px; z-index: 100; background: var(--grad-h); width: 0; box-shadow: 0 0 10px rgba(193,137,67,0.6); transition: width .08s linear; } .fab-r { position: fixed; bottom: 22px; right: 22px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .fy-top { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(193,137,67,0.5); background: rgba(1,18,36,0.85); color: var(--gold); font-size: 20px; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.4); backdrop-filter: blur(6px); transition: background .2s ease, color .2s ease; } .fy-top.show { display: flex; } .fy-top:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); } .fy-pill { font-weight: 800; letter-spacing: 1px; font-size: 14px; text-transform: uppercase; color: var(--navy); background: var(--grad); padding: 14px 24px; border-radius: var(--r-pill); box-shadow: 0 8px 28px rgba(193,137,67,0.5); display: flex; align-items: center; gap: 8px; } .fy-pill:hover { filter: brightness(1.06); } /* ── Révélation au scroll ── */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; } [data-reveal].in { opacity: 1; transform: none; } .no-js [data-reveal] { opacity: 1; transform: none; } /* ── Animations ── */ @keyframes fyRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes fySheen { 0%, 55% { left: -60%; } 85%, 100% { left: 120%; } } @keyframes fyShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes fyKenBurns { from { transform: scale(1) translateY(0); } to { transform: scale(1.09) translateY(-1.5%); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } [data-reveal] { opacity: 1; transform: none; } } /* ── Téléphone-carrousel : vraies captures de l'app FYROS ── Châssis neutre + halo or, écran = piste à glissement (scroll-snap), points, légende qui change avec l'écran. Partagé accueil (section App) + online (hero). */ .app-show { display: flex; flex-direction: column; align-items: center; gap: 18px; } .phone-wrap { position: relative; display: flex; justify-content: center; align-items: center; } .phone-glow { position: absolute; width: min(360px, 90%); height: min(360px, 90%); border-radius: 50%; background: radial-gradient(circle, rgba(193,137,67,0.28), transparent 62%); filter: blur(24px); } .phone { position: relative; width: min(290px, 100%); border-radius: 40px; background: #0a1627; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 0 0 7px #07101d, 0 0 0 8px rgba(193,137,67,0.35), 0 40px 90px rgba(0,0,0,0.65); padding: 10px; } .phone-screen { position: relative; border-radius: 31px; overflow: hidden; background: #020c18; aspect-ratio: 390 / 844; } .phone-island { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 14px; background: #000; z-index: 2; } .phone-home { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 96px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.55); z-index: 2; } .app-cap { min-height: 3.2em; text-align: center; } .app-cap b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ice); } .app-cap span { display: block; font-size: 14px; color: var(--mist); margin-top: 4px; } .on-light .app-cap b { color: var(--navy); } .on-light .app-cap span { color: var(--slate); } /* ── Aperçu de l'app en « scènes » (stories) ────────────────────────────── Quatre vraies captures qui défilent seules, chacune animée d'un lent panoramique vertical. Le visiteur regarde, il n'a rien à faire. */ .app-show[data-stories] .phone-wrap { width: min(290px, 100%); } .app-show[data-stories] .phone { width: 100%; } .story { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .55s ease; pointer-events: none; } .story.on { opacity: 1; } /* Le calque qui bouge : il porte l'image ET le cache de tracé, pour qu'ils restent solidaires pendant le panoramique. */ .story-canvas { position: absolute; top: 0; left: 0; right: 0; } .story-canvas img { width: 100%; height: auto; display: block; } .story.on .story-canvas { animation: storyPan var(--dur, 7s) linear both; } @keyframes storyPan { from { transform: translateY(0); } to { transform: translateY(var(--pan, -30%)); } } /* La courbe se trace : un cache couleur-carte se rétracte vers la droite. */ .story-draw { position: absolute; background: #062340; transform-origin: right center; } .story.on .story-draw { animation: storyDraw var(--dur, 7s) linear both; } @keyframes storyDraw { 0%, 12% { transform: scaleX(1); } 46%, 100% { transform: scaleX(0); } } /* Surimpression : la fiche « muscles travaillés » qui s'ouvre en cours de scène. */ .story-pop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; z-index: 3; } .story.on .story-pop { animation: storyPop var(--dur, 7s) ease both; } @keyframes storyPop { 0%, 46% { opacity: 0; } 56%, 88% { opacity: 1; } 97%, 100% { opacity: 0; } } .story-veil { position: absolute; top: 0; left: 0; right: 0; height: 62px; z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(2,10,20,0.78) 0%, rgba(2,10,20,0.32) 60%, transparent 100%); } .story-bars { position: absolute; top: 38px; left: 0; right: 0; z-index: 5; display: flex; gap: 4px; padding: 0 12px; } .story-bars button { flex: 1; height: 3px; padding: 0; border: none; border-radius: 3px; cursor: pointer; background: rgba(255,255,255,0.28); overflow: hidden; position: relative; } .story-bars button::after { content: ""; position: absolute; inset: 0; width: 0; border-radius: 3px; background: var(--gold); } .story-bars button.done::after { width: 100%; } .story-bars button.on::after { animation: storyBar var(--dur, 7s) linear both; } @keyframes storyBar { from { width: 0; } to { width: 100%; } } .app-show[data-paused="true"] .story.on .story-canvas, .app-show[data-paused="true"] .story.on .story-draw, .app-show[data-paused="true"] .story.on .story-pop, .app-show[data-paused="true"] .story-bars button.on::after { animation-play-state: paused; } .phone-screen { cursor: pointer; } @media (prefers-reduced-motion: reduce) { .story.on .story-canvas, .story.on .story-draw, .story.on .story-pop, .story-bars button.on::after { animation: none !important; } .story-bars button.on::after { width: 100%; } .story-draw { display: none; } } /* ── Sections en deux colonnes sur mobile ───────────────────────────────── En une seule colonne, un texte aligné à gauche au-dessus d'un visuel centré donne une page bancale. On centre le bloc de texte, en gardant les listes alignées à gauche entre elles (une puce centrée est illisible). */ @media (max-width: 760px) { .split > div:not(.app-show):not([style*="justify-content:center"]) { text-align: center; } .split .checks { display: inline-block; text-align: left; } .split .tagrow { justify-content: center; } /* les images du bloc texte (signature) suivent le centrage */ .split > div:not(.app-show) > img { margin-left: auto; margin-right: auto; } .split .btn, .split .btn-ghost { display: inline-flex; } } /* Colonne d'étape numérotée (« Ma méthode en 4 temps ») — partagée par les deux pages : le style vivait dans le