/* ---------- Proposition C : le rythme du site de référence ---------- On garde le hero photo actuel et le contenu de l'accueil, mais chaque section prend la grammaire de la référence : étiquette arrondie au-dessus d'un titre centré en League Spartan (la Spartan de la référence, déjà auto-hébergée pour les modèles de CV), un mot souligné au pinceau, des tuiles d'outils teintées, l'encart ATS en deux colonnes et un bandeau de contact. Tout est scopé sous #homeSection.rx. */ #homeSection.rx{max-width:1120px;} .rx .home-title, .rx .home-block-title, .rx .home-final-cta h3{font-family:var(--da-heading);font-weight:700;letter-spacing:-.01em;} .rx .home-title{font-size:44px;line-height:1.1;} /* Titres de section centrés, plus grands, sans le filet doré (le pinceau le remplace). */ .rx .home-block{margin-top:84px;text-align:center;} .rx .home-block-title{font-size:34px;line-height:1.2;margin:0 auto 34px;max-width:18em;} .rx .home-block-title::after{display:none;} .rx-pill{ display:inline-block;margin:0 0 14px;padding:4px 16px;border-radius:99px; font-size:13px;font-weight:500;color:var(--brand-ink); background:rgba(27,58,92,.07);border:1px solid rgba(27,58,92,.22); } .rx-brush{position:relative;z-index:0;white-space:nowrap;} .rx-brush::after{ content:'';position:absolute;left:-2%;right:-2%;bottom:-.06em;height:.3em;z-index:-1; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13C40 6 90 4 197 8' fill='none' stroke='%23D99B4A' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M14 17C70 12 120 12 184 14' fill='none' stroke='%23D99B4A' stroke-width='3' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") center/100% 100% no-repeat; } /* ----- Encart ATS : visuel à gauche, texte et liste cochée à droite ----- */ .rx .home-ats-callout.rx-split{ display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;text-align:left; background:none;border:0;padding:0; } .rx-split .home-block-title{margin:0 0 16px;max-width:none;font-size:32px;} .rx-split .home-ats-callout-text{margin:0 0 20px;max-width:none;font-size:14px;color:var(--muted);} .rx-split .home-cta{margin:0;} .rx-checks{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;} .rx-checks li{ position:relative;padding-left:30px;font-family:var(--da-heading); font-size:17px;font-weight:700;color:var(--ink);line-height:1.3; } .rx-checks li::before{ content:'';position:absolute;left:0;top:-1px;width:22px;height:22px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D99B4A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l6 6L21 5'/%3E%3C/svg%3E") center/contain no-repeat; } .rx-ats-visual{position:relative;min-height:330px;} .rx-ats-card{ position:relative;margin:48px 0 0 56px;max-width:330px;background:var(--card);border-radius:16px; padding:24px 24px 20px;box-shadow:0 22px 50px rgba(18,42,64,.18);border:1px solid var(--line); } .rx-ats-ring{ width:112px;height:112px;border-radius:50%;margin:0 auto 18px;display:grid;place-content:center;text-align:center; background: radial-gradient(closest-side,var(--card) 78%,transparent 80% 100%), conic-gradient(var(--grad-1) 0 78%,var(--line) 78% 100%); } .rx-ats-ring b{font-family:var(--da-heading);font-size:20px;color:var(--ink);line-height:1;} .rx-ats-ring span{font-size:12px;color:var(--muted);} .rx-ats-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;} .rx-ats-card li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink);} .rx-ats-card li::before{ content:'';width:18px;height:18px;border-radius:50%;flex:none; background:#2FA96A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/11px no-repeat; } .rx-ats-card li.warn::before{ background:#D98C1F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 4v5M8 12v.2'/%3E%3C/svg%3E") center/11px no-repeat; } .rx-ats-badge{ position:absolute;right:6%;bottom:0;display:flex;align-items:center;gap:12px; background:#1c1b18;color:#fff;border-radius:14px;padding:16px 22px; box-shadow:0 14px 30px rgba(0,0,0,.2); } .rx-ats-badge b{font-family:var(--da-heading);font-size:32px;line-height:1;} .rx-ats-badge span{font-size:12px;line-height:1.35;padding-left:12px;border-left:1px solid rgba(255,255,255,.3);} /* ----- Étapes : trois colonnes reliées par un pointillé ----- */ .rx .home-steps{grid-template-columns:repeat(3,1fr);gap:22px;position:relative;} .rx .home-steps li{ display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px; padding:30px 22px 26px;border-radius:16px;position:relative; } .rx .home-steps li + li::before{ content:'';position:absolute;left:-23px;top:52px;width:24px;border-top:2px dotted var(--gold); } .rx .home-step-num{width:52px;height:52px;font-size:20px;margin-bottom:8px;font-family:var(--da-heading);} .rx .home-step-name{font-family:var(--da-heading);font-size:18px;} .rx .home-steps-note{margin-top:20px;} /* ----- Outils : tuiles teintées, comme les catégories de la référence ----- */ .rx .home-features{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;} .rx .home-feature{ align-items:center;text-align:center;padding:30px 20px 24px;border-radius:16px; transition:transform .25s ease,box-shadow .25s ease; } .rx .home-feature:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(18,42,64,.12);} .rx .home-feature h4{justify-content:center;font-family:var(--da-heading);font-size:19px;} .rx .home-feature-ic{width:64px;height:64px;border-radius:50%;margin-bottom:16px;background:#fff !important;} .rx .home-feature-ic svg{width:32px;height:32px;} .rx .home-link-btn{align-self:center;} .rx .home-feature:nth-child(1){background:rgba(27,58,92,.06);border-color:rgba(27,58,92,.35);} .rx .home-feature:nth-child(2){background:rgba(56,189,200,.09);border-color:rgba(42,151,162,.45);} .rx .home-feature:nth-child(3){background:rgba(69,192,138,.09);border-color:rgba(47,143,101,.45);} .rx .home-feature:nth-child(4){background:rgba(242,120,75,.08);border-color:rgba(208,91,44,.4);} /* ----- Confidentialité, avis, FAQ ----- */ .rx .home-privacy{text-align:left;padding:36px 40px;border-radius:16px;} .rx .home-privacy .rx-pill,.rx .home-privacy .home-block-title{text-align:left;margin-left:0;} .rx .home-review{text-align:left;padding:26px;border-radius:16px;position:relative;} .rx .home-review::before{ content:'\201D';position:absolute;right:20px;top:4px;font-family:Georgia,serif;font-size:64px;line-height:1;color:var(--gold);opacity:.5; } .rx .home-review blockquote{font-size:13.5px;} .rx .home-faq{text-align:left;max-width:820px;margin:0 auto;} .rx .home-faq details{border-radius:12px;} .rx .home-faq summary{padding:18px 22px;font-size:14px;} /* ----- Bandeau de contact ----- */ .rx-contact{ margin-top:84px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px; background:var(--grad-1);color:#fff;border-radius:18px;padding:36px 48px; box-shadow:0 22px 44px rgba(18,42,64,.22); } .rx-contact-item{display:flex;flex-direction:column;gap:8px;color:#fff;text-decoration:none;} .rx-contact-item:last-child{align-items:flex-end;text-align:right;} .rx-contact-label{display:flex;align-items:center;gap:10px;font-family:var(--da-heading);font-size:19px;font-weight:700;} .rx-contact-label svg{width:22px;height:22px;fill:var(--gold);} .rx-contact-value{font-family:var(--da-heading);font-size:22px;font-weight:700;color:#fff;opacity:.92;} .rx-contact-item:hover .rx-contact-value{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;} .rx-contact-or{ display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--da-heading);font-size:18px; } .rx-contact-or::before,.rx-contact-or::after{content:'';width:2px;height:24px;background:rgba(255,255,255,.7);} .rx .home-final-cta{margin-top:40px;border-radius:16px;} @media (max-width: 900px){ .rx .home-title{font-size:32px;} .rx .home-block{margin-top:60px;} .rx .home-block-title{font-size:27px;margin-bottom:24px;} .rx .home-ats-callout.rx-split{grid-template-columns:1fr;gap:26px;} .rx-ats-visual{max-width:420px;width:100%;margin:0 auto;} .rx .home-steps{grid-template-columns:1fr;} .rx .home-steps li + li::before{left:50%;top:-23px;width:0;height:24px;border-top:0;border-left:2px dotted var(--gold);} .rx .home-features{grid-template-columns:repeat(2,minmax(0,1fr));} .rx-contact{grid-template-columns:1fr;text-align:center;padding:28px 22px;gap:16px;margin-top:60px;} .rx-contact-item,.rx-contact-item:last-child{align-items:center;text-align:center;} .rx-contact-or{flex-direction:row;} .rx-contact-or::before,.rx-contact-or::after{width:40px;height:2px;} } @media (max-width: 600px){ .rx .home-title{font-size:28px;} .rx .home-block-title{font-size:24px;} .rx-split .home-block-title{font-size:25px;} .rx-brush{white-space:normal;} .rx-checks{grid-template-columns:1fr;} .rx-checks li{font-size:16px;} .rx-ats-visual{min-height:300px;} .rx-ats-card{margin:40px 0 0 22px;max-width:290px;} .rx-ats-badge{right:0;padding:12px 16px;} .rx-ats-badge b{font-size:26px;} .rx .home-features{grid-template-columns:1fr;} .rx .home-privacy{padding:24px 20px;} .rx-contact-value{font-size:17px;word-break:break-all;} } /* ===================================================================== Animations et finitions à la manière du site de référence (js/accueil-anim.js). Tout ce qui masque un élément est conditionné à html.rx-anim, posé par le script : sans lui, la page s'affiche entière. ===================================================================== */ /* ---------- Loader : un stylo souligne le nom de l'outil ---------- */ .rx-loader{ position:fixed;inset:0;z-index:100000;display:grid;place-items:center; background:var(--paper); transition:opacity .5s ease,visibility .5s ease; /* Filet de sécurité sans script : il s'efface seul après 3,5 s. */ animation:rxLoaderOut .5s ease 3.5s forwards; } .rx-loader.rx-loader-out{opacity:0;visibility:hidden;} @keyframes rxLoaderOut{to{opacity:0;visibility:hidden;}} .rx-loader-box{width:min(320px,72vw);text-align:center;} .rx-loader-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:58px;} .rx-loader-brand svg{width:46px;height:46px;flex:none;} .rx-loader-brand span{font-family:var(--da-heading);font-weight:700;font-size:28px;color:var(--ink);letter-spacing:-.01em;} .rx-loader-track{position:relative;height:3px;border-radius:2px;background:var(--line);} .rx-loader-fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--gold);width:0; animation:rxLoaderDraw 2.2s cubic-bezier(.75,.04,0,.86) infinite;} .rx-loader-pen{position:absolute;bottom:0;left:0;width:40px;height:40px;margin-left:-6px; animation:rxLoaderPen 2.2s cubic-bezier(.75,.04,0,.86) infinite;} @keyframes rxLoaderDraw{0%{width:0;}70%{width:100%;opacity:1;}100%{width:100%;opacity:0;}} @keyframes rxLoaderPen{0%{left:0;}70%{left:100%;}100%{left:100%;opacity:0;}} .rx-loader-text{margin:20px 0 0;font-size:14px;font-weight:600;color:var(--muted);} /* ---------- Hero : entrée en cascade, formes qui flottent ---------- */ .rx .home-hero{padding-top:92px;padding-bottom:88px;margin-bottom:0;} @media (prefers-reduced-motion: no-preference){ @keyframes rxFloat{0%,100%{translate:0 0;}50%{translate:14px -12px;}} @keyframes rxSpin{to{rotate:360deg;}} .rx-anim body:not(.rx-ready) .rx-hero-text > :is(.home-eyebrow,.home-title,.home-sub,.home-cta-row,.home-reassure){opacity:0;} .rx-anim body.rx-ready .rx-hero-text > :is(.home-eyebrow,.home-title,.home-sub,.home-cta-row,.home-reassure){ animation:rxUp .9s cubic-bezier(.2,.7,.2,1) both; } .rx-anim body.rx-ready .rx-hero-text > .home-title{animation-delay:.12s;} .rx-anim body.rx-ready .rx-hero-text > .home-sub{animation-delay:.28s;} .rx-anim body.rx-ready .rx-hero-text > .home-cta-row{animation-delay:.42s;} .rx-anim body.rx-ready .rx-hero-text > .home-reassure{animation-delay:.56s;} } /* ---------- Apparitions au défilement (WOW.js de la référence) ---------- */ @keyframes rxUp{from{opacity:0;transform:translateY(60px);}to{opacity:1;transform:none;}} @keyframes rxLeft{from{opacity:0;transform:translateX(-60px);}to{opacity:1;transform:none;}} @keyframes rxRight{from{opacity:0;transform:translateX(60px);}to{opacity:1;transform:none;}} .rx-anim .rv{opacity:0;} .rx-anim .rv.is-in{animation:rxUp .9s cubic-bezier(.2,.7,.2,1) var(--rv-delay,0s) both;} .rx-anim .rv-left.is-in{animation-name:rxLeft;} .rx-anim .rv-right.is-in{animation-name:rxRight;} /* Le coup de pinceau se trace quand son titre apparaît. */ .rx-anim .rx-brush::after{clip-path:inset(0 100% 0 0);transition:clip-path .8s cubic-bezier(.6,.1,.2,1) .45s;} .rx-anim .is-in .rx-brush::after, .rx-anim body.rx-ready .home-hero .rx-brush::after{clip-path:inset(0 0 0 0);} .rx-anim body.rx-ready .home-hero .rx-brush::after{transition-delay:.9s;} /* ---------- Bandeau de compteurs (« funfact » de la référence) ---------- */ .rx-stats{ position:relative;isolation:isolate;list-style:none;margin:0;padding:34px 0; display:grid;grid-template-columns:repeat(4,1fr); } .rx-stats::before{ content:'';position:absolute;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%); z-index:-1;background:var(--grad-1); } .rx-stats li{display:flex;align-items:center;gap:16px;padding:6px 26px;color:#fff;border-left:1px solid rgba(255,255,255,.14);} .rx-stats li:first-child{border-left:0;} .rx-stats-ic{ position:relative;width:56px;height:56px;flex:none;display:grid;place-items:center;color:#fff; } /* Pastille dorée décalée derrière l'icône, comme sur la référence. */ .rx-stats-ic::before{content:'';position:absolute;left:-4px;top:-4px;width:34px;height:34px;border-radius:50%;background:rgba(217,155,74,.35);z-index:-1;} .rx-stats-ic svg{width:40px;height:40px;fill:currentColor;} .rx-stats b{display:block;font-family:var(--da-heading);font-size:34px;font-weight:700;line-height:1;letter-spacing:-.01em;} .rx-stats b > span{font-variant-numeric:tabular-nums;} .rx-stats-lbl{display:block;font-size:13px;color:rgba(255,255,255,.78);margin-top:6px;} .rx .home-ats-callout.rx-split{margin-top:96px;} /* ---------- Formes décoratives en parallaxe ---------- */ .rx-deco{position:relative;} .rx-wave{position:absolute;width:300px;height:124px;color:var(--brand-ink);opacity:.55;pointer-events:none;z-index:-1;} .rx-wave-right{right:-120px;top:-70px;} .rx-wave-left{left:-130px;top:-60px;color:var(--gold);opacity:.8;} .rx-glow{position:absolute;right:-80px;top:40px;width:300px;height:300px;border-radius:50%;z-index:-1;pointer-events:none; background:radial-gradient(closest-side,rgba(217,155,74,.22),transparent);} /* ---------- Survols ---------- */ .rx .home-cta{position:relative;transition:transform .2s ease,background .2s ease,box-shadow .2s ease;} .rx .home-cta::after{content:'\2192';display:inline-block;margin-left:10px;transition:transform .25s ease;} .rx .home-cta:hover::after{transform:translateX(5px);} .rx .home-cta:hover{transform:translateY(-2px);} .rx .home-feature-ic{transition:transform .35s cubic-bezier(.3,1.6,.5,1);} .rx .home-feature:hover .home-feature-ic{transform:translateY(-4px) rotate(-8deg) scale(1.06);} .rx .home-steps li{transition:transform .25s ease,box-shadow .25s ease;} .rx .home-steps li:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(18,42,64,.1);} .rx .home-step-num{transition:background .25s ease,color .25s ease;} .rx .home-steps li:hover .home-step-num{background:var(--gold);color:#12203a;} .rx .home-review{transition:transform .25s ease,box-shadow .25s ease;} .rx .home-review:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(18,42,64,.1);} .rx .home-faq details{transition:border-color .2s ease,box-shadow .2s ease;} .rx .home-faq details[open]{border-color:var(--grad-1);box-shadow:0 10px 24px rgba(18,42,64,.08);} .rx .home-faq details[open] summary{color:var(--brand-ink);} @media (prefers-reduced-motion: no-preference){ .rx-ats-badge{animation:rxBob 5s ease-in-out infinite;} @keyframes rxBob{0%,100%{translate:0 0;}50%{translate:0 -10px;}} } /* Avis : initiales dans une pastille, à gauche du nom. */ .rx .home-review figcaption{position:relative;padding-left:52px;min-height:42px;justify-content:center;} .rx-avatar{position:absolute;left:0;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%; display:grid;place-items:center;background:var(--grad-1);color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em; box-shadow:0 0 0 3px var(--gold-soft);} /* ---------- En-tête qui se resserre au défilement ---------- */ .brandbar{transition:padding .3s ease,box-shadow .3s ease;} .brandbar.rx-scrolled{padding-top:9px;padding-bottom:9px;box-shadow:0 6px 18px rgba(7,37,68,.10);} /* ---------- Retour en haut ---------- */ .rx-top{ position:fixed;right:28px;bottom:-70px;z-index:60;width:46px;height:46px;border:0;border-radius:50%; display:grid;place-items:center;cursor:pointer;color:#fff;background:var(--grad-1); box-shadow:0 10px 24px rgba(7,37,68,.28);transition:bottom .6s cubic-bezier(.2,.7,.2,1),background .2s ease; } .rx-top svg{width:20px;height:20px;} .rx-top.open{bottom:28px;} .rx-top:hover{background:var(--gold);color:#12203a;} @media (max-width: 900px){ .rx-stats{grid-template-columns:repeat(2,1fr);row-gap:22px;} .rx-stats li:nth-child(3){border-left:0;} .rx-wave{width:200px;height:84px;} .rx-wave-right{right:-60px;top:-50px;} .rx-wave-left{left:-70px;} } @media (max-width: 600px){ .rx .home-hero{padding-top:60px;padding-bottom:56px;} .rx-stats{padding:24px 0;} .rx-stats li{flex-direction:column;text-align:center;gap:8px;padding:4px 8px;} .rx-stats-ic{width:44px;height:44px;} .rx-stats-ic svg{width:32px;height:32px;} .rx-stats b{font-size:26px;} .rx-stats-lbl{font-size:12px;} .rx .home-ats-callout.rx-split{margin-top:64px;} .rx-top{right:16px;width:42px;height:42px;} .rx-top.open{bottom:18px;} .rx-loader-brand span{font-size:22px;} } /* Les formes débordent volontairement de leur section ; sur téléphone, un débordement à droite élargissait toute la page (454 px au lieu de 390). overflow-x:clip coupe à l'horizontale sans créer de défilement et laisse la vague déborder en hauteur. */ @media (max-width: 1200px){ .rx-deco,.rx-split{overflow-x:clip;} } /* Thème sombre : l'étiquette arrondie perdait son contour. */ :root[data-theme="dark"] .rx-pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rx-pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);} } /* ===================================================================== Hero en deux colonnes, d'après le site de référence ===================================================================== */ .rx .home-hero.rx-hero{ display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:end;gap:20px; text-align:left;padding:0 4px;margin-bottom:0;min-height:600px; } /* Fond plein bord à bord : le bleu nuit de la marque tient le rôle du vert de la référence. Le diaporama photo n'existe plus dans ce hero. */ .rx-hero::before{ content:'';position:absolute;top:-28px;bottom:0;left:50%;width:100vw;transform:translateX(-50%); z-index:-3;background:var(--grad-1); } .rx-hero-text{position:relative;z-index:1;align-self:center;padding:70px 0 80px;} .rx-hero .home-title{font-size:54px;line-height:1.08;margin:0 0 22px;max-width:none;text-shadow:none;} .rx-hero .home-sub{margin:0 0 30px;max-width:33em;text-shadow:none;color:rgba(255,255,255,.8);} .rx-hero .home-cta-row{justify-content:flex-start;} .rx-hero .home-cta{min-width:0;} .rx-hero .home-reassure{display:grid;grid-template-columns:repeat(2,max-content);gap:10px 24px;justify-content:start;text-shadow:none;} /* Bouton principal jaune-or comme le « Find Courses » de la référence. */ .rx-hero .btn.primary{background:var(--gold);border-color:var(--gold);color:#12203a;} .rx-hero .btn.primary:hover{background:#e6ad62;border-color:#e6ad62;box-shadow:0 0 0 3px rgba(217,155,74,.3);} .rx-hs{position:absolute;pointer-events:none;user-select:none;} .rx-hs-points{left:-70px;top:-6px;width:230px;height:auto;z-index:-1;} .rx-hs-carre{left:-6px;bottom:40px;width:110px;height:auto;z-index:-1;} .rx-hs-etincelles{right:-10px;top:26px;width:100px;height:auto;z-index:0;} .rx-hero-visual{position:relative;align-self:end;height:560px;} .rx-hs-disque{left:50%;bottom:40px;width:470px;height:auto;transform:translateX(-50%);z-index:-2;} .rx-hs-rayures{right:4%;top:40px;width:340px;height:auto;z-index:-1;} .rx-hero-photo{position:absolute;left:50%;bottom:0;height:545px;width:auto;transform:translateX(-50%);z-index:0;} /* Le bas de la photo se fond dans le bleu : la section suivante a le même fond, une coupe nette aux hanches donnerait des personnages coupés en l'air. */ .rx-hero-photo{-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 97%);mask-image:linear-gradient(to bottom,#000 72%,transparent 97%);} .rx-float{ position:absolute;z-index:1;display:flex;align-items:center;gap:14px; background:#fff;color:#1c1b18;border-radius:12px;padding:14px 22px 14px 14px; box-shadow:0 18px 40px rgba(5,14,26,.3); } .rx-float small{display:block;font-size:12px;color:#5F6460;line-height:1.3;} .rx-float b{display:block;font-family:var(--da-heading);font-size:24px;font-weight:700;line-height:1.1;} .rx-float b em{font-style:normal;color:var(--gold);font-size:.8em;margin-left:2px;} .rx-float-ic{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--grad-1);color:#fff;} .rx-float-ic.gold{background:var(--gold);color:#12203a;} .rx-float-ic svg{width:24px;height:24px;fill:currentColor;} /* Cartes posées sur le buste et la taille, jamais sur un visage. */ .rx-float-ats{right:-28px;bottom:22px;} .rx-float-tpl{left:-40px;bottom:150px;} @media (prefers-reduced-motion: no-preference){ .rx-hs-carre{animation:rxZoom 3s ease-in-out infinite;} .rx-hs-etincelles{animation:rxWiggle 3s ease-in-out 1s infinite alternate;} .rx-hs-points{animation:rxFloat 8s ease-in-out infinite;} .rx-hs-rayures{animation:rxFloat 9s ease-in-out infinite reverse;} .rx-float{animation:rxBob 5s ease-in-out infinite;} .rx-float-tpl{animation-delay:-2.5s;} @keyframes rxZoom{0%,100%{scale:1;}50%{scale:1.15;}} @keyframes rxWiggle{from{rotate:-10deg;}to{rotate:12deg;}} /* Entrée : la photo monte, les cartes arrivent après elle. */ .rx-anim body:not(.rx-ready) .rx-hero-visual > :is(.rx-hero-photo,.rx-float,.rx-hs-disque){opacity:0;} .rx-anim body.rx-ready .rx-hero-photo{animation:rxPhotoIn 1s cubic-bezier(.2,.7,.2,1) .2s both;} .rx-anim body.rx-ready .rx-hs-disque{animation:rxDiscIn 1s cubic-bezier(.2,.7,.2,1) both;} .rx-anim body.rx-ready .rx-float-ats{animation:rxPop .6s cubic-bezier(.3,1.5,.5,1) .9s both,rxBob 5s ease-in-out 1.5s infinite;} .rx-anim body.rx-ready .rx-float-tpl{animation:rxPop .6s cubic-bezier(.3,1.5,.5,1) 1.1s both,rxBob 5s ease-in-out 1.7s infinite;} @keyframes rxPhotoIn{from{opacity:0;translate:0 60px;}to{opacity:1;translate:0 0;}} @keyframes rxDiscIn{from{opacity:0;scale:.6;}to{opacity:1;scale:1;}} @keyframes rxPop{from{opacity:0;scale:.6;}to{opacity:1;scale:1;}} } @media (max-width: 1024px){ .rx-hero .home-title{font-size:42px;} .rx-float-tpl{left:-10px;} } @media (max-width: 900px){ .rx .home-hero.rx-hero{grid-template-columns:1fr;text-align:center;min-height:0;gap:0;} .rx-hero-text{padding:48px 0 10px;} .rx-hero .home-title{font-size:34px;} .rx-hero .home-sub{margin-inline:auto;} .rx-hero .home-cta-row{justify-content:center;} .rx-hero .home-reassure{justify-content:center;} .rx-hero-visual{height:430px;max-width:440px;width:100%;margin:0 auto;} .rx-hero-photo{height:410px;} .rx-hs-disque{width:360px;} .rx-hs-rayures{width:250px;right:0;} .rx-float-ats{right:0;bottom:12px;} .rx-float-tpl{left:0;bottom:120px;} } @media (max-width: 600px){ .rx-hero .home-title{font-size:29px;} .rx-hero .home-reassure{grid-template-columns:1fr;justify-items:start;width:max-content;margin-inline:auto;} .rx-hs-points{width:150px;left:-50px;} .rx-hs-carre{display:none;} .rx-hs-etincelles{width:64px;right:0;top:12px;} .rx-hero-visual{height:360px;} .rx-hero-photo{height:345px;} .rx-hs-disque{width:300px;bottom:24px;} .rx-hs-rayures{width:200px;top:30px;} .rx-float{padding:9px 14px 9px 9px;gap:9px;} .rx-float b{font-size:19px;} .rx-float small{font-size:11px;} .rx-float-ic{width:38px;height:38px;} .rx-float-ic svg{width:19px;height:19px;} .rx-float-ats{bottom:6px;} .rx-float-tpl{bottom:92px;} } /* Formes de la référence (assets/shapes) */ .rx-wave{width:320px;height:auto;opacity:1;} .rx-wave-right{right:-110px;top:-80px;} .rx-wave-left{left:-140px;top:-50px;} .rx-ats-shape{position:absolute;left:0;top:0;width:210px;height:auto;z-index:0;} .rx-ats-card{z-index:1;} .rx-contact{position:relative;overflow:hidden;isolation:isolate;} .rx-contact-shape{position:absolute;right:-40px;bottom:-60px;width:170px;height:auto;opacity:.35;z-index:-1;pointer-events:none;} @media (prefers-reduced-motion: no-preference){ .rx-ats-shape{animation:rxFloat 8s ease-in-out infinite;} } @media (max-width: 600px){ .rx-ats-shape{width:150px;} .rx-wave{width:220px;} } /* ===================================================================== Avis en carrousel, comme « What Our Learners Say » de la référence : une grande carte à la fois (portrait à gauche, citation à droite), deux cartes empilées derrière, flèches rondes sur les côtés. ===================================================================== */ .rx-car{position:relative;max-width:900px;margin:0 auto;padding:0 64px;} .rx-car-view{position:relative;} /* Cartes empilées derrière la carte active. */ .rx-car-view::before,.rx-car-view::after{ content:'';position:absolute;inset:14px -14px -14px 14px;border-radius:18px; background:var(--card);border:1px solid var(--line);z-index:-1; } .rx-car-view::after{inset:26px -26px -26px 26px;opacity:.6;z-index:-2;} .rx .rx-car-track{ display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:none;border-radius:18px; } .rx-car-track::-webkit-scrollbar{display:none;} .rx .rx-slide{ flex:0 0 100%;scroll-snap-align:center;margin:0; display:grid;grid-template-columns:230px 1fr;grid-template-areas:"side quote"; padding:0;border-radius:18px;overflow:hidden;text-align:left; border:1px solid var(--line);background:var(--card); } .rx .rx-slide:hover{transform:none;box-shadow:none;} .rx .rx-slide::before{display:none;} .rx .rx-slide figcaption{ grid-area:side;position:relative;padding:34px 20px;min-height:0; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px; background:var(--grad-1);color:#fff;isolation:isolate;overflow:hidden; } .rx .rx-slide figcaption::before{ content:'';position:absolute;right:-50px;bottom:-50px;width:170px;height:170px;z-index:-1;opacity:.35; background:url('../assets/shapes/cercle-points-or.webp') center/contain no-repeat; } .rx .rx-slide .home-review-name{display:flex;flex-direction:column;align-items:center;gap:14px;color:#fff;font-family:var(--da-heading);font-size:18px;} .rx .rx-slide .home-review-role{color:rgba(255,255,255,.75);font-size:12.5px;} .rx .rx-slide .rx-avatar{ position:static;transform:none;width:96px;height:96px;font-size:30px; background:var(--gold);color:#12203a;box-shadow:0 0 0 6px rgba(255,255,255,.12); font-family:var(--da-heading); } .rx .rx-slide blockquote{ grid-area:quote;margin:0;padding:44px 40px 40px;position:relative;align-self:center; font-family:var(--da-heading);font-weight:700;font-size:21px;line-height:1.45;color:var(--ink); } .rx .rx-slide blockquote::before{content:none;} .rx .rx-slide blockquote::after{content:none;} /* Guillemets en grand, comme l'icône « 99 » de la référence. */ .rx .rx-slide blockquote{quotes:none;} .rx .rx-slide blockquote::before{ content:'\201C';display:block;font-family:Georgia,serif;font-size:72px;line-height:.6;height:30px;color:var(--gold);margin-bottom:10px; } .rx-car-btn{ position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%; display:grid;place-items:center;cursor:pointer;z-index:2; background:var(--card);color:var(--ink);border:1.5px solid var(--grad-1); transition:background .2s ease,color .2s ease,scale .2s ease; } .rx-car-btn svg{width:20px;height:20px;} .rx-car-btn:hover{background:var(--grad-1);color:#fff;scale:1.06;} .rx-car-prev{left:0;} .rx-car-next{right:0;} .rx-car-dots{display:flex;justify-content:center;gap:8px;margin-top:40px;} .rx-car-dots button{ width:10px;height:10px;border-radius:99px;border:0;padding:0;cursor:pointer;background:var(--line-strong);opacity:.5; transition:width .3s ease,background .3s ease,opacity .3s ease; } .rx-car-dots button[aria-current="true"]{width:30px;background:var(--gold);opacity:1;} @media (max-width: 700px){ .rx-car{padding:0 0 0;} .rx-car-view::before{inset:10px -8px -10px 8px;} .rx-car-view::after{display:none;} .rx .rx-slide{grid-template-columns:1fr;grid-template-areas:"side" "quote";} .rx .rx-slide figcaption{padding:24px 16px;flex-direction:row;gap:14px;justify-content:flex-start;text-align:left;} .rx .rx-slide .home-review-name{flex-direction:row;font-size:16px;} .rx .rx-slide .rx-avatar{width:54px;height:54px;font-size:18px;} .rx .rx-slide figcaption{display:grid;grid-template-columns:auto 1fr;align-items:center;} .rx .rx-slide .home-review-name{display:contents;} .rx .rx-slide .rx-avatar{grid-row:1/3;} .rx .rx-slide .home-review-role{grid-column:2;} .rx .rx-slide blockquote{padding:26px 22px 28px;font-size:17px;} .rx-car-btn{top:auto;bottom:-14px;translate:0 0;width:42px;height:42px;} .rx-car-prev{left:calc(50% - 100px);} .rx-car-next{right:calc(50% - 100px);} .rx-car-dots{margin-top:38px;} } .rx-ats-badge{z-index:2;} .rx .rx-slide figcaption::before{right:-80px;bottom:-85px;} /* ===================================================================== Icônes, pinceaux et animations repris de la référence (Educeet) ===================================================================== */ /* Pinceau des titres : le tracé de la référence, recoloré or. */ .rx-brush::after{ background:url('../assets/shapes/pinceau.svg') center/100% 100% no-repeat; height:.34em;bottom:-.1em; } /* Icônes de la référence : dessinées au trait, elles prennent la couleur du texte (currentColor). */ .rx-stats-ic svg{width:44px;height:44px;} .rx .home-feature-ic svg{width:36px;height:36px;fill:none;} .rx-float-ic svg{width:26px;height:26px;fill:none;} .rx-contact-label svg{fill:none;color:var(--gold);} .rx-car-btn svg{width:18px;height:18px;} .rx-top-ic{width:18px;height:18px;rotate:-90deg;} /* Coches et guillemets : ceux de la référence. */ .rx-checks li::before{background:url("data:image/svg+xml,%3Csvg viewBox=%220 0 30 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M8.56793 23.8839C8.37951 23.8839 8.22245 23.7608 8.15964 23.6069C8.12828 23.5453 5.42699 16.7109 1.24953 14.1249C0.432876 13.6324 -0.195186 13.109 0.056039 11.9391C0.307264 10.8 1.09256 10.1535 2.50593 9.84567C5.01862 9.32229 7.71982 13.1397 8.72499 14.7098C12.2428 9.69181 19.2785 1.81065 29.5179 0.887097C30.0119 0.830341 30.1945 1.548 29.7378 1.74909C29.5807 1.81065 14.9439 8.36808 9.00757 23.6377C8.91341 23.7915 8.75635 23.8839 8.56793 23.8839Z%22 fill=%22%23D99B4A%22 /%3E %3C/svg%3E") center/contain no-repeat;} .rx .rx-slide blockquote::before{ content:'';display:block;width:34px;height:25px;margin-bottom:14px; background:url("data:image/svg+xml,%3Csvg viewBox=%220 0 30 22%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M10 0.0849609H5C3.67392 0.0849609 2.40215 0.611745 1.46447 1.54943C0.526784 2.48711 0 3.75888 0 5.08496L0 10.085C0 10.748 0.263392 11.3839 0.732233 11.8527C1.20107 12.3216 1.83696 12.585 2.5 12.585H9.8875C9.59091 14.3306 8.68685 15.9153 7.33504 17.059C5.98323 18.2026 4.27069 18.8317 2.5 18.835C2.16848 18.835 1.85054 18.9667 1.61612 19.2011C1.3817 19.4355 1.25 19.7534 1.25 20.085C1.25 20.4165 1.3817 20.7344 1.61612 20.9688C1.85054 21.2033 2.16848 21.335 2.5 21.335C5.15125 21.332 7.69306 20.2775 9.56778 18.4027C11.4425 16.528 12.497 13.9862 12.5 11.335V2.58496C12.5 1.92192 12.2366 1.28603 11.7678 0.817194C11.2989 0.348353 10.663 0.0849609 10 0.0849609Z%22 fill=%22%23D99B4A%22 /%3E %3Cpath d=%22M27.5 0.0849609H22.5C21.1739 0.0849609 19.9021 0.611745 18.9645 1.54943C18.0268 2.48711 17.5 3.75888 17.5 5.08496V10.085C17.5 10.748 17.7634 11.3839 18.2322 11.8527C18.7011 12.3216 19.337 12.585 20 12.585H27.3875C27.0909 14.3306 26.1868 15.9153 24.835 17.059C23.4832 18.2026 21.7707 18.8317 20 18.835C19.6685 18.835 19.3505 18.9667 19.1161 19.2011C18.8817 19.4355 18.75 19.7534 18.75 20.085C18.75 20.4165 18.8817 20.7344 19.1161 20.9688C19.3505 21.2033 19.6685 21.335 20 21.335C22.6513 21.332 25.1931 20.2775 27.0678 18.4027C28.9425 16.528 29.997 13.9862 30 11.335V2.58496C30 1.92192 29.7366 1.28603 29.2678 0.817194C28.7989 0.348353 28.163 0.0849609 27.5 0.0849609Z%22 fill=%22%23D99B4A%22 /%3E %3C/svg%3E") center/contain no-repeat; } /* Tuiles d'outils : au survol, la tuile se remplit de sa couleur et l'icône rebondit, comme les catégories de la référence. */ @keyframes rxIconBounce{0%,20%,50%,80%,100%{transform:translateY(0);}40%{transform:translateY(-10px);}} .rx .home-feature{--tile:#1B3A5C;transition:background-color .35s ease,transform .5s ease,box-shadow .25s ease;} .rx .home-feature:nth-child(2){--tile:#2a97a2;} .rx .home-feature:nth-child(3){--tile:#2f8f65;} .rx .home-feature:nth-child(4){--tile:#d05b2c;} .rx .home-feature:hover{background:var(--tile);border-color:var(--tile);} .rx .home-feature:hover h4,.rx .home-feature:hover p{color:#fff;} .rx .home-feature h4,.rx .home-feature p{transition:color .3s ease;} .rx .home-feature:hover .home-feature-ic{transform:none;animation:rxIconBounce .8s 1;} /* Boutons : le libellé file vers le haut et revient par le bas, flèche de la référence (js/accueil-anim.js découpe le libellé en deux copies). */ .rx .home-cta.rx-roll::after{content:none;} .rx-roll .rx-roll-txt{position:relative;display:inline-block;overflow:hidden;vertical-align:top;} .rx-roll .rx-roll-1{display:block;transition:transform .3s ease;} .rx-roll .rx-roll-2{position:absolute;left:0;top:100%;display:block;transition:transform .3s ease;} .rx-roll:hover .rx-roll-1,.rx-roll:focus-visible .rx-roll-1{transform:translateY(-150%);} .rx-roll:hover .rx-roll-2,.rx-roll:focus-visible .rx-roll-2{transform:translateY(-100%);} .rx-roll .rx-roll-ic{display:inline-flex;margin-left:10px;transition:transform .3s ease;} .rx-roll .rx-roll-ic svg{width:14px;height:14px;} .rx-roll:hover .rx-roll-ic{transform:translateX(4px);} /* Bouton WhatsApp du bandeau de contact : le numéro n'est pas affiché. */ .rx-wa-btn{ display:inline-flex;align-items:center;gap:10px;align-self:flex-end; background:#25D366;color:#0b2e1a;text-decoration:none;border-radius:99px; padding:12px 22px 12px 16px;font-family:var(--da-heading);font-weight:700;font-size:18px; box-shadow:0 10px 24px rgba(0,0,0,.18);transition:transform .2s ease,background .2s ease; } .rx-wa-btn svg{width:24px;height:24px;fill:currentColor;flex:none;} .rx-wa-btn:hover{background:#2fe377;transform:translateY(-2px);} .rx-wa-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px;} @media (max-width: 900px){ .rx-wa-btn{align-self:center;} } /* ----- Animations des formes, calquées une à une sur la référence ----- points-carre = it-hero-shape-3 zoomIn 3s en boucle etincelles = it-hero-shape-4 rotation 3D 3s, aller-retour, après 3s rayures = it-hero-shape-8 rotation complète en 55s points-cercle, disque immobiles cercle de l'encart ATS = it-about-shape-1 parallaxe verticale vagues = it-course-shape-1 / it-testimonial-shape-2 parallaxe horizontale cercle du contact = it-cta-2-shape-1 zoomIn 5s en boucle */ @keyframes rxZoomIn{from{opacity:0;transform:scale3d(.85,.85,.85);}50%{opacity:1;}} @keyframes rxRotateY{from{transform:rotateY(0deg);}to{transform:rotateY(360deg);}} @keyframes rxTurn{to{rotate:360deg;}} .rx-hs-points,.rx-hs-rayures,.rx-hs-carre,.rx-hs-etincelles,.rx-ats-shape{animation:none;} @media (prefers-reduced-motion: no-preference){ .rx-hs-carre{animation:rxZoomIn 3s infinite;} .rx-hs-etincelles{animation:rxRotateY 3s ease-in-out 3s infinite alternate forwards;} .rx-hs-rayures{animation:rxTurn 55s linear infinite;} .rx-contact-shape{animation:rxZoomIn 5s infinite;} } /* Les rayures tournent : leurs coins débordaient sur téléphone et élargissaient la page. Le visuel coupe ce qui dépasse à l'horizontale. */ @media (max-width: 1200px){ .rx-hero-visual{overflow-x:clip;} } /* Téléphone : « ou » et ses deux filets restaient calés à gauche de la colonne. On les centre sur toute la largeur du bandeau. */ @media (max-width: 900px){ .rx-contact-or{justify-self:stretch;justify-content:center;gap:12px;} }