/* ================================================================= FIINAFAS — TEMPLATE PAGES SEGMENTS Complément à home.css (navbar, footer, boutons, hero, marquee). Approche Apple x1000 · Design system Fiinafas conservé. La couleur du segment est portée par --seg / --seg-text sur . ================================================================= */ :root { --seg: #4abea6; /* défaut teal, surchargé par page */ --seg-text: #4abea6; /* défaut = --seg-dev, surchargé par page */ --space-section: 96px; } /* Respirations Apple */ .seg-section { padding: var(--space-section) 0; } .seg-container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 80px); } .seg-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--seg-text); margin-bottom: 20px; } .seg-eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--seg); } .seg-h2 { font-size: clamp(28px, 3.6vw, 38px); font-weight: 700; line-height: 1.18; letter-spacing: -0.4px; color: var(--color-text-primary); max-width: 50%; } .seg-h2--wide { max-width: 60%; } .seg-sub { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: var(--color-text-secondary); margin-top: 18px; max-width: 60ch; } /* ----------------------------------------------------------------- HERO segment (s'appuie sur .hero de home.css mais ajoute le badge) ----------------------------------------------------------------- */ .seg-hero__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; line-height: 1.3; padding: 5px 14px; border-radius: 999px; background: var(--seg); color: #1E3A4F; margin-bottom: 26px; opacity: 0; } .seg-hero__badge--light { color: #1E3A4F; } .hero.play .seg-hero__badge { animation: heroFade 500ms var(--easing-apple) 200ms forwards; } .seg-hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 36px; opacity: 0; } .hero.play .seg-hero__actions { animation: heroFade 400ms var(--easing-apple) var(--cta-d, 1600ms) forwards; } .btn--seg { background: var(--color-green); color: #fff; } .btn--seg:hover { background: var(--color-green-dark); transform: translateY(-2px); } .seg-hero__actions .btn { border-radius: 999px; padding: 15px 34px; } /* Hero segment : contenu remonté en position efficace (moins de vide au-dessus) */ .hero { padding-top: calc(var(--nav-height) + 12vh); } @media (max-width: 767px) { .hero { padding-top: calc(var(--nav-height) + 28px); } } /* Révélation mot par mot du H1 (gérée en JS : spans .word + reddot) */ .hero .hero__title { opacity: 1 !important; transform: none !important; animation: none !important; }.hero__title .word { display: inline-block; opacity: 0; transform: translateY(14px); } .hero.play .hero__title .word { animation: segWord 520ms var(--easing-apple) forwards; animation-delay: var(--d, 0ms); } .hero__title .reddot.pulse { opacity: 0; display: inline-block; position: relative; } .hero__title .reddot.pulse::after { content: ''; position: absolute; left: 50%; top: 58%; width: 0.62em; height: 0.62em; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, rgba(240,87,66,0.55) 0%, rgba(240,87,66,0) 70%); opacity: 0; pointer-events: none; } .hero.play .hero__title .reddot.pulse { animation: segDot 760ms var(--easing-apple) forwards; animation-delay: var(--pd, 700ms); } .hero.play .hero__title .reddot.pulse::after { animation: heroDotRing 900ms var(--easing-apple) forwards; animation-delay: calc(var(--pd, 700ms) + 120ms); } @keyframes segWord { to { opacity: 1; transform: none; } } @keyframes segDot { 0% { opacity: 0; transform: scale(0); } 45% { opacity: 1; transform: scale(1.28); } 70% { transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } } @keyframes heroDotRing { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; } 25% { opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; } } /* Label placeholder photo de la hero (sur le scrim sombre) */ .seg-hero__photo-label { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 2; text-align: center; font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.42); pointer-events: none; } /* ----------------------------------------------------------------- PROBLÈME EN PROFONDEUR ----------------------------------------------------------------- */ .problem { background: #fff; padding-top: clamp(56px, 7vw, 104px); } .problem__anchor { position: relative; font-size: clamp(20px, 2.1vw, 30px); font-weight: 500; line-height: 1.6; letter-spacing: -0.1px; max-width: 62ch; width: 100%; margin: 0 0 48px; text-align: left; text-wrap: pretty; /* Aligné à gauche : fondu gauche→droite — plein au départ, la phrase se retire en fin. */ background: linear-gradient(100deg, #1E3A4F 0%, #1E3A4F 70%, rgba(30,58,79,0.62) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .problem__anchor .num { font-weight: 600; font-size: 1.06em; background: none; -webkit-text-fill-color: #F05742; color: #F05742; } /* Entrée dédiée, plus fluide : plus longue, course plus courte, léger flou qui se résorbe */ .problem__anchor.s-reveal { transform: translateY(14px); filter: blur(7px); transition: opacity 1000ms var(--easing-apple), transform 1000ms var(--easing-apple), filter 1000ms var(--easing-apple); } .problem__anchor.s-reveal.is-in { transform: none; filter: blur(0); } @media (prefers-reduced-motion: reduce) { .problem__anchor.s-reveal { filter: none; } } .problem__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; } .pacc { min-width: 0; } /* Accordéons problème */ /* Accordéon problème : même structure/disposition que l'accueil (.acc), décliné dans la couleur du segment de la page (--seg / --seg-text, hérités du body). */ .pacc { display: flex; flex-direction: column; gap: 10px; } .pacc__item { border: 1px solid rgba(30,53,73,0.08); border-radius: 16px; background: #fff; transition: border-color 340ms var(--easing-apple), background 340ms var(--easing-apple), box-shadow 340ms var(--easing-apple); } .pacc__item:hover { border-color: rgba(30,53,73,0.18); } /* État ouvert : tuile teintée + titre et pastille chevron dans la couleur du segment */ .pacc__item.is-open { border-color: color-mix(in srgb, var(--seg) 45%, transparent); background: color-mix(in srgb, var(--seg) 9%, #fff); box-shadow: 0 20px 44px -28px rgba(30,53,73,0.4); } .pacc__trigger { width: 100%; background: none; border: none; cursor: pointer; font-family: var(--font-main); text-align: left; padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; } .pacc__top { display: flex; align-items: center; gap: 16px; } .pacc__label { flex: 1; font-size: 16.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--color-text-primary); transition: color 240ms ease; /* Cartes fermées de hauteur identique (même principe que .acc__title sur l'accueil) : aperçu du libellé borné à 2 lignes, texte complet à l'ouverture. */ min-height: calc(2 * 1.4em); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .pacc__item.is-open .pacc__label { color: var(--seg-text); min-height: 0; -webkit-line-clamp: unset; overflow: visible; } .pacc__chevron { flex-shrink: 0; width: 32px; height: 32px; padding: 6px; box-sizing: border-box; border-radius: 50%; background: rgba(30,53,73,0.05); color: var(--color-text-secondary); transition: transform 340ms var(--easing-apple), background 340ms var(--easing-apple), color 240ms ease; } .pacc__item.is-open .pacc__chevron { transform: rotate(180deg); background: var(--seg); color: #1E3549; } .pacc__panel { overflow: hidden; max-height: 0; transition: max-height 380ms var(--easing-apple); } .pacc__panel-inner { padding: 0 26px 24px; opacity: 0; transform: translateY(-6px); transition: opacity 320ms var(--easing-apple), transform 320ms var(--easing-apple); } .pacc__item.is-open .pacc__panel-inner { opacity: 1; transform: translateY(0); transition-delay: 90ms; } @media (prefers-reduced-motion: reduce) { .pacc__panel-inner { transition: opacity 1ms linear; transform: none; } } .pacc__subtitle { display: block; font-size: 15.5px; font-weight: 600; color: var(--color-text-primary); line-height: 1.5; margin-bottom: 14px; } .pacc__list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; } .pacc__list li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.55; color: var(--color-text-secondary); } .pacc__list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--seg); } /* Image sticky */ .problem__sticky { position: sticky; top: 96px; } .problem__frame { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--color-blue-light); position: relative; box-shadow: 0 18px 44px -18px rgba(30,53,73,0.22); } .problem__frame::before { content: ''; position: absolute; inset: 0; background-image: none; } .problem__frame-label { position: absolute; inset: auto 0 0 0; padding: 18px 22px; font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.3px; color: #fff; background: linear-gradient(transparent, rgba(30,53,73,0.6)); transition: opacity 300ms var(--easing-apple), transform 300ms var(--easing-apple); } .problem__frame-media { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 420ms var(--easing-apple); } .problem__frame-media.is-active { opacity: 1; pointer-events: auto; } /* ----------------------------------------------------------------- SOLUTIONS — cards produits (composant Design System) ----------------------------------------------------------------- */ .seg-solutions { background: #fcfdfc; } .seg-solutions__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 28px; align-items: start; margin-top: 56px; } .seg-solutions__grid--two { max-width: 760px; margin-left: auto; margin-right: auto; } .pcard { --accent: var(--color-green); position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(30,53,73,0.08); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px -10px rgba(30,53,73,0.14); transition: transform 250ms var(--easing-apple), box-shadow 250ms var(--easing-apple); } .pcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px rgba(30,53,73,0.2); } .pcard--income { --accent: #6fcf97; } .pcard--packs { --accent: #f05742; } .pcard--coach { --accent: #91dfcf; } .pcard--featured { box-shadow: 0 12px 32px rgba(30,53,73,0.12); } @media (min-width: 1024px) { .pcard--featured { transform: scale(1.05); } .pcard--featured:hover { transform: scale(1.05) translateY(-4px); } } .pcard__flag { position: absolute; top: 14px; right: 14px; z-index: 3; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; color: var(--color-text-primary); background: var(--gradient-cta); padding: 5px 11px; border-radius: 12px; } .pcard__flag--urgent { background: var(--color-coral); color: #fff; } .pcard__frame { position: relative; aspect-ratio: 16 / 10; background: var(--color-blue-light); border-bottom: 3px solid var(--accent); } .pcard__frame::before { content: ''; position: absolute; inset: 0; background-image: none; } .pcard__media { width: 100%; height: 100%; display: block; } .pcard__name { position: absolute; bottom: -15px; left: 20px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; color: #fff; padding: 7px 16px; border-radius: 999px; background: var(--accent); box-shadow: 0 4px 12px rgba(30,53,73,0.18); z-index: 2; } .pcard--coach .pcard__name { color: var(--color-text-primary); } .pcard__body { display: flex; flex-direction: column; gap: 16px; padding: 30px 22px 24px; } .pcard__title { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--color-text-primary); } .pcard__benefits { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; } .pcard__benefits li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.45; color: var(--color-text-secondary); } .pcard__benefits li::before { content: ''; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; } .pcard__deliverable { display: flex; align-items: center; gap: 10px; margin-top: 2px; padding-top: 16px; border-top: 1px solid rgba(30,53,73,0.1); } .pcard__deliverable-label { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: var(--accent); padding: 4px 9px; border-radius: 6px; } .pcard--coach .pcard__deliverable-label { color: var(--color-text-primary); } .pcard__deliverable-value { font-size: 14px; font-weight: 600; color: var(--color-text-primary); line-height: 1.3; } .pcard__result { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); margin-top: 14px; padding: 0 4px; } .pcard__result b { color: var(--seg-text); font-weight: 600; } /* ----------------------------------------------------------------- CALCULATRICE — placeholder ----------------------------------------------------------------- */ .calc { background: #fff; } .calc__card { margin-top: 48px; background: #fff; border: 1px solid rgba(30,53,73,0.1); border-radius: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; box-shadow: 0 10px 30px -16px rgba(30,53,73,0.16); } .calc__inputs { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 28px; border-right: 1px solid rgba(30,53,73,0.08); } .calc__field { display: flex; flex-direction: column; gap: 12px; opacity: 0.65; } .calc__field-label { font-size: 14px; font-weight: 600; color: var(--color-text-primary); display: flex; justify-content: space-between; } .calc__field-val { color: var(--seg-text); } .calc__track { height: 6px; border-radius: 999px; background: rgba(30,53,73,0.1); position: relative; } .calc__track::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 45%; border-radius: 999px; background: var(--seg); opacity: 0.5; } .calc__track::after { content: ''; position: absolute; left: 45%; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--seg); transform: translate(-50%, -50%); } .calc__result { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 8px; background: #fbfdfc; } .calc__result-big { font-size: 44px; font-weight: 700; color: var(--seg-text); letter-spacing: -1px; line-height: 1; } .calc__result-sub { font-size: 15px; color: var(--color-text-secondary); } .calc__soon { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--seg-text); background: rgba(0,0,0,0.02); border: 1px dashed var(--seg); border-radius: 999px; padding: 6px 14px; } .calc__cta { margin-top: 22px; } /* ----------------------------------------------------------------- PREUVE TERRAIN — placeholder ----------------------------------------------------------------- */ .proof { background: var(--color-rose-light); } .proof__card { margin-top: 48px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 40px -20px rgba(30,53,73,0.22); } .proof__media { position: relative; min-height: 320px; background: var(--color-blue-light); } .proof__media::before { content: ''; position: absolute; inset: 0; background-image: none; } .proof__media-label { position: absolute; bottom: 16px; left: 18px; font-family: ui-monospace, monospace; font-size: 12px; color: var(--color-text-primary); opacity: 0.65; } .proof__body { padding: clamp(32px, 4vw, 52px); display: flex; flex-direction: column; gap: 18px; } .proof__meta { display: flex; flex-wrap: wrap; gap: 10px; } .proof__tag { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,0.04); color: var(--color-text-secondary); } .proof__big { font-size: clamp(30px, 4vw, 44px); font-weight: 700; color: var(--seg-text); letter-spacing: -1px; line-height: 1; } .proof__verbatim { font-size: 18px; font-style: italic; line-height: 1.55; color: var(--color-text-primary); } .proof__data { font-size: 14px; color: var(--color-text-secondary); padding-top: 14px; border-top: 1px solid rgba(30,53,73,0.08); } .proof__ph { color: var(--color-text-secondary); opacity: 0.7; } /* Stats + exemples (contenu terrain) */ .proof__stats { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; } .proof__stat { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; background: #fff; border-radius: 16px; box-shadow: 0 10px 28px -18px rgba(30,53,73,0.22); } .proof__stat-num { font-size: clamp(26px, 3vw, 34px); font-weight: 700; color: var(--seg-text); letter-spacing: -0.6px; line-height: 1; } .proof__stat-num--green { color: var(--color-green-dark); } .proof__stat-txt { font-size: 13px; color: var(--color-text-secondary); line-height: 1.4; } .proof__stats-source { margin-top: 12px; font-size: 12px; color: var(--color-text-secondary); opacity: 0.7; } .proof__examples { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .proof__example { background: #fff; border-radius: 18px; padding: 28px 26px; box-shadow: 0 14px 36px -20px rgba(30,53,73,0.2); } .proof__example-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; } .proof__example-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: var(--seg-text); background: color-mix(in srgb, var(--seg) 16%, transparent); padding: 4px 12px; border-radius: 999px; } .proof__example-count { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); } .proof__example-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 10px; letter-spacing: -0.2px; } .proof__example-text { font-size: 14.5px; line-height: 1.6; color: var(--color-text-secondary); margin: 0; } .proof__example-logo { width: 100px; height: 40px; margin-bottom: 16px; background: #fff; } /* ----------------------------------------------------------------- CTA FINAL (réutilise .cta-card pastel de home.css) ----------------------------------------------------------------- */ .seg-cta { background: #fff; } .seg-cta__card { max-width: 940px; margin: 0 auto; background: var(--gradient-cta); border-radius: 24px; padding: clamp(48px, 6vw, 80px) clamp(24px, 5vw, 64px); text-align: center; } .seg-cta__title { font-size: clamp(28px, 3.6vw, 38px); font-weight: 700; line-height: 1.18; color: var(--color-text-primary); max-width: 22ch; margin: 0 auto; } .seg-cta__sub { font-size: clamp(16px, 1.8vw, 18px); color: var(--color-text-primary); opacity: 0.78; margin: 18px auto 0; max-width: 56ch; } .seg-cta__timeline { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--seg-text); background: rgba(255,255,255,0.7); border-radius: 999px; padding: 8px 16px; } .seg-cta__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } .seg-cta__card .btn { border-radius: 24px; padding: 15px 34px; } .seg-cta__card .btn--primary { background: var(--color-green); color: #fff; box-shadow: none; } .seg-cta__card .btn--primary:hover { background: var(--color-green-dark); } .seg-cta__card .btn--ghost2 { background: #fff; border: none; color: var(--color-text-primary); } .seg-cta__card .btn--ghost2:hover { opacity: 0.85; } .seg-cta__reassure { font-size: 14px; color: var(--color-text-secondary); margin-top: 18px; } /* ----------------------------------------------------------------- FAQ PREMIUM — la typographie est l'interface (Apple x1000) Aucun cadre, aucune ombre, aucun fond. Séparateurs 1px, mouvement comme respiration (grid-rows 0fr→1fr), chevron en micro-décalage. ----------------------------------------------------------------- */ .faq-section { padding: clamp(80px, 12vw, 160px) 0; background: #fff; } .faq-container { max-width: 1140px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; } .faq-label { grid-column: 1; grid-row: 1; } .faq-heading { grid-column: 1; grid-row: 2; } .faq-list { grid-column: 2; grid-row: 1 / span 2; } .faq-label { display: block; font-family: var(--font-main); font-size: 12px; font-weight: 600; color: var(--color-green); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; } .faq-heading { font-family: var(--font-main); font-size: clamp(28px, 3.6vw, 38px); font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; color: var(--color-text-primary); margin: 0; } .faq-dot { color: var(--seg-text); } /* Accents signature (point coral) → couleur du segment sur les pages segment. Le fallback coral protège les pages hors segment (home). */ body[style*="--seg"] .dot::after { color: var(--seg-text); } body[style*="--seg"] .calc2__dot { color: var(--seg-text); } .faq-list { display: flex; flex-direction: column; counter-reset: faq; } .faq-item { border-top: 1px solid rgba(30,53,73,0.06); } .faq-item:last-child { border-bottom: 1px solid rgba(30,53,73,0.06); } /* Note de précision sous la FAQ (ce n'est pas une question) — marqueur = couleur segment */ .faq-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(30,53,73,0.1); font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); } .faq-note::before { content: ''; flex-shrink: 0; margin-top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--seg); } .faq-note b { color: var(--color-text-primary); font-weight: 600; } .faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 0; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-main); outline: none; transition: color 250ms var(--easing-apple); } .faq-question { position: relative; padding-left: 46px; font-size: 19px; font-weight: 600; color: var(--color-text-primary); line-height: 1.4; text-wrap: balance; transition: color 250ms var(--easing-apple); } /* Index éditorial : numéro en chiffre à zéro, dans la couleur du segment, en gouttière */ .faq-question::before { counter-increment: faq; content: counter(faq, decimal-leading-zero); position: absolute; left: 0; top: 0.18em; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; color: var(--seg); transition: color 250ms var(--easing-apple); } .faq-trigger:hover .faq-question { color: var(--seg-text); } .faq-trigger:focus-visible { outline: 2px solid var(--color-green); outline-offset: 4px; border-radius: 4px; } .faq-chevron { width: 16px; height: 16px; color: var(--color-blue-grey); flex-shrink: 0; transition: transform 400ms var(--easing-apple) 50ms, color 250ms ease; } .faq-item[data-state="open"] .faq-chevron { transform: rotate(180deg); color: var(--seg-text); } .faq-item[data-state="open"] .faq-question { color: var(--seg-text); } .faq-answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 400ms var(--easing-apple); } .faq-item[data-state="open"] .faq-answer-wrap { grid-template-rows: 1fr; } .faq-answer { overflow: hidden; opacity: 0; transition: opacity 300ms var(--easing-apple) 150ms; } .faq-item[data-state="open"] .faq-answer { opacity: 1; } .faq-answer p { font-family: var(--font-main); font-size: 17px; font-weight: 400; color: #4a5e72; padding-left: 46px; line-height: 1.75; margin: 0 0 28px 0; max-width: none; } @media (prefers-reduced-motion: reduce) { .faq-chevron, .faq-answer-wrap, .faq-answer, .faq-question { transition: none; } } @media (max-width: 860px) { .faq-container { grid-template-columns: 1fr; row-gap: 8px; } .faq-label, .faq-heading, .faq-list { grid-column: 1; } .faq-heading { grid-row: auto; position: static; margin-bottom: 40px; } .faq-label { grid-row: auto; } .faq-list { grid-row: auto; } } @media (max-width: 640px) { .faq-trigger { padding: 22px 0; } .faq-question { font-size: 17px; padding-left: 40px; } .faq-answer p { font-size: 16px; padding-left: 40px; } } /* ----------------------------------------------------------------- REVEAL (scroll narratif) ----------------------------------------------------------------- */ .s-reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--easing-apple), transform 600ms var(--easing-apple); } .s-reveal.is-in { opacity: 1; transform: none; } /* ----------------------------------------------------------------- RESPONSIVE ----------------------------------------------------------------- */ @media (max-width: 1023px) { :root { --space-section: 72px; } .problem__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } .seg-solutions__grid .pcard--featured { order: -1; } } @media (max-width: 767px) { :root { --space-section: 56px; } .problem__anchor { margin-bottom: 48px; } .problem__layout { grid-template-columns: 1fr; } .problem__sticky { display: none; } .calc__card { grid-template-columns: 1fr; } .calc__inputs { border-right: none; border-bottom: 1px solid rgba(30,53,73,0.08); } .proof__card { grid-template-columns: 1fr; } .proof__media { min-height: 220px; } .seg-cta__actions { flex-direction: column; align-items: stretch; } .seg-cta__actions .btn { width: 100%; } } /* ================================================================= NAVBAR — HARMONISATION (chargé après styles.css) But : comportement identique à la page d'accueil. styles.css force la navbar en `sticky` + bordure → sur les pages internes la barre se posait sur le blanc AU-DESSUS du héros, rendant les liens blancs invisibles en haut. On rétablit l'overlay fixe. ================================================================= */ .navbar { position: fixed; border-bottom: none; } /* Pages à héros CLAIR (Nos projets, Rendez-vous) : pas de héros sombre à survoler → navbar solide dès le haut, texte foncé (sinon liens blancs invisibles sur fond blanc). */ body[data-nav="solid"] .navbar.is-top { background: #fff; box-shadow: 0 1px 0 rgba(30, 53, 73, 0.07); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { body[data-nav="solid"] .navbar.is-top, body[data-nav="solid"] .navbar.is-scrolled { background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); } } body[data-nav="solid"] .navbar.is-top .navbar__link, body[data-nav="solid"] .navbar.is-top .navbar__lang, body[data-nav="solid"] .navbar.is-top .navbar__lang b, body[data-nav="solid"] .navbar.is-top .logo { color: var(--color-text-primary); } body[data-nav="solid"] .navbar.is-top .logo__mark::after { color: var(--color-text-secondary); } body[data-nav="solid"] .navbar.is-top .navbar__burger span { background: var(--color-text-primary); } /* Logo image (wordmark SVG) */ .logo__img { height: 20px; width: auto; display: block; } .logo__img--light { display: none; } .logo__img--dark { display: block; } .navbar.is-top .logo__img--light { display: block; } .navbar.is-top .logo__img--dark { display: none; } body[data-nav="solid"] .navbar.is-top .logo__img--light { display: none; } body[data-nav="solid"] .navbar.is-top .logo__img--dark { display: block; } .logo--footer .logo__img { height: 22px; }