/* ============================================================= REBOOT PLAN — COMPOSANTS PARTAGÉS Charge tokens.css et base.css avant ce fichier. Convention : la couleur de la page est définie sur . Cela permet aux composants partagés de teinter automatiquement leurs accents. ============================================================= */ /* ============================================================= 01 · HEADER GLOBAL ============================================================= */ .rp-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--rp-space-md); height: 64px; padding: 0 var(--rp-content-padding); background: rgba(10, 10, 10, 0.72); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--rp-border-faint); } .rp-header__brand { display: inline-flex; align-items: center; gap: var(--rp-space-xs); color: var(--rp-text-main); font-family: var(--rp-font-display); font-size: 15px; font-weight: var(--rp-fw-display); letter-spacing: var(--rp-ls-display); transition: color var(--rp-duration-fast) var(--rp-ease); } .rp-header__brand:hover { color: var(--rp-or); } .rp-header__logo { width: 28px; height: 28px; object-fit: contain; } /* Bloc droit du header : socials + burger groupés (le burger est caché sur desktop, les socials restent visibles). `display: flex` + `flex-direction: row` explicites pour éviter tout fallback vertical sur certains User Agents. */ .rp-header__right { display: flex; flex-direction: row; align-items: center; gap: 16px; flex: 0 0 auto; } .rp-header__socials { display: flex; flex-direction: row; align-items: center; gap: 12px; flex: 0 0 auto; } .rp-header__social { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--rp-text-mute); transition: color var(--rp-duration-fast) var(--rp-ease); flex: 0 0 auto; } .rp-header__social:hover { color: var(--rp-or); } .rp-header__social svg { width: 18px; height: 18px; display: block; } @media (max-width: 480px) { .rp-header__socials { gap: 10px; } .rp-header__social svg { width: 17px; height: 17px; } } .rp-nav { display: flex; align-items: center; gap: var(--rp-space-md); } .rp-nav__link { position: relative; display: inline-block; padding: 8px 2px; font-size: 14px; font-weight: var(--rp-fw-medium); color: var(--rp-text-mute); letter-spacing: 0.01em; transition: color var(--rp-duration-fast) var(--rp-ease); } .rp-nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--rp-duration-base) var(--rp-ease); } .rp-nav__link:hover { color: var(--rp-text-main); } .rp-nav__link:hover::after { transform: scaleX(1); } /* État actif : la couleur dépend de la page courante */ [data-page="home"] .rp-nav__link[data-target="home"], [data-page="formation"] .rp-nav__link[data-target="formation"], [data-page="app"] .rp-nav__link[data-target="app"] { color: var(--rp-or); } [data-page="formation"] .rp-nav__link[data-target="formation"] { color: var(--rp-petrol-light); } [data-page="app"] .rp-nav__link[data-target="app"] { color: var(--rp-bordeaux-light); } [data-page="home"] .rp-nav__link[data-target="home"]::after, [data-page="formation"] .rp-nav__link[data-target="formation"]::after, [data-page="app"] .rp-nav__link[data-target="app"]::after { transform: scaleX(1); } /* Mobile : la nav horizontale disparaît, le burger prend le relais. */ @media (max-width: 900px) { .rp-header { height: 56px; } .rp-nav { display: none; } } /* === Burger button (mobile uniquement) ====================== */ .rp-header__burger { display: none; flex: none; position: relative; width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--rp-radius-xs); cursor: pointer; z-index: 60; /* reste cliquable au-dessus du panel ouvert */ } @media (max-width: 900px) { .rp-header__burger { display: inline-flex; } } .rp-header__burger-line { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--rp-text-main); border-radius: 2px; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), top 200ms cubic-bezier(0.22, 1, 0.36, 1); } .rp-header__burger-line:nth-child(1) { top: 16px; } .rp-header__burger-line:nth-child(2) { top: 22px; } .rp-header__burger-line:nth-child(3) { top: 28px; } .rp-header__burger[aria-expanded="true"] .rp-header__burger-line:nth-child(1) { top: 22px; transform: rotate(45deg); } .rp-header__burger[aria-expanded="true"] .rp-header__burger-line:nth-child(2) { opacity: 0; } .rp-header__burger[aria-expanded="true"] .rp-header__burger-line:nth-child(3) { top: 22px; transform: rotate(-45deg); } /* === Panneau plein écran mobile ============================= */ .rp-header__panel { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 4vh, 36px); padding: var(--rp-space-xl) var(--rp-content-padding); background: rgba(10, 10, 10, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 240ms; } .rp-header__panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; } @media (min-width: 901px) { .rp-header__panel { display: none; } } .rp-header__panel-link { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--rp-text-main); text-decoration: none; transition: color 200ms ease; -webkit-tap-highlight-color: transparent; } .rp-header__panel-link:hover { color: var(--rp-or); } /* Focus : on neutralise le ring or hérité du :focus-visible global, et on en propose un plus discret pour la navigation clavier. */ .rp-header__panel-link:focus { outline: none; } .rp-header__panel-link:focus-visible { outline: 2px solid currentColor; outline-offset: 10px; border-radius: var(--rp-radius-xs); } /* Burger : même traitement (tap iOS ne doit jamais laisser de halo or). */ .rp-header__burger { -webkit-tap-highlight-color: transparent; } .rp-header__burger:focus { outline: none; } .rp-header__burger:focus-visible { outline: 2px solid var(--rp-or); outline-offset: 4px; border-radius: var(--rp-radius-xs); } /* Périphériques tactiles (mobile, tablette) : on supprime totalement l'outline focus pour contourner le bug iOS Safari où :focus-visible reste actif après un tap. La nav clavier reste dispo en desktop. */ @media (hover: none) and (pointer: coarse) { .rp-header__panel-link:focus, .rp-header__panel-link:focus-visible, .rp-header__burger:focus, .rp-header__burger:focus-visible { outline: none; } } .rp-header__panel-link-text { font-family: var(--rp-font-display); font-size: clamp(34px, 7vw, 48px); font-weight: var(--rp-fw-display); letter-spacing: var(--rp-ls-display); line-height: 1.1; position: relative; display: inline-block; padding-bottom: 14px; transition: color 200ms ease; } /* Filet centré sous le titre actif (signature éditoriale Reboot) */ .rp-header__panel-link-text::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scaleX(0); transform-origin: center; width: 42px; height: 2px; background: currentColor; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); } /* État actif : couleur produit + filet visible + poids marqué */ [data-page="home"] .rp-header__panel-link[data-target="home"], [data-page="formation"] .rp-header__panel-link[data-target="formation"], [data-page="app"] .rp-header__panel-link[data-target="app"] { color: var(--rp-or); } [data-page="formation"] .rp-header__panel-link[data-target="formation"] { color: var(--rp-petrol-light); } [data-page="app"] .rp-header__panel-link[data-target="app"] { color: var(--rp-bordeaux-light); } [data-page="home"] .rp-header__panel-link[data-target="home"] .rp-header__panel-link-text, [data-page="formation"] .rp-header__panel-link[data-target="formation"] .rp-header__panel-link-text, [data-page="app"] .rp-header__panel-link[data-target="app"] .rp-header__panel-link-text { font-weight: 900; } [data-page="home"] .rp-header__panel-link[data-target="home"] .rp-header__panel-link-text::after, [data-page="formation"] .rp-header__panel-link[data-target="formation"] .rp-header__panel-link-text::after, [data-page="app"] .rp-header__panel-link[data-target="app"] .rp-header__panel-link-text::after { transform: translateX(-50%) scaleX(1); } /* Hover sur un lien non-actif : filet apparaît subtilement */ @media (hover: hover) { .rp-header__panel-link:hover .rp-header__panel-link-text::after { transform: translateX(-50%) scaleX(0.6); opacity: 0.5; } } /* Lock du scroll body quand le panel est ouvert */ body.rp-scroll-locked { overflow: hidden; } /* ============================================================= 02 · FOOTER GLOBAL ============================================================= */ .rp-footer { margin-top: var(--rp-space-section); padding: var(--rp-space-lg) var(--rp-content-padding) var(--rp-space-md); border-top: 1px solid var(--rp-border-faint); background: var(--rp-noir); } .rp-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rp-space-md); max-width: var(--rp-content-width); margin: 0 auto; } .rp-footer__brand { display: inline-flex; align-items: center; gap: var(--rp-space-xs); color: var(--rp-text-mute); font-family: var(--rp-font-display); font-size: 13px; font-weight: var(--rp-fw-medium); letter-spacing: var(--rp-ls-display); } .rp-footer__logo { width: 22px; height: 22px; object-fit: contain; opacity: 0.85; } .rp-footer__nav { display: flex; flex-wrap: wrap; gap: var(--rp-space-md); font-size: 12px; } .rp-footer__nav a { color: var(--rp-text-faint); letter-spacing: 0.02em; transition: color var(--rp-duration-fast) var(--rp-ease); } .rp-footer__nav a:hover { color: var(--rp-text-main); } .rp-footer__socials { display: inline-flex; align-items: center; gap: 14px; } .rp-footer__social { display: inline-flex; align-items: center; justify-content: center; color: var(--rp-or); transition: color var(--rp-duration-fast) var(--rp-ease); } .rp-footer__social:hover { color: var(--rp-or-soft); } .rp-footer__social svg { width: 18px; height: 18px; } .rp-footer__legal { max-width: var(--rp-content-width); margin: var(--rp-space-md) auto 0; padding-top: var(--rp-space-md); border-top: 1px solid var(--rp-border-faint); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rp-space-sm); font-size: 11px; color: var(--rp-text-faint); letter-spacing: 0.02em; } .rp-footer__disclaimer { font-style: italic; } @media (max-width: 640px) { .rp-footer__row { justify-content: center; text-align: center; } .rp-footer__legal { justify-content: center; text-align: center; } } /* ============================================================= 03 · BOUTONS ============================================================= */ .rp-btn { --btn-bg: transparent; --btn-color: var(--rp-text-main); --btn-border: transparent; --btn-bg-hover: var(--btn-bg); --btn-color-hover: var(--btn-color); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; font-family: var(--rp-font-body); font-size: 14px; font-weight: var(--rp-fw-medium); letter-spacing: 0.02em; line-height: 1; text-align: center; background: var(--btn-bg); color: var(--btn-color); border: 1px solid var(--btn-border); border-radius: var(--rp-radius-sm); cursor: pointer; transition: background var(--rp-duration-fast) var(--rp-ease), color var(--rp-duration-fast) var(--rp-ease), border var(--rp-duration-fast) var(--rp-ease), transform var(--rp-duration-fast) var(--rp-ease); } .rp-btn:hover { background: var(--btn-bg-hover); color: var(--btn-color-hover); } .rp-btn:active { transform: translateY(1px); } /* --- Primary (or, pétrole, bordeaux) --- Signature commune : poids 600, padding aéré, ombre diffuse colorée qui s'amplifie au hover + lift -1px. */ .rp-btn-primary, .rp-btn-primary--petrol, .rp-btn-primary--bordeaux { font-weight: 600; padding: 14px 24px; transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1); } .rp-btn-primary.rp-btn-lg, .rp-btn-primary--petrol.rp-btn-lg, .rp-btn-primary--bordeaux.rp-btn-lg { padding: 18px 32px; } /* Press : on annule le lift -1px du hover, ça donne un effet "press to base" */ .rp-btn-primary:active, .rp-btn-primary--petrol:active, .rp-btn-primary--bordeaux:active { transform: translateY(0); } /* Primary or — CTA principal de la marque */ .rp-btn-primary { --btn-bg: var(--rp-or); --btn-color: var(--rp-noir); --btn-border: var(--rp-or); --btn-bg-hover: #D9B85C; --btn-color-hover: var(--rp-noir); box-shadow: 0 8px 24px -8px rgba(201, 168, 76, 0.4); } .rp-btn-primary:hover { box-shadow: 0 12px 32px -8px rgba(201, 168, 76, 0.55); transform: translateY(-1px); } /* Primary pétrole — CTA Formation (autorisé en fond CTA selon brief) */ .rp-btn-primary--petrol { --btn-bg: var(--rp-petrol); --btn-color: var(--rp-text-main); --btn-border: var(--rp-petrol); --btn-bg-hover: #265F6E; --btn-color-hover: var(--rp-or-soft); box-shadow: 0 8px 24px -8px rgba(27, 77, 90, 0.45); } .rp-btn-primary--petrol:hover { box-shadow: 0 12px 32px -8px rgba(27, 77, 90, 0.6); transform: translateY(-1px); } /* Primary bordeaux — CTA App (autorisé en fond CTA selon brief) */ .rp-btn-primary--bordeaux { --btn-bg: var(--rp-bordeaux); --btn-color: var(--rp-text-main); --btn-border: var(--rp-bordeaux); --btn-bg-hover: #80202E; --btn-color-hover: var(--rp-or-soft); box-shadow: 0 8px 24px -8px rgba(107, 23, 34, 0.45); } .rp-btn-primary--bordeaux:hover { box-shadow: 0 12px 32px -8px rgba(107, 23, 34, 0.6); transform: translateY(-1px); } /* Ghost — CTA secondaire */ .rp-btn-ghost { --btn-bg: transparent; --btn-color: var(--rp-text-main); --btn-border: var(--rp-border-soft); --btn-bg-hover: rgba(245, 241, 232, 0.04); --btn-color-hover: var(--rp-text-main); } .rp-btn-ghost:hover { border-color: var(--rp-text-main); } .rp-btn-ghost--petrol { --btn-color: var(--rp-petrol-light); --btn-border: rgba(90, 138, 153, 0.4); } .rp-btn-ghost--petrol:hover { border-color: var(--rp-petrol-light); color: var(--rp-petrol-light); } .rp-btn-ghost--bordeaux { --btn-color: var(--rp-bordeaux-light); --btn-border: rgba(176, 65, 79, 0.4); } .rp-btn-ghost--bordeaux:hover { border-color: var(--rp-bordeaux-light); color: var(--rp-bordeaux-light); } /* --- Outline (bordure 2px, fond transparent) --- Pour CTAs hero où on veut deux options visuellement équilibrées, sans hiérarchie. */ .rp-btn-outline, .rp-btn-outline--petrol, .rp-btn-outline--bordeaux { --btn-bg: transparent; --btn-color: var(--rp-or); --btn-border: var(--rp-or); --btn-bg-hover: rgba(201, 168, 76, 0.10); --btn-color-hover: var(--rp-or); border-width: 2px; font-weight: 600; padding: 12px 30px; min-width: 200px; transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1); } .rp-btn-outline.rp-btn-lg, .rp-btn-outline--petrol.rp-btn-lg, .rp-btn-outline--bordeaux.rp-btn-lg { padding: 16px 36px; min-width: 220px; } .rp-btn-outline--petrol { --btn-color: var(--rp-petrol-light); --btn-border: var(--rp-petrol-light); --btn-bg-hover: rgba(90, 138, 153, 0.10); --btn-color-hover: var(--rp-petrol-light); } .rp-btn-outline--bordeaux { --btn-color: var(--rp-bordeaux-light); --btn-border: var(--rp-bordeaux-light); --btn-bg-hover: rgba(176, 65, 79, 0.10); --btn-color-hover: var(--rp-bordeaux-light); } /* Tailles */ .rp-btn-lg { min-height: 56px; padding: 0 32px; font-size: 15px; } .rp-btn-block { display: flex; width: 100%; } /* --- Store badges officiels (Apple App Store + Google Play) --- On ne touche jamais à la couleur, la bordure ou le contenu des badges : les guidelines Apple et Google interdisent toute altération visuelle. On gère uniquement la hauteur et un hover sobre. */ .rp-btn-store-group { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } @media (max-width: 480px) { .rp-btn-store-group { flex-direction: column; align-items: stretch; gap: 12px; } } .rp-btn-store { display: inline-flex; align-items: center; height: 52px; transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.22, 1, 0.36, 1); } .rp-btn-store > img { height: 100%; width: auto; display: block; } .rp-btn-store:hover { opacity: 0.9; transform: translateY(-1px); } .rp-btn-store:active { transform: translateY(0); } @media (max-width: 480px) { .rp-btn-store { height: 48px; } } /* ============================================================= 04 · EYEBROW ============================================================= */ .rp-eyebrow { display: inline-block; font-family: var(--rp-font-mono); font-size: var(--rp-fs-eyebrow); font-weight: var(--rp-fw-medium); letter-spacing: var(--rp-ls-eyebrow); text-transform: uppercase; color: var(--rp-or); margin-bottom: var(--rp-space-sm); } .rp-eyebrow--petrol { color: var(--rp-petrol-light); } .rp-eyebrow--bordeaux { color: var(--rp-bordeaux-light); } .rp-eyebrow--mute { color: var(--rp-text-mute); } /* ============================================================= 05 · CARDS ============================================================= */ .rp-card { position: relative; background: var(--rp-noir-soft); border: 1px solid var(--rp-border-faint); border-radius: var(--rp-radius-md); padding: var(--rp-space-md); transition: border var(--rp-duration-base) var(--rp-ease), transform var(--rp-duration-base) var(--rp-ease); } .rp-card:hover { border-color: var(--rp-border-soft); } /* Variante PILLAR — pour les 4 piliers méthode (style centré, bordure or fine) */ .rp-card-pillar { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 28px 24px; background: var(--rp-noir-soft); border: 1px solid var(--rp-or); border-radius: 20px; transition: transform var(--rp-duration-base) var(--rp-ease), border-color var(--rp-duration-base) var(--rp-ease), box-shadow var(--rp-duration-base) var(--rp-ease); } .rp-card-pillar:hover { border-color: var(--rp-or); box-shadow: 0 12px 32px -16px rgba(201, 168, 76, 0.4); } .rp-card-pillar__icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; color: var(--rp-or); } .rp-card-pillar__icon svg { width: 100%; height: 100%; } .rp-card-pillar__title { font-family: var(--rp-font-display); font-size: 20px; font-weight: var(--rp-fw-bold); letter-spacing: -0.01em; line-height: var(--rp-lh-tight); color: var(--rp-text-main); margin: 4px 0 0; } .rp-card-pillar__desc { font-size: var(--rp-fs-small); line-height: var(--rp-lh-body); color: var(--rp-text-mute); max-width: 36ch; margin: 0; } /* Variante FEATURE — mockup + texte côte à côte (alternable) */ .rp-card-feature { display: grid; gap: var(--rp-space-md); grid-template-columns: 1fr; align-items: center; } @media (min-width: 720px) { .rp-card-feature { grid-template-columns: 1fr 1fr; gap: var(--rp-space-lg); } .rp-card-feature--reverse > .rp-card-feature__media { order: 2; } } .rp-card-feature__media { display: block; } .rp-card-feature__body { display: flex; flex-direction: column; gap: var(--rp-space-sm); } .rp-card-feature__title { font-family: var(--rp-font-display); font-size: var(--rp-fs-h3); font-weight: var(--rp-fw-display); letter-spacing: var(--rp-ls-display); line-height: var(--rp-lh-tight); color: var(--rp-text-main); margin: 0; } .rp-card-feature__desc { font-size: var(--rp-fs-body); line-height: var(--rp-lh-body); color: var(--rp-text-mute); } .rp-card-feature__stat { display: inline-flex; align-items: center; gap: 6px; font-family: var(--rp-font-mono); font-size: var(--rp-fs-small); color: var(--rp-or); letter-spacing: 0.04em; } /* ============================================================= 06 · ENCARTS CROSS-SELL ============================================================= */ .rp-crosssell { --xsell-color: var(--rp-or); position: relative; background: var(--rp-noir-soft); border-radius: var(--rp-radius-md); padding: var(--rp-space-md); padding-left: calc(var(--rp-space-md) + 4px); border: 1px solid var(--rp-border-faint); border-left: 4px solid var(--xsell-color); display: grid; gap: var(--rp-space-sm); } @media (min-width: 720px) { .rp-crosssell { padding: var(--rp-space-lg); padding-left: calc(var(--rp-space-lg) + 4px); grid-template-columns: 1fr auto; align-items: center; gap: var(--rp-space-lg); } } .rp-crosssell--formation { --xsell-color: var(--rp-petrol); } .rp-crosssell--app { --xsell-color: var(--rp-bordeaux); } .rp-crosssell__title { font-family: var(--rp-font-display); font-size: var(--rp-fs-h3); font-weight: var(--rp-fw-display); letter-spacing: var(--rp-ls-display); line-height: var(--rp-lh-tight); color: var(--rp-text-main); margin: 0 0 var(--rp-space-xs); } .rp-crosssell__text { font-size: var(--rp-fs-body); line-height: var(--rp-lh-body); color: var(--rp-text-mute); max-width: 60ch; } .rp-crosssell__meta { margin-top: var(--rp-space-xs); font-family: var(--rp-font-mono); font-size: var(--rp-fs-small); letter-spacing: 0.04em; color: var(--xsell-color); } /* ============================================================= 07 · ACCORDION FAQ ============================================================= */ .rp-faq { display: flex; flex-direction: column; } .rp-faq__item { border-top: 1px solid var(--rp-border-faint); } .rp-faq__item:last-of-type { border-bottom: 1px solid var(--rp-border-faint); } .rp-faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--rp-space-sm); padding: var(--rp-space-md) 0; list-style: none; cursor: pointer; font-family: var(--rp-font-display); font-size: var(--rp-fs-body-lg); font-weight: var(--rp-fw-medium); letter-spacing: -0.01em; color: var(--rp-text-main); transition: color var(--rp-duration-fast) var(--rp-ease); } .rp-faq__item > summary::-webkit-details-marker { display: none; } .rp-faq__item > summary:hover { color: var(--rp-or); } .rp-faq__chevron { flex: none; width: 18px; height: 18px; color: var(--rp-text-mute); transition: transform var(--rp-duration-base) var(--rp-ease), color var(--rp-duration-fast) var(--rp-ease); } .rp-faq__item[open] > summary { color: var(--rp-or); } .rp-faq__item[open] .rp-faq__chevron { transform: rotate(45deg); color: var(--rp-or); } .rp-faq__answer { padding: 0 0 var(--rp-space-md) 0; font-size: var(--rp-fs-body); line-height: var(--rp-lh-body); color: var(--rp-text-mute); max-width: 70ch; } /* ============================================================= 08 · PULL QUOTES (citations) ============================================================= */ .rp-quote { position: relative; margin: 0; padding: var(--rp-space-md) var(--rp-space-md); padding-left: calc(var(--rp-space-md) + 4px); border-left: 3px solid var(--rp-or); font-family: var(--rp-font-serif); font-style: italic; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.4; color: var(--rp-text-main); letter-spacing: 0.005em; } .rp-quote__cite { display: block; margin-top: var(--rp-space-sm); font-family: var(--rp-font-body); font-style: normal; font-size: var(--rp-fs-small); letter-spacing: var(--rp-ls-eyebrow); text-transform: uppercase; color: var(--rp-or); } /* ============================================================= UTILITAIRES PARTAGÉS ============================================================= */ /* Conteneur centré */ .rp-container { width: 100%; max-width: var(--rp-content-width); margin: 0 auto; padding: 0 var(--rp-content-padding); } .rp-container--narrow { max-width: var(--rp-content-narrow); } /* Titres pages */ .rp-h1 { font-family: var(--rp-font-display); font-size: var(--rp-fs-h1); font-weight: var(--rp-fw-display); letter-spacing: var(--rp-ls-display); line-height: var(--rp-lh-display); color: var(--rp-text-main); margin: 0; } .rp-h2 { font-family: var(--rp-font-display); font-size: var(--rp-fs-h2); font-weight: var(--rp-fw-display); letter-spacing: var(--rp-ls-display); line-height: var(--rp-lh-tight); color: var(--rp-text-main); margin: 0; } .rp-h3 { font-family: var(--rp-font-display); font-size: var(--rp-fs-h3); font-weight: var(--rp-fw-bold); letter-spacing: -0.01em; line-height: var(--rp-lh-tight); color: var(--rp-text-main); margin: 0; } /* Lead paragraph */ .rp-lead { font-size: var(--rp-fs-body-lg); line-height: var(--rp-lh-body); color: var(--rp-text-mute); max-width: 60ch; } /* Section padding standard */ .rp-section { padding: var(--rp-space-section) var(--rp-content-padding); } /* ============================================================= 12 · CAROUSEL - Variante par défaut : .rp-carousel--coverflow (3D, 3+ slides) - Variante .rp-carousel--simple : translation latérale (2 slides) - Couleur des dots actifs : custom property --carousel-color (par défaut or, override via style inline ou data-attribute). ============================================================= */ .rp-carousel { --carousel-color: var(--rp-or); position: relative; width: 100%; } .rp-carousel__viewport { position: relative; overflow: hidden; perspective: 1500px; /* Permet au scroll vertical de la page de fonctionner pendant qu'on capture le pan horizontal. */ touch-action: pan-y; } /* Track : grille 1×1 où toutes les slides occupent la même cellule. La hauteur s'adapte naturellement au plus grand contenu. */ .rp-carousel__track { display: grid; grid-template-columns: 1fr; transform-style: preserve-3d; position: relative; cursor: grab; will-change: transform; -webkit-user-select: none; user-select: none; } .rp-carousel.is-dragging .rp-carousel__track { cursor: grabbing; } .rp-carousel__slide { grid-row: 1; grid-column: 1; width: 100%; opacity: 0; pointer-events: none; z-index: 1; transform: translateX(150%) scale(0.6); filter: blur(4px); transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), filter 600ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, opacity, filter; } .rp-carousel__slide.is-active { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1) rotateY(0); filter: blur(0); z-index: 3; } /* === Variante coverflow (3+ slides) ====================== */ .rp-carousel--coverflow .rp-carousel__slide.is-prev { opacity: 0.4; transform: translateX(-70%) scale(0.75) rotateY(30deg); filter: blur(2px); z-index: 2; } .rp-carousel--coverflow .rp-carousel__slide.is-next { opacity: 0.4; transform: translateX(70%) scale(0.75) rotateY(-30deg); filter: blur(2px); z-index: 2; } /* Mobile : translation réduite pour que les voisines ne dépassent pas trop (le viewport coupe quand même via overflow hidden). */ @media (max-width: 640px) { .rp-carousel--coverflow .rp-carousel__slide.is-prev { transform: translateX(-55%) scale(0.7) rotateY(25deg); } .rp-carousel--coverflow .rp-carousel__slide.is-next { transform: translateX(55%) scale(0.7) rotateY(-25deg); } } /* === Variante simple (2 slides) ========================== */ .rp-carousel--simple .rp-carousel__slide.is-prev { transform: translateX(-100%) scale(0.95); opacity: 0; } .rp-carousel--simple .rp-carousel__slide.is-next { transform: translateX(100%) scale(0.95); opacity: 0; } /* === Variante multi-cards (free-scroll horizontal) ======== Plusieurs cards visibles, drag global du track avec snap au relâchement (distance + vélocité). Pas de transformation 3D ni d'opacity individuelle : les cards restent toutes nettes. */ .rp-carousel--multi .rp-carousel__viewport { perspective: none; padding: 0 7.5%; touch-action: pan-y; } .rp-carousel--multi .rp-carousel__track { display: flex; grid-template-columns: none; gap: 12px; transform-style: flat; transform: translate3d(0, 0, 0); transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1); cursor: grab; will-change: transform; } .rp-carousel--multi.is-dragging .rp-carousel__track { transition: none; cursor: grabbing; } .rp-carousel--multi .rp-carousel__slide { /* Override des règles standard (grid 1×1, transforms, opacity) */ position: static; grid-row: auto; grid-column: auto; flex: 0 0 85%; aspect-ratio: 9 / 16; width: auto; opacity: 1; pointer-events: auto; transform: none; filter: none; transition: none; z-index: auto; border-radius: 12px; overflow: hidden; background: var(--rp-noir-soft); border: 1px solid var(--rp-border-faint); will-change: auto; } /* Le placeholder interne épouse la slide */ .rp-carousel--multi .rp-carousel__slide .rp-media-placeholder { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; border: 0; } @media (min-width: 769px) { .rp-carousel--multi .rp-carousel__viewport { padding: 0 5%; } .rp-carousel--multi .rp-carousel__track { gap: 16px; } .rp-carousel--multi .rp-carousel__slide { flex: 0 0 45%; } } @media (min-width: 1025px) { .rp-carousel--multi .rp-carousel__viewport { padding: 0 4%; } .rp-carousel--multi .rp-carousel__track { gap: 20px; } .rp-carousel--multi .rp-carousel__slide { flex: 0 0 30%; } } /* === Dots ================================================ */ .rp-carousel__dots { display: flex; justify-content: center; gap: 12px; margin-bottom: var(--rp-space-md); } .rp-carousel__dot { width: 8px; height: 8px; padding: 0; border: 1px solid var(--rp-text-faint); background: transparent; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 200ms, border-color 200ms, transform 200ms; } .rp-carousel__dot:hover { border-color: var(--carousel-color); } .rp-carousel__dot.is-active { background: var(--carousel-color); border-color: var(--carousel-color); } .rp-carousel__dot:focus { outline: none; } .rp-carousel__dot:focus-visible { outline: 2px solid var(--carousel-color); outline-offset: 3px; } /* Reduced motion : on coupe les transitions */ @media (prefers-reduced-motion: reduce) { .rp-carousel__slide { transition: none; } } /* === Titre dynamique externe (synchronisé avec carousel actif) === */ .rp-carousel-dynamic-title { font-family: var(--rp-font-display); font-size: var(--rp-fs-h2); font-weight: var(--rp-fw-display); letter-spacing: var(--rp-ls-display); line-height: var(--rp-lh-tight); color: var(--rp-text-main); text-align: center; margin: 0 0 var(--rp-space-md); transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms cubic-bezier(0.22, 1, 0.36, 1); } .rp-carousel-dynamic-title.is-changing { opacity: 0; } /* Variante de fond très légèrement moins noir, pour cadencer la lecture par alternance. L'effet doit rester subtil — repère inconscient, pas changement visible au premier coup d'oeil. */ .rp-section--alt { background: #0F0F0F; } /* ============================================================= 09 · EYEBROW NUMÉROTÉ (sections de page) Format Whoop / Apple Fitness+ : numéro géant or + label uppercase espacé, tiret séparateur. ============================================================= */ .rp-eyebrow--numbered { display: flex; align-items: baseline; gap: 16px; margin-bottom: var(--rp-space-md); } .rp-eyebrow--numbered .num { font-family: var(--rp-font-display); font-size: clamp(32px, 4vw, 48px); font-weight: 800; color: var(--rp-or); line-height: 1; letter-spacing: -0.02em; } .rp-eyebrow--numbered .label { font-family: var(--rp-font-mono); font-size: clamp(14px, 1.6vw, 18px); font-weight: 500; color: var(--rp-or); text-transform: uppercase; letter-spacing: 0.18em; position: relative; padding-left: 48px; white-space: nowrap; } .rp-eyebrow--numbered .label::before { content: ''; position: absolute; left: 0; top: 50%; width: 32px; height: 1px; background: var(--rp-or); } /* Centré dans les sechead--center */ .rp-home-sechead--center .rp-eyebrow--numbered { justify-content: center; } /* ============================================================= 10 · RAIL DE PROGRESSION LATÉRAL (desktop) ============================================================= */ .rp-progress-rail { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 20px; } @media (max-width: 900px) { .rp-progress-rail { display: none; } } .rp-progress-rail__item { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--rp-text-faint); font-family: var(--rp-font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; transition: color 200ms ease; } .rp-progress-rail__dot { flex: none; width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; transition: all 200ms ease; } .rp-progress-rail__num { opacity: 0.5; transition: opacity 200ms ease; } .rp-progress-rail__label { opacity: 0; transform: translateX(-8px); transition: opacity 200ms ease, transform 200ms ease; } .rp-progress-rail__item:hover, .rp-progress-rail__item.is-active { color: var(--rp-or); } .rp-progress-rail__item:hover .rp-progress-rail__label, .rp-progress-rail__item.is-active .rp-progress-rail__label { opacity: 1; transform: translateX(0); } .rp-progress-rail__item.is-active .rp-progress-rail__dot { background: var(--rp-or); } .rp-progress-rail__item.is-active .rp-progress-rail__num { opacity: 1; } /* Couleur active du rail selon la page */ [data-page="formation"] .rp-progress-rail__item:hover, [data-page="formation"] .rp-progress-rail__item.is-active { color: var(--rp-petrol-light); } [data-page="formation"] .rp-progress-rail__item.is-active .rp-progress-rail__dot { background: var(--rp-petrol-light); } [data-page="app"] .rp-progress-rail__item:hover, [data-page="app"] .rp-progress-rail__item.is-active { color: var(--rp-bordeaux-light); } [data-page="app"] .rp-progress-rail__item.is-active .rp-progress-rail__dot { background: var(--rp-bordeaux-light); } /* Eyebrow numéroté : couleur du numéro et du tiret selon la page */ [data-page="formation"] .rp-eyebrow--numbered .num { color: var(--rp-petrol-light); } [data-page="formation"] .rp-eyebrow--numbered .label::before { background: var(--rp-petrol-light); } [data-page="app"] .rp-eyebrow--numbered .num { color: var(--rp-bordeaux-light); } [data-page="app"] .rp-eyebrow--numbered .label::before { background: var(--rp-bordeaux-light); } /* ============================================================= 11 · BARRE DE PROGRESSION HAUTE (mobile) Affichée uniquement quand le rail latéral est masqué. ============================================================= */ .rp-progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: rgba(245, 241, 232, 0.04); display: none; } @media (max-width: 900px) { .rp-progress-bar { display: block; } } .rp-progress-bar__fill { height: 100%; width: 0%; background: var(--rp-or); transition: width 80ms linear; will-change: width; } [data-page="formation"] .rp-progress-bar__fill { background: var(--rp-petrol-light); } [data-page="app"] .rp-progress-bar__fill { background: var(--rp-bordeaux-light); } /* ============================================================= 14 · STARS RATING (5 étoiles or premium animées au scroll) Utilisé sur les sections "preuves" pour signaler une note 5/5. Animation séquencée déclenchée par js/stars-rating.js via IntersectionObserver. État final = étoiles remplies en or chaud avec drop-shadow glow. Fallback no-JS = état final direct. ============================================================= */ .rp-stars-rating { display: flex; justify-content: center; gap: 8px; margin: 0 0 24px; } .rp-stars-rating svg { width: 36px; height: 36px; fill: var(--rp-or); stroke: var(--rp-or); stroke-width: 1; filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.45)); } @media (max-width: 640px) { .rp-stars-rating svg { width: 28px; height: 28px; } } /* État "reset" appliqué par stars-rating.js avant le déclenchement : étoiles outline, prêtes à s'animer. */ .rp-stars-rating--reset svg { fill: transparent; opacity: 0.35; filter: none; transform: scale(1); } /* Animation séquencée : chaque étoile se remplit en cascade. */ .rp-stars-rating--animating svg { animation: rp-star-fill 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .rp-stars-rating--animating svg:nth-child(1) { animation-delay: 0ms; } .rp-stars-rating--animating svg:nth-child(2) { animation-delay: 180ms; } .rp-stars-rating--animating svg:nth-child(3) { animation-delay: 360ms; } .rp-stars-rating--animating svg:nth-child(4) { animation-delay: 540ms; } .rp-stars-rating--animating svg:nth-child(5) { animation-delay: 720ms; } @keyframes rp-star-fill { 0% { fill: transparent; opacity: 0.35; filter: none; transform: scale(1); } 50% { fill: var(--rp-or); opacity: 1; filter: drop-shadow(0 0 12px rgba(201, 168, 76, 0.85)); transform: scale(1.18); } 100% { fill: var(--rp-or); opacity: 1; filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.45)); transform: scale(1); } } /* Reduced motion : pas d'animation, état final immédiat. */ @media (prefers-reduced-motion: reduce) { .rp-stars-rating--reset svg, .rp-stars-rating--animating svg { fill: var(--rp-or); opacity: 1; filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.45)); transform: scale(1); animation: none; } } /* ============================================================= PLACEHOLDER → MOCKUP IPHONE 3D Modifier `.rp-media-placeholder--iphone` : transforme n'importe quel placeholder en mockup iPhone titanium avec Dynamic Island, perspective 3D légère et glow or. Marche en chargé comme en vide. ============================================================= */ .rp-media-placeholder--iphone { /* Format physique iPhone Pro (9:19.5) */ --rp-aspect: 9 / 19.5; --rp-iphone-padding: clamp(8px, 1.6%, 14px); --rp-iphone-radius: clamp(34px, 13%, 64px); --rp-iphone-radius-inner: clamp(28px, 11%, 52px); /* Frame titanium */ border: none; border-radius: var(--rp-iphone-radius); padding: var(--rp-iphone-padding); background: linear-gradient(145deg, #2a2a2c 0%, #1a1a1c 35%, #0e0e0f 70%, #1a1a1c 100%); /* Effet 3D + glow */ transform: perspective(1600px) rotateY(-5deg) rotateX(1deg); transform-style: preserve-3d; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 12px 32px rgba(0,0,0,0.5), 0 0 60px -10px rgba(201, 168, 76, 0.18), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -2px 6px rgba(0,0,0,0.4); transition: transform var(--rp-duration-base) var(--rp-ease), box-shadow var(--rp-duration-base) var(--rp-ease); } /* Hover : redresse en 3D, intensifie le glow */ .rp-media-placeholder--iphone:hover { transform: perspective(1600px) rotateY(0deg) rotateX(0deg) translateY(-4px); box-shadow: 0 40px 100px -20px rgba(0,0,0,0.75), 0 16px 40px rgba(0,0,0,0.55), 0 0 90px -10px rgba(201, 168, 76, 0.28), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -2px 6px rgba(0,0,0,0.4); } /* Dynamic Island */ .rp-media-placeholder--iphone::before { content: ''; position: absolute; top: clamp(14px, 3.2%, 26px); left: 50%; transform: translateX(-50%); width: clamp(78px, 28%, 110px); height: clamp(22px, 5.2%, 32px); background: #000; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 1px rgba(255,255,255,0.05); z-index: 4; pointer-events: none; } /* Reflet diagonal subtil sur l'écran */ .rp-media-placeholder--iphone::after { content: ''; position: absolute; inset: var(--rp-iphone-padding); border-radius: var(--rp-iphone-radius-inner); background: linear-gradient( 115deg, transparent 30%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.03) 55%, transparent 70% ); pointer-events: none; z-index: 3; } /* Écran : inner positionné DANS le frame (pas full bleed) */ .rp-media-placeholder--iphone .rp-media-placeholder__inner { inset: var(--rp-iphone-padding); padding: clamp(16px, 4%, 28px); border-radius: var(--rp-iphone-radius-inner); background: radial-gradient(80% 60% at 50% 30%, rgba(201,168,76,0.04), transparent 60%), var(--rp-noir); overflow: hidden; } /* Pattern diagonal "missing" : sur l'écran uniquement, pas le frame */ .rp-media-placeholder--iphone.rp-media-placeholder--missing { background: linear-gradient(145deg, #2a2a2c 0%, #1a1a1c 35%, #0e0e0f 70%, #1a1a1c 100%); } .rp-media-placeholder--iphone.rp-media-placeholder--missing .rp-media-placeholder__inner { background: linear-gradient(135deg, transparent 49.5%, var(--rp-border-faint) 49.5% 50.5%, transparent 50.5%) 0 0 / 14px 14px, radial-gradient(80% 60% at 50% 30%, rgba(201,168,76,0.04), transparent 60%), var(--rp-noir); } /* Image / vidéo chargée : confinée à l'écran, pas full bleed */ .rp-media-placeholder--iphone.rp-media-placeholder--loaded { border: none; background: linear-gradient(145deg, #2a2a2c 0%, #1a1a1c 35%, #0e0e0f 70%, #1a1a1c 100%); } .rp-media-placeholder--iphone.rp-media-placeholder--loaded > img, .rp-media-placeholder--iphone.rp-media-placeholder--loaded > video { position: absolute; inset: var(--rp-iphone-padding); width: auto; height: auto; border-radius: var(--rp-iphone-radius-inner); object-fit: cover; } /* Le carousel coverflow gère déjà sa propre 3D ; on neutralise notre perspective pour ne pas additionner les rotations. */ .rp-carousel--multi .rp-carousel__slide .rp-media-placeholder--iphone { transform: none; } .rp-carousel--multi .rp-carousel__slide .rp-media-placeholder--iphone:hover { transform: translateY(-4px); } /* Reduced motion : on coupe la perspective */ @media (prefers-reduced-motion: reduce) { .rp-media-placeholder--iphone, .rp-media-placeholder--iphone:hover { transform: none; transition: none; } }