/* ===================================================================== SenCVPro • Design System — LIGHT par défaut (Blue Pro) ► FICHIER COMPLET à REMPLACER (version XL ~ 3× plus fournie) ► Respecte la logique & le layout existants (.scv-… inchangé) ► Carrousel : géométrie/transform/variables conservées ► Dark optionnel via html[data-theme="dark"] ► Inclut : tokens étendus, typographie, échelles, ombres, états, formulaires détaillés (erreurs/success/disabled), composants UI (cards, chips, badges, packs, steps, tabs, tables, toasts, alerts, tooltips CSS-only, modales, skeletons, breadcrumbs, progress), utilitaires (grille 12, spacing, display, text, color mix), RTL base, impression, A11y & motion, animations & micro-interactions ===================================================================== */ /* --------------------------------------------------------------------- 0) TOKENS — LIGHT = PAR DÉFAUT (palette ‘Bleu Pro’) --------------------------------------------------------------------- */ :root{ /* Surfaces & texte */ --bg:#F6F8FC; --surf:#FFFFFF; --surf2:#F3F6FB; --surf3:#EEF3FB; --backdrop:rgba(10,20,30,.56); --ink:#0B1220; --ink-2:#26344D; --ink-3:#66728A; --ink-inv:#FFFFFF; /* Bordures */ --ring:#E6ECF5; --ring-2:#D7E1EE; --divider:#E8EEF8; /* Marque & accent (Bleu élégant) */ --brand:#2563EB; --brand2:#1D4ED8; --accent:#2563EB; --accent-2:#3B82F6; /* États */ --ok:#16A34A; --ok-2:#22C55E; --warn:#F59E0B; --warn-2:#FBBF24; --err:#EF4444; --err-2:#DC2626; --info:#0EA5E9; /* Ombres (élévations) */ --shadow-0:none; --shadow-1:0 4px 14px rgba(15,23,42,.06); --shadow-2:0 10px 26px rgba(15,23,42,.10); --shadow-3:0 18px 42px rgba(15,23,42,.14); --shadow-4:0 26px 64px rgba(15,23,42,.18); /* Rythme, rayons & carrousel (compat JS) */ --container:1120px; --pad:16px; --r:16px; --r-sm:12px; --r-lg:20px; --r-xl:24px; --gap:16px; --peek:12vw; --slideWpx:78vw; --arrow:44px; /* Typo scale */ --fs-1: clamp(32px,5.2vw,52px); --fs-2: clamp(24px,3.4vw,34px); --fs-3: clamp(18px,2.4vw,22px); --fs-body: 16px; --fs-sm: 14px; --fs-xs:12px; --fs-lg:18px; /* Durations & easings */ --dur-1:.12s; --dur-2:.18s; --dur-3:.28s; --dur-4:.45s; --ease-std:cubic-bezier(.22,.61,.36,1); /* WhatsApp (préservé) */ --wa:#25D366; --wa2:#128C7E; } @media (max-width:1024px){ :root{ --arrow:40px } } @media (max-width:680px){ :root{ --arrow:36px } } /* --------------------------------------------------------------------- 1) TOKENS — DARK (optionnel) → --------------------------------------------------------------------- */ html[data-theme="dark"]{ --bg:#0B1016; --surf:#101621; --surf2:#0D131D; --surf3:#0F1725; --backdrop:rgba(0,0,0,.55); --ink:#EDF3FA; --ink-2:#C9D6E6; --ink-3:#9FB0C6; --ink-inv:#0B1220; --ring:#1E2A3C; --ring-2:#24334A; --divider:#1A2636; --brand:#22C55E; --brand2:#16A34A; --accent:#3B82F6; --accent-2:#60A5FA; --ok:#22C55E; --ok-2:#16A34A; --warn:#F59E0B; --warn-2:#FBBF24; --err:#EF4444; --err-2:#DC2626; --info:#38BDF8; --shadow-1:0 8px 22px rgba(0,0,0,.22); --shadow-2:0 12px 28px rgba(0,0,0,.24); --shadow-3:0 18px 42px rgba(0,0,0,.28); --shadow-4:0 26px 64px rgba(0,0,0,.34); } /* --------------------------------------------------------------------- 2) RESET + BASE (sans casser vos layouts) --------------------------------------------------------------------- */ *{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--ink)} img,svg,video{display:block;max-width:100%;height:auto} a{color:var(--accent);text-decoration:none} button{font:inherit} body{ font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.6; font-size:var(--fs-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } :focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%, transparent);border-radius:10px} h1,h2,h3{margin:0 0 .6rem;line-height:1.15;letter-spacing:-.02em} h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} .scv-muted{color:var(--ink-2)} .scv-center{text-align:center} .scv-container{max-width:var(--container);margin:auto;padding-inline:var(--pad)} .scv-section{padding-block:56px} @media (max-width:768px){.scv-section{padding-block:40px}} /* --------------------------------------------------------------------- 3) Élévations, rayons & transitions helpers --------------------------------------------------------------------- */ .elev-0{box-shadow:var(--shadow-0)} .elev-1{box-shadow:var(--shadow-1)} .elev-2{box-shadow:var(--shadow-2)} .elev-3{box-shadow:var(--shadow-3)} .elev-4{box-shadow:var(--shadow-4)} .rad-sm{border-radius:var(--r-sm)} .rad{border-radius:var(--r)} .rad-lg{border-radius:var(--r-lg)} .rad-xl{border-radius:var(--r-xl)} .trans-std{transition:all var(--dur-2) var(--ease-std)} /* --------------------------------------------------------------------- 4) PRIMITIVES : cards, boutons, badges, chips --------------------------------------------------------------------- */ .scv-card{background:var(--surf);border:1px solid var(--ring);border-radius:var(--r);box-shadow:var(--shadow-2);padding:18px} .scv-btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:12px 18px;border-radius:var(--r-sm);border:1px solid rgba(0,0,0,.04); background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;font-weight:900; box-shadow:0 10px 26px color-mix(in srgb,var(--brand) 26%, transparent); transition:transform var(--dur-2) ease, box-shadow var(--dur-2) ease, filter var(--dur-1) ease; } .scv-btn:hover{transform:translateY(-1px)} .scv-btn:active{transform:translateY(0)} .scv-btn[disabled]{opacity:.55;cursor:not-allowed} .scv-btn--light{background:var(--surf2);border-color:var(--ring);color:var(--ink)} .scv-btn--outline{background:transparent;border-color:var(--ring);color:var(--ink)} .scv-btn--ghost{background:transparent;border:1px dashed var(--ring);color:var(--ink-2)} .scv-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--surf2);color:var(--ink-2);border:1px solid var(--ring);font-weight:800} .scv-badge--soft{background:#EEF4FF;border-color:#DFE8FF;color:#294177} .scv-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;border:1px solid rgba(0,0,0,.06);font-weight:900} .scv-chip--ghost{background:#EEF3FF;color:var(--ink);border:1px solid var(--ring)} /* --------------------------------------------------------------------- 5) PACKS / TARIFS (préservation de structure) --------------------------------------------------------------------- */ .scv-packages__grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)} @media (max-width:980px){.scv-packages__grid{grid-template-columns:1fr 1fr}} @media (max-width:640px){.scv-packages__grid{grid-template-columns:1fr}} .scv-pack{position:relative;display:grid;align-content:start;gap:10px;padding:20px;border:1px solid var(--ring);border-radius:var(--r);background:var(--surf);box-shadow:var(--shadow-1);transition:transform var(--dur-2) ease, box-shadow var(--dur-3) ease} .scv-pack:hover{transform:translateY(-4px);box-shadow:var(--shadow-4)} .scv-pack--hot{border-color:var(--brand);box-shadow:0 16px 36px color-mix(in srgb,var(--brand) 16%, transparent)} .scv-pack__badge{position:absolute;top:12px;right:12px;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;font-size:12px;font-weight:800;border:1px solid rgba(0,0,0,.06)} .scv-pack__title,.scv-pack h3{color:var(--ink)} .scv-pack__price{font-size:22px;font-weight:900;margin:6px 0 8px;color:var(--ink)} .scv-pack__points{margin:0 0 10px 18px;color:var(--ink-2)} .scv-pack__cta{width:100%} .scv-pack.is-selected{border-color:var(--brand);box-shadow:0 16px 36px color-mix(in srgb,var(--brand) 22%, transparent)} /* --------------------------------------------------------------------- 6) PROCESS / ÉTAPES --------------------------------------------------------------------- */ .scv-steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .scv-step{padding:18px;border:1px solid var(--ring);border-radius:var(--r);background:var(--surf)} .scv-step__num{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:#F1F5FF;border:1px solid var(--ring);color:var(--ink);font-weight:800;margin-bottom:8px} /* --------------------------------------------------------------------- 7) CARROUSEL — PRÉSENTATION PRÉSERVÉE (tailles/transform identiques; couleurs améliorées) --------------------------------------------------------------------- */ .scv-carousel{position:relative} .scv-viewport{position:relative;overflow:hidden;padding:0 var(--peek);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)} .scv-track{display:flex;gap:var(--gap);will-change:transform;transform:translate3d(0,0,0);transition:transform var(--dur-4) var(--ease-std)} .scv-slide{flex:0 0 var(--slideWpx);transform:scale(.96);opacity:.9;transition:transform .22s ease, opacity .22s ease} .scv-slide.is-active{transform:scale(1);opacity:1} .scv-model{background:var(--surf);border:1px solid var(--ring);border-radius:var(--r);box-shadow:var(--shadow-1);padding:10px;display:grid;gap:10px} .scv-model__frame{background:var(--surf2);border:1px solid var(--ring);border-radius:12px;overflow:hidden;aspect-ratio:210/297;display:grid;place-items:center} .scv-model__frame img{width:100%;height:100%;object-fit:contain;display:block} .scv-model__meta h3{margin:6px 0 0;font-size:16px} .scv-model__cta{width:100%} /* Masques latéraux clairs */ .scv-viewport::before,.scv-viewport::after{content:"";position:absolute;top:0;bottom:0;width:12vw;pointer-events:none} .scv-viewport::before{left:0;background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,.85) 40%,rgba(255,255,255,0))} .scv-viewport::after{right:0;background:linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,.85) 40%,rgba(255,255,255,0))} /* Flèches — géométrie conservée */ .scv-nav{position:absolute;top:50%;transform:translateY(-50%);width:var(--arrow);height:var(--arrow);border-radius:50%;border:1px solid var(--ring);background:rgba(255,255,255,.94);box-shadow:var(--shadow-1);cursor:pointer} .scv-nav--prev{left:8px} .scv-nav--next{right:8px} .scv-nav::after{content:"";display:block;width:0;height:0;margin:auto;margin-top:calc(var(--arrow)/3.2);border-top:8px solid transparent;border-bottom:8px solid transparent} .scv-nav--prev::after{border-right:10px solid #2A3854} .scv-nav--next::after{border-left:10px solid #2A3854} /* --------------------------------------------------------------------- 8) FORMULAIRES — complet + états (success/erreur) --------------------------------------------------------------------- */ .scv-form-card{background:var(--surf);border:1px solid var(--ring);border-radius:18px;box-shadow:var(--shadow-1);padding:20px} .scv-form-title{margin:0 0 6px} .scv-form-sub{margin:0 0 14px;color:var(--ink-3)} /* grille 12 responsive */ .scv-grid{display:grid;gap:14px} .scv-col-12{grid-column:span 12} .scv-col-6{grid-column:span 6} .scv-col-4{grid-column:span 4} .scv-col-3{grid-column:span 3} @media (max-width:900px){.scv-col-6,.scv-col-4,.scv-col-3{grid-column:1/-1}} /* contrôles */ .scv-control label{display:block;font-weight:800;margin-bottom:6px;color:var(--ink-2)} .scv-control :is(input[type="text"],input[type="email"],input[type="tel"],input[type="date"],input[type="month"],select,textarea){ width:100%;padding:12px;border-radius:12px;background:#FFFFFF;color:var(--ink); border:1px solid var(--ring);outline:0;transition:border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, background var(--dur-2) ease; } .scv-control textarea{min-height:120px;resize:vertical} .scv-control :is(input,select,textarea)::placeholder{color:#8CA0B8} .scv-control :is(input,select,textarea):focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.18)} .scv-control :is(input,select,textarea):disabled{background:#F6F8FD;color:#98A6BC;border-color:var(--ring)} /* états validation */ .scv-control.is-error :is(input,select,textarea){border-color:color-mix(in srgb,var(--err) 65%, #fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 18%, transparent)} .scv-control.is-success :is(input,select,textarea){border-color:color-mix(in srgb,var(--ok) 65%, #fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%, transparent)} .scv-help{color:var(--ink-3);font-size:.92rem} .scv-help--err{color:var(--err);font-weight:700} /* Uploads */ .scv-file{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#FFFFFF;border:1px solid var(--ring)} .scv-file input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer} .scv-file__btn{padding:10px 12px;border-radius:10px;background:#F3F6FC;border:1px solid var(--ring);font-weight:800;color:var(--ink)} .scv-file__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3)} .scv-photo-box{background:#FFFFFF;border:1px dashed var(--ring);border-radius:12px} .scv-photo__preview{background:#F3F6FC;border:1px solid var(--ring);border-radius:12px} /* Items (exp/edu/lang) */ .scv-itemcard{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;background:#FFFFFF;border:1px solid var(--ring);border-left:4px solid var(--brand);box-shadow:0 8px 20px rgba(15,23,42,.08);border-radius:14px;padding:10px 12px;color:var(--ink)} .scv-itemcard--edu{border-left-color:var(--accent)} .scv-itemcard__icon{width:40px;height:40px;display:grid;place-items:center;background:var(--surf2);border:1px solid var(--ring);border-radius:10px} .scv-itemcard__title{font-weight:900;color:var(--ink-2)} .scv-itemcard__meta .scv-badge{background:#F3F6FC;border:1px solid var(--ring);color:var(--ink-2)} .scv-itemcard__actions .scv-chipcard__btn{background:#F3F6FC;color:var(--ink);border:1px solid var(--ring)} .scv-chipcard__btn--del{background:#FDF2F6;border-color:#F5C2D4;color:#8B1E3A} /* --------------------------------------------------------------------- 9) ACCORDÉONS (details/summary) --------------------------------------------------------------------- */ .scv-acc{border:1px solid var(--ring);border-radius:14px;background:var(--surf);overflow:hidden} .scv-acc__head{list-style:none;padding:14px 14px;font-weight:900;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--ink-2);background:#FFFFFF} .scv-acc[open] .scv-acc__head{border-bottom:1px solid var(--ring)} .scv-acc__body{padding:12px 14px;background:#FFFFFF} /* --------------------------------------------------------------------- 10) STEPPER (ligne + mobile) --------------------------------------------------------------------- */ .scv-stepper{display:block;margin:18px 0} .scv-steps-line{display:flex;gap:10px;list-style:none;padding:0;margin:0 auto;max-width:980px} .scv-steps-line li{flex:1;text-align:center;padding:10px 12px;border:1px solid var(--ring);border-radius:999px;background:var(--surf2);color:var(--ink-2);font-weight:700} .scv-steps-line li.is-current{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;border-color:transparent} .scv-steps-line li.is-done{background:#EAF1FF;border-color:#DDE6F5;color:#27446E} .scv-steps-mobile{display:none;margin-top:10px} .scv-steps-mobile__label{font-weight:600;color:var(--ink-2);margin-bottom:6px} .scv-progress{height:8px;border-radius:999px;background:var(--ring-2);overflow:hidden} .scv-progress__bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width var(--dur-3) var(--ease-std)} @media (max-width:720px){.scv-steps-line{display:none}.scv-steps-mobile{display:block}} /* --------------------------------------------------------------------- 11) TABS, TABLES, ALERTES, TOASTS, TOOLTIP, MODALE, SKELETONS --------------------------------------------------------------------- */ /* Tabs */ .scv-tabs{display:flex;gap:8px;border-bottom:1px solid var(--divider);margin-bottom:12px} .scv-tab{padding:8px 12px;border-radius:10px;color:var(--ink-2);cursor:pointer} .scv-tab.is-active{color:#fff;background:linear-gradient(90deg,var(--brand),var(--brand2))} /* Table */ .scv-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surf);border:1px solid var(--ring);border-radius:12px;overflow:hidden} .scv-table thead th{background:var(--surf2);color:var(--ink-2);text-align:left;font-weight:800;border-bottom:1px solid var(--ring);padding:12px} .scv-table td{padding:12px;border-bottom:1px solid var(--ring)} .scv-table tr:last-child td{border-bottom:0} /* Alertes */ .scv-alert{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px;border:1px solid var(--ring);border-radius:12px;background:var(--surf2)} .scv-alert--ok{border-color:color-mix(in srgb,var(--ok) 30%, #fff);background:color-mix(in srgb,var(--ok) 8%, var(--surf))} .scv-alert--warn{border-color:color-mix(in srgb,var(--warn) 30%, #fff);background:color-mix(in srgb,var(--warn) 8%, var(--surf))} .scv-alert--err{border-color:color-mix(in srgb,var(--err) 30%, #fff);background:color-mix(in srgb,var(--err) 8%, var(--surf))} /* Toast (positionné via JS) */ .scv-toast{min-width:280px;max-width:420px;padding:12px 14px;border-radius:14px;background:var(--surf);border:1px solid var(--ring);box-shadow:var(--shadow-3)} /* Tooltip CSS-only (trigger :hover) */ [data-scv-tip]{position:relative} [data-scv-tip]::after{content:attr(data-scv-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#111827;color:#fff;padding:6px 8px;border-radius:8px;font-size:12px;line-height:1;opacity:0;pointer-events:none;transition:opacity var(--dur-2) ease} [data-scv-tip]:hover::after{opacity:1} /* Modale (structure) */ .scv-modal{position:fixed;inset:0;display:none;place-items:center;padding:20px} .scv-modal.is-open{display:grid} .scv-modal__backdrop{position:absolute;inset:0;background:var(--backdrop);backdrop-filter:blur(6px)} .scv-modal__dialog{position:relative;z-index:1;background:var(--surf);border:1px solid var(--ring);border-radius:16px;box-shadow:var(--shadow-4);max-width:min(680px,92vw);width:100%;padding:18px} /* Skeletons */ .scv-skel{display:block;background:linear-gradient(90deg, var(--surf2), var(--surf3), var(--surf2));background-size:200% 100%;animation:scvShine 1.2s linear infinite;border-radius:8px} @keyframes scvShine{0%{background-position:200% 0}100%{background-position:-200% 0}} /* --------------------------------------------------------------------- 12) BREADCRUMBS, PROGRESS, BADGES ÉTATS --------------------------------------------------------------------- */ .scv-breadcrumb{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--ink-2)} .scv-breadcrumb a{color:var(--accent)} .scv-breadcrumb__sep{color:var(--ink-3)} .scv-progressbar{height:10px;border-radius:999px;background:var(--ring-2);overflow:hidden} .scv-progressbar__val{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width var(--dur-3) var(--ease-std)} .scv-badge--ok{background:color-mix(in srgb,var(--ok) 12%, var(--surf));border-color:color-mix(in srgb,var(--ok) 40%, #fff);color:color-mix(in srgb,var(--ok) 80%, #0b1)} .scv-badge--warn{background:color-mix(in srgb,var(--warn) 12%, var(--surf));border-color:color-mix(in srgb,var(--warn) 40%, #fff);color:color-mix(in srgb,var(--warn) 80%, #a60)} .scv-badge--err{background:color-mix(in srgb,var(--err) 12%, var(--surf));border-color:color-mix(in srgb,var(--err) 40%, #fff);color:color-mix(in srgb,var(--err) 80%, #a11)} /* --------------------------------------------------------------------- 13) SECTIONS / HERO (clair élégant) --------------------------------------------------------------------- */ #scv-hero{background:linear-gradient(180deg,#F6F8FC 0%, #FFFFFF 100%);padding-block:56px} #scv-hero .scv-hero__title, .scv-section h2, .scv-head h2, .scv-form-title{color:var(--ink);text-shadow:none} #scv-hero .scv-hero__sub, .scv-head__sub, .scv-form-sub{color:var(--ink-2)} #scv-hero .scv-trust, #scv-hero .scv-trust li, #scv-hero .scv-langs{color:var(--ink-3)} #scv-hero .scv-trust li::before{color:var(--ok)} /* --------------------------------------------------------------------- 14) UTILITAIRES — grille, spacing, display, texte, couleurs --------------------------------------------------------------------- */ /* Grille 12 basique (inline usage) */ .scv-grid{display:grid;gap:14px} .scv-col-12{grid-column:span 12} .scv-col-6{grid-column:span 6} .scv-col-4{grid-column:span 4} .scv-col-3{grid-column:span 3} @media (max-width:900px){.scv-col-6,.scv-col-4,.scv-col-3{grid-column:1/-1}} /* Spacing utils (subset) */ .mt-0{margin-top:0} .mt-4{margin-top:4px} .mt-8{margin-top:8px} .mt-12{margin-top:12px} .mt-16{margin-top:16px} .mt-24{margin-top:24px} .mb-0{margin-bottom:0} .mb-8{margin-bottom:8px} .mb-12{margin-bottom:12px} .mb-16{margin-bottom:16px} .mb-24{margin-bottom:24px} .p-8{padding:8px} .p-12{padding:12px} .p-16{padding:16px} .p-20{padding:20px} .p-24{padding:24px} .py-12{padding-block:12px} .px-12{padding-inline:12px} /* Display */ .d-block{display:block} .d-flex{display:flex} .d-grid{display:grid} .d-none{display:none} .flex-center{display:flex;align-items:center;justify-content:center} /* Texte */ .text-muted{color:var(--ink-3)} .text-strong{font-weight:900} .text-nowrap{white-space:nowrap} .text-sm{font-size:var(--fs-sm)} .text-xs{font-size:var(--fs-xs)} .text-lg{font-size:var(--fs-lg)} /* Couleurs */ .bg-surf{background:var(--surf)} .bg-surf2{background:var(--surf2)} .bg-brand{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff} .border{border:1px solid var(--ring)} .border-dash{border:1px dashed var(--ring)} /* --------------------------------------------------------------------- 15) RTL (base) & Print --------------------------------------------------------------------- */ [dir="rtl"] .scv-viewport::before{right:0;left:auto} [dir="rtl"] .scv-viewport::after{left:0;right:auto} [dir="rtl"] .scv-nav--prev{right:8px;left:auto} [dir="rtl"] .scv-nav--next{left:8px;right:auto} @media print{ :root{--bg:#fff;--ink:#000;--ring:#ddd} html,body{background:#fff;color:#000} .scv-wa-float,.scv-nav,.scv-toast,.scv-modal{display:none !important} .scv-card,.scv-form-card,.scv-acc,.scv-itemcard{box-shadow:none;border-color:#ddd} } /* --------------------------------------------------------------------- 16) A11y & motion --------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .scv-track,.scv-slide,.scv-btn,.scv-nav,.scv-pack,.scv-progress__bar,.scv-progressbar__val{transition:none !important;animation:none !important} } /* --------------------------------------------------------------------- 17) Animations & micro-interactions --------------------------------------------------------------------- */ @keyframes scvPop{0%{transform:scale(.96);opacity:.85}100%{transform:scale(1);opacity:1}} .scv-pop{animation:scvPop .22s ease both} @keyframes scvFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .scv-fadein{animation:scvFadeIn .25s var(--ease-std) both} /* --------------------------------------------------------------------- 18) WhatsApp flottant (inchangé visuel) --------------------------------------------------------------------- */ .scv-wa-float{position:fixed;right:18px;bottom:18px;z-index:50;padding:12px 16px;border-radius:999px;font-weight:900;color:#fff;background:linear-gradient(90deg,var(--wa),var(--wa2));border:1px solid var(--ring);box-shadow:0 10px 26px rgba(18,140,126,.18)} /* ===================================================================== FIN — LIGHT par défaut (Blue Pro), logique conservée, version XL ===================================================================== */ /* ===================================================================== SenCVPro • Design System — LIGHT par défaut (Blue Pro) ► FICHIER COMPLET à REMPLACER (version XL ~ 3× plus fournie) ► Respecte la logique & le layout existants (.scv-… inchangé) ► Carrousel : géométrie/transform/variables conservées ► Dark optionnel via html[data-theme="dark"] ► Inclut : tokens étendus, typographie, échelles, ombres, états, formulaires détaillés (erreurs/success/disabled), composants UI (cards, chips, badges, packs, steps, tabs, tables, toasts, alerts, tooltips CSS-only, modales, skeletons, breadcrumbs, progress), utilitaires (grille 12, spacing, display, text, color mix), RTL base, impression, A11y & motion, animations & micro-interactions ===================================================================== */ /* --------------------------------------------------------------------- 0) TOKENS — LIGHT = PAR DÉFAUT (palette ‘Bleu Pro’) --------------------------------------------------------------------- */ :root{ /* Surfaces & texte */ --bg:#F6F8FC; --surf:#FFFFFF; --surf2:#F3F6FB; --surf3:#EEF3FB; --backdrop:rgba(10,20,30,.56); --ink:#0B1220; --ink-2:#26344D; --ink-3:#66728A; --ink-inv:#FFFFFF; /* Bordures */ --ring:#E6ECF5; --ring-2:#D7E1EE; --divider:#E8EEF8; /* Marque & accent (Bleu élégant) */ --brand:#2563EB; --brand2:#1D4ED8; --accent:#2563EB; --accent-2:#3B82F6; /* États */ --ok:#16A34A; --ok-2:#22C55E; --warn:#F59E0B; --warn-2:#FBBF24; --err:#EF4444; --err-2:#DC2626; --info:#0EA5E9; /* Ombres (élévations) */ --shadow-0:none; --shadow-1:0 4px 14px rgba(15,23,42,.06); --shadow-2:0 10px 26px rgba(15,23,42,.10); --shadow-3:0 18px 42px rgba(15,23,42,.14); --shadow-4:0 26px 64px rgba(15,23,42,.18); /* Rythme, rayons & carrousel (compat JS) */ --container:1120px; --pad:16px; --r:16px; --r-sm:12px; --r-lg:20px; --r-xl:24px; --gap:16px; --peek:12vw; --slideWpx:78vw; --arrow:44px; /* Typo scale */ --fs-1: clamp(32px,5.2vw,52px); --fs-2: clamp(24px,3.4vw,34px); --fs-3: clamp(18px,2.4vw,22px); --fs-body: 16px; --fs-sm: 14px; --fs-xs:12px; --fs-lg:18px; /* Durations & easings */ --dur-1:.12s; --dur-2:.18s; --dur-3:.28s; --dur-4:.45s; --ease-std:cubic-bezier(.22,.61,.36,1); /* WhatsApp (préservé) */ --wa:#25D366; --wa2:#128C7E; } @media (max-width:1024px){ :root{ --arrow:40px } } @media (max-width:680px){ :root{ --arrow:36px } } /* --------------------------------------------------------------------- 1) TOKENS — DARK (optionnel) → --------------------------------------------------------------------- */ html[data-theme="dark"]{ --bg:#0B1016; --surf:#101621; --surf2:#0D131D; --surf3:#0F1725; --backdrop:rgba(0,0,0,.55); --ink:#EDF3FA; --ink-2:#C9D6E6; --ink-3:#9FB0C6; --ink-inv:#0B1220; --ring:#1E2A3C; --ring-2:#24334A; --divider:#1A2636; --brand:#22C55E; --brand2:#16A34A; --accent:#3B82F6; --accent-2:#60A5FA; --ok:#22C55E; --ok-2:#16A34A; --warn:#F59E0B; --warn-2:#FBBF24; --err:#EF4444; --err-2:#DC2626; --info:#38BDF8; --shadow-1:0 8px 22px rgba(0,0,0,.22); --shadow-2:0 12px 28px rgba(0,0,0,.24); --shadow-3:0 18px 42px rgba(0,0,0,.28); --shadow-4:0 26px 64px rgba(0,0,0,.34); } /* --------------------------------------------------------------------- 2) RESET + BASE (sans casser vos layouts) --------------------------------------------------------------------- */ *{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--ink)} img,svg,video{display:block;max-width:100%;height:auto} a{color:var(--accent);text-decoration:none} button{font:inherit} body{ font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.6; font-size:var(--fs-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } :focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%, transparent);border-radius:10px} h1,h2,h3{margin:0 0 .6rem;line-height:1.15;letter-spacing:-.02em} h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} .scv-muted{color:var(--ink-2)} .scv-center{text-align:center} .scv-container{max-width:var(--container);margin:auto;padding-inline:var(--pad)} .scv-section{padding-block:56px} @media (max-width:768px){.scv-section{padding-block:40px}} /* --------------------------------------------------------------------- 3) Élévations, rayons & transitions helpers --------------------------------------------------------------------- */ .elev-0{box-shadow:var(--shadow-0)} .elev-1{box-shadow:var(--shadow-1)} .elev-2{box-shadow:var(--shadow-2)} .elev-3{box-shadow:var(--shadow-3)} .elev-4{box-shadow:var(--shadow-4)} .rad-sm{border-radius:var(--r-sm)} .rad{border-radius:var(--r)} .rad-lg{border-radius:var(--r-lg)} .rad-xl{border-radius:var(--r-xl)} .trans-std{transition:all var(--dur-2) var(--ease-std)} /* --------------------------------------------------------------------- 4) PRIMITIVES : cards, boutons, badges, chips --------------------------------------------------------------------- */ .scv-card{background:var(--surf);border:1px solid var(--ring);border-radius:var(--r);box-shadow:var(--shadow-2);padding:18px} .scv-btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:12px 18px;border-radius:var(--r-sm);border:1px solid rgba(0,0,0,.04); background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;font-weight:900; box-shadow:0 10px 26px color-mix(in srgb,var(--brand) 26%, transparent); transition:transform var(--dur-2) ease, box-shadow var(--dur-2) ease, filter var(--dur-1) ease; } .scv-btn:hover{transform:translateY(-1px)} .scv-btn:active{transform:translateY(0)} .scv-btn[disabled]{opacity:.55;cursor:not-allowed} .scv-btn--light{background:var(--surf2);border-color:var(--ring);color:var(--ink)} .scv-btn--outline{background:transparent;border-color:var(--ring);color:var(--ink)} .scv-btn--ghost{background:transparent;border:1px dashed var(--ring);color:var(--ink-2)} .scv-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--surf2);color:var(--ink-2);border:1px solid var(--ring);font-weight:800} .scv-badge--soft{background:#EEF4FF;border-color:#DFE8FF;color:#294177} .scv-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;border:1px solid rgba(0,0,0,.06);font-weight:900} .scv-chip--ghost{background:#EEF3FF;color:var(--ink);border:1px solid var(--ring)} /* --------------------------------------------------------------------- 5) PACKS / TARIFS (préservation de structure) --------------------------------------------------------------------- */ .scv-packages__grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)} @media (max-width:980px){.scv-packages__grid{grid-template-columns:1fr 1fr}} @media (max-width:640px){.scv-packages__grid{grid-template-columns:1fr}} .scv-pack{position:relative;display:grid;align-content:start;gap:10px;padding:20px;border:1px solid var(--ring);border-radius:var(--r);background:var(--surf);box-shadow:var(--shadow-1);transition:transform var(--dur-2) ease, box-shadow var(--dur-3) ease} .scv-pack:hover{transform:translateY(-4px);box-shadow:var(--shadow-4)} .scv-pack--hot{border-color:var(--brand);box-shadow:0 16px 36px color-mix(in srgb,var(--brand) 16%, transparent)} .scv-pack__badge{position:absolute;top:12px;right:12px;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;font-size:12px;font-weight:800;border:1px solid rgba(0,0,0,.06)} .scv-pack__title,.scv-pack h3{color:var(--ink)} .scv-pack__price{font-size:22px;font-weight:900;margin:6px 0 8px;color:var(--ink)} .scv-pack__points{margin:0 0 10px 18px;color:var(--ink-2)} .scv-pack__cta{width:100%} .scv-pack.is-selected{border-color:var(--brand);box-shadow:0 16px 36px color-mix(in srgb,var(--brand) 22%, transparent)} /* --------------------------------------------------------------------- 6) PROCESS / ÉTAPES --------------------------------------------------------------------- */ .scv-steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .scv-step{padding:18px;border:1px solid var(--ring);border-radius:var(--r);background:var(--surf)} .scv-step__num{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:#F1F5FF;border:1px solid var(--ring);color:var(--ink);font-weight:800;margin-bottom:8px} /* --------------------------------------------------------------------- 7) CARROUSEL — PRÉSENTATION PRÉSERVÉE (tailles/transform identiques; couleurs améliorées) --------------------------------------------------------------------- */ .scv-carousel{position:relative} .scv-viewport{position:relative;overflow:hidden;padding:0 var(--peek);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)} .scv-track{display:flex;gap:var(--gap);will-change:transform;transform:translate3d(0,0,0);transition:transform var(--dur-4) var(--ease-std)} .scv-slide{flex:0 0 var(--slideWpx);transform:scale(.96);opacity:.9;transition:transform .22s ease, opacity .22s ease} .scv-slide.is-active{transform:scale(1);opacity:1} .scv-model{background:var(--surf);border:1px solid var(--ring);border-radius:var(--r);box-shadow:var(--shadow-1);padding:10px;display:grid;gap:10px} .scv-model__frame{background:var(--surf2);border:1px solid var(--ring);border-radius:12px;overflow:hidden;aspect-ratio:210/297;display:grid;place-items:center} .scv-model__frame img{width:100%;height:100%;object-fit:contain;display:block} .scv-model__meta h3{margin:6px 0 0;font-size:16px} .scv-model__cta{width:100%} /* Masques latéraux clairs */ .scv-viewport::before,.scv-viewport::after{content:"";position:absolute;top:0;bottom:0;width:12vw;pointer-events:none} .scv-viewport::before{left:0;background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,.85) 40%,rgba(255,255,255,0))} .scv-viewport::after{right:0;background:linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,.85) 40%,rgba(255,255,255,0))} /* Flèches — géométrie conservée */ .scv-nav{position:absolute;top:50%;transform:translateY(-50%);width:var(--arrow);height:var(--arrow);border-radius:50%;border:1px solid var(--ring);background:rgba(255,255,255,.94);box-shadow:var(--shadow-1);cursor:pointer} .scv-nav--prev{left:8px} .scv-nav--next{right:8px} .scv-nav::after{content:"";display:block;width:0;height:0;margin:auto;margin-top:calc(var(--arrow)/3.2);border-top:8px solid transparent;border-bottom:8px solid transparent} .scv-nav--prev::after{border-right:10px solid #2A3854} .scv-nav--next::after{border-left:10px solid #2A3854} /* --------------------------------------------------------------------- 8) FORMULAIRES — complet + états (success/erreur) --------------------------------------------------------------------- */ .scv-form-card{background:var(--surf);border:1px solid var(--ring);border-radius:18px;box-shadow:var(--shadow-1);padding:20px} .scv-form-title{margin:0 0 6px} .scv-form-sub{margin:0 0 14px;color:var(--ink-3)} /* grille 12 responsive */ .scv-grid{display:grid;gap:14px} .scv-col-12{grid-column:span 12} .scv-col-6{grid-column:span 6} .scv-col-4{grid-column:span 4} .scv-col-3{grid-column:span 3} @media (max-width:900px){.scv-col-6,.scv-col-4,.scv-col-3{grid-column:1/-1}} /* contrôles */ .scv-control label{display:block;font-weight:800;margin-bottom:6px;color:var(--ink-2)} .scv-control :is(input[type="text"],input[type="email"],input[type="tel"],input[type="date"],input[type="month"],select,textarea){ width:100%;padding:12px;border-radius:12px;background:#FFFFFF;color:var(--ink); border:1px solid var(--ring);outline:0;transition:border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, background var(--dur-2) ease; } .scv-control textarea{min-height:120px;resize:vertical} .scv-control :is(input,select,textarea)::placeholder{color:#8CA0B8} .scv-control :is(input,select,textarea):focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.18)} .scv-control :is(input,select,textarea):disabled{background:#F6F8FD;color:#98A6BC;border-color:var(--ring)} /* états validation */ .scv-control.is-error :is(input,select,textarea){border-color:color-mix(in srgb,var(--err) 65%, #fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 18%, transparent)} .scv-control.is-success :is(input,select,textarea){border-color:color-mix(in srgb,var(--ok) 65%, #fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%, transparent)} .scv-help{color:var(--ink-3);font-size:.92rem} .scv-help--err{color:var(--err);font-weight:700} /* Uploads */ .scv-file{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#FFFFFF;border:1px solid var(--ring)} .scv-file input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer} .scv-file__btn{padding:10px 12px;border-radius:10px;background:#F3F6FC;border:1px solid var(--ring);font-weight:800;color:var(--ink)} .scv-file__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3)} .scv-photo-box{background:#FFFFFF;border:1px dashed var(--ring);border-radius:12px} .scv-photo__preview{background:#F3F6FC;border:1px solid var(--ring);border-radius:12px} /* Items (exp/edu/lang) */ .scv-itemcard{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;background:#FFFFFF;border:1px solid var(--ring);border-left:4px solid var(--brand);box-shadow:0 8px 20px rgba(15,23,42,.08);border-radius:14px;padding:10px 12px;color:var(--ink)} .scv-itemcard--edu{border-left-color:var(--accent)} .scv-itemcard__icon{width:40px;height:40px;display:grid;place-items:center;background:var(--surf2);border:1px solid var(--ring);border-radius:10px} .scv-itemcard__title{font-weight:900;color:var(--ink-2)} .scv-itemcard__meta .scv-badge{background:#F3F6FC;border:1px solid var(--ring);color:var(--ink-2)} .scv-itemcard__actions .scv-chipcard__btn{background:#F3F6FC;color:var(--ink);border:1px solid var(--ring)} .scv-chipcard__btn--del{background:#FDF2F6;border-color:#F5C2D4;color:#8B1E3A} /* --------------------------------------------------------------------- 9) ACCORDÉONS (details/summary) --------------------------------------------------------------------- */ .scv-acc{border:1px solid var(--ring);border-radius:14px;background:var(--surf);overflow:hidden} .scv-acc__head{list-style:none;padding:14px 14px;font-weight:900;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--ink-2);background:#FFFFFF} .scv-acc[open] .scv-acc__head{border-bottom:1px solid var(--ring)} .scv-acc__body{padding:12px 14px;background:#FFFFFF} /* --------------------------------------------------------------------- 10) STEPPER (ligne + mobile) --------------------------------------------------------------------- */ .scv-stepper{display:block;margin:18px 0} .scv-steps-line{display:flex;gap:10px;list-style:none;padding:0;margin:0 auto;max-width:980px} .scv-steps-line li{flex:1;text-align:center;padding:10px 12px;border:1px solid var(--ring);border-radius:999px;background:var(--surf2);color:var(--ink-2);font-weight:700} .scv-steps-line li.is-current{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;border-color:transparent} .scv-steps-line li.is-done{background:#EAF1FF;border-color:#DDE6F5;color:#27446E} .scv-steps-mobile{display:none;margin-top:10px} .scv-steps-mobile__label{font-weight:600;color:var(--ink-2);margin-bottom:6px} .scv-progress{height:8px;border-radius:999px;background:var(--ring-2);overflow:hidden} .scv-progress__bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width var(--dur-3) var(--ease-std)} @media (max-width:720px){.scv-steps-line{display:none}.scv-steps-mobile{display:block}} /* --------------------------------------------------------------------- 11) TABS, TABLES, ALERTES, TOASTS, TOOLTIP, MODALE, SKELETONS --------------------------------------------------------------------- */ /* Tabs */ .scv-tabs{display:flex;gap:8px;border-bottom:1px solid var(--divider);margin-bottom:12px} .scv-tab{padding:8px 12px;border-radius:10px;color:var(--ink-2);cursor:pointer} .scv-tab.is-active{color:#fff;background:linear-gradient(90deg,var(--brand),var(--brand2))} /* Table */ .scv-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surf);border:1px solid var(--ring);border-radius:12px;overflow:hidden} .scv-table thead th{background:var(--surf2);color:var(--ink-2);text-align:left;font-weight:800;border-bottom:1px solid var(--ring);padding:12px} .scv-table td{padding:12px;border-bottom:1px solid var(--ring)} .scv-table tr:last-child td{border-bottom:0} /* Alertes */ .scv-alert{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px;border:1px solid var(--ring);border-radius:12px;background:var(--surf2)} .scv-alert--ok{border-color:color-mix(in srgb,var(--ok) 30%, #fff);background:color-mix(in srgb,var(--ok) 8%, var(--surf))} .scv-alert--warn{border-color:color-mix(in srgb,var(--warn) 30%, #fff);background:color-mix(in srgb,var(--warn) 8%, var(--surf))} .scv-alert--err{border-color:color-mix(in srgb,var(--err) 30%, #fff);background:color-mix(in srgb,var(--err) 8%, var(--surf))} /* Toast (positionné via JS) */ .scv-toast{min-width:280px;max-width:420px;padding:12px 14px;border-radius:14px;background:var(--surf);border:1px solid var(--ring);box-shadow:var(--shadow-3)} /* Tooltip CSS-only (trigger :hover) */ [data-scv-tip]{position:relative} [data-scv-tip]::after{content:attr(data-scv-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#111827;color:#fff;padding:6px 8px;border-radius:8px;font-size:12px;line-height:1;opacity:0;pointer-events:none;transition:opacity var(--dur-2) ease} [data-scv-tip]:hover::after{opacity:1} /* Modale (structure) */ .scv-modal{position:fixed;inset:0;display:none;place-items:center;padding:20px} .scv-modal.is-open{display:grid} .scv-modal__backdrop{position:absolute;inset:0;background:var(--backdrop);backdrop-filter:blur(6px)} .scv-modal__dialog{position:relative;z-index:1;background:var(--surf);border:1px solid var(--ring);border-radius:16px;box-shadow:var(--shadow-4);max-width:min(680px,92vw);width:100%;padding:18px} /* Skeletons */ .scv-skel{display:block;background:linear-gradient(90deg, var(--surf2), var(--surf3), var(--surf2));background-size:200% 100%;animation:scvShine 1.2s linear infinite;border-radius:8px} @keyframes scvShine{0%{background-position:200% 0}100%{background-position:-200% 0}} /* --------------------------------------------------------------------- 12) BREADCRUMBS, PROGRESS, BADGES ÉTATS --------------------------------------------------------------------- */ .scv-breadcrumb{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--ink-2)} .scv-breadcrumb a{color:var(--accent)} .scv-breadcrumb__sep{color:var(--ink-3)} .scv-progressbar{height:10px;border-radius:999px;background:var(--ring-2);overflow:hidden} .scv-progressbar__val{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width var(--dur-3) var(--ease-std)} .scv-badge--ok{background:color-mix(in srgb,var(--ok) 12%, var(--surf));border-color:color-mix(in srgb,var(--ok) 40%, #fff);color:color-mix(in srgb,var(--ok) 80%, #0b1)} .scv-badge--warn{background:color-mix(in srgb,var(--warn) 12%, var(--surf));border-color:color-mix(in srgb,var(--warn) 40%, #fff);color:color-mix(in srgb,var(--warn) 80%, #a60)} .scv-badge--err{background:color-mix(in srgb,var(--err) 12%, var(--surf));border-color:color-mix(in srgb,var(--err) 40%, #fff);color:color-mix(in srgb,var(--err) 80%, #a11)} /* --------------------------------------------------------------------- 13) SECTIONS / HERO (clair élégant) --------------------------------------------------------------------- */ #scv-hero{background:linear-gradient(180deg,#F6F8FC 0%, #FFFFFF 100%);padding-block:56px} #scv-hero .scv-hero__title, .scv-section h2, .scv-head h2, .scv-form-title{color:var(--ink);text-shadow:none} #scv-hero .scv-hero__sub, .scv-head__sub, .scv-form-sub{color:var(--ink-2)} #scv-hero .scv-trust, #scv-hero .scv-trust li, #scv-hero .scv-langs{color:var(--ink-3)} #scv-hero .scv-trust li::before{color:var(--ok)} /* --------------------------------------------------------------------- 14) UTILITAIRES — grille, spacing, display, texte, couleurs --------------------------------------------------------------------- */ /* Grille 12 basique (inline usage) */ .scv-grid{display:grid;gap:14px} .scv-col-12{grid-column:span 12} .scv-col-6{grid-column:span 6} .scv-col-4{grid-column:span 4} .scv-col-3{grid-column:span 3} @media (max-width:900px){.scv-col-6,.scv-col-4,.scv-col-3{grid-column:1/-1}} /* Spacing utils (subset) */ .mt-0{margin-top:0} .mt-4{margin-top:4px} .mt-8{margin-top:8px} .mt-12{margin-top:12px} .mt-16{margin-top:16px} .mt-24{margin-top:24px} .mb-0{margin-bottom:0} .mb-8{margin-bottom:8px} .mb-12{margin-bottom:12px} .mb-16{margin-bottom:16px} .mb-24{margin-bottom:24px} .p-8{padding:8px} .p-12{padding:12px} .p-16{padding:16px} .p-20{padding:20px} .p-24{padding:24px} .py-12{padding-block:12px} .px-12{padding-inline:12px} /* Display */ .d-block{display:block} .d-flex{display:flex} .d-grid{display:grid} .d-none{display:none} .flex-center{display:flex;align-items:center;justify-content:center} /* Texte */ .text-muted{color:var(--ink-3)} .text-strong{font-weight:900} .text-nowrap{white-space:nowrap} .text-sm{font-size:var(--fs-sm)} .text-xs{font-size:var(--fs-xs)} .text-lg{font-size:var(--fs-lg)} /* Couleurs */ .bg-surf{background:var(--surf)} .bg-surf2{background:var(--surf2)} .bg-brand{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff} .border{border:1px solid var(--ring)} .border-dash{border:1px dashed var(--ring)} /* --------------------------------------------------------------------- 15) RTL (base) & Print --------------------------------------------------------------------- */ [dir="rtl"] .scv-viewport::before{right:0;left:auto} [dir="rtl"] .scv-viewport::after{left:0;right:auto} [dir="rtl"] .scv-nav--prev{right:8px;left:auto} [dir="rtl"] .scv-nav--next{left:8px;right:auto} @media print{ :root{--bg:#fff;--ink:#000;--ring:#ddd} html,body{background:#fff;color:#000} .scv-wa-float,.scv-nav,.scv-toast,.scv-modal{display:none !important} .scv-card,.scv-form-card,.scv-acc,.scv-itemcard{box-shadow:none;border-color:#ddd} } /* --------------------------------------------------------------------- 16) A11y & motion --------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .scv-track,.scv-slide,.scv-btn,.scv-nav,.scv-pack,.scv-progress__bar,.scv-progressbar__val{transition:none !important;animation:none !important} } /* --------------------------------------------------------------------- 17) Animations & micro-interactions --------------------------------------------------------------------- */ @keyframes scvPop{0%{transform:scale(.96);opacity:.85}100%{transform:scale(1);opacity:1}} .scv-pop{animation:scvPop .22s ease both} @keyframes scvFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .scv-fadein{animation:scvFadeIn .25s var(--ease-std) both} /* --------------------------------------------------------------------- 18) WhatsApp flottant (inchangé visuel) --------------------------------------------------------------------- */ .scv-wa-float{position:fixed;right:18px;bottom:18px;z-index:50;padding:12px 16px;border-radius:999px;font-weight:900;color:#fff;background:linear-gradient(90deg,var(--wa),var(--wa2));border:1px solid var(--ring);box-shadow:0 10px 26px rgba(18,140,126,.18)} /* ===================================================================== FIN — LIGHT par défaut (Blue Pro), logique conservée, version XL ===================================================================== */ /* ============================================================================= SCV – Feuille de style complète (mobile-first, accessible, performante) Chemin conseillé : /assets/css/cv.css Dépend entièrement des classes/IDs présents dans ton template PHP. ----------------------------------------------------------------------------- Sommaire rapide : 0) Variables & palettes (light/dark), breakpoints, helpers 1) Structure page & sections 2) Stepper (progression) 3) Boutons / toggles / états 4) Cartes Offres (pricing) 5) Modèles : grille + carrousel 6) Choix méthode & parcours (hero) 7) Formulaires, champs, validation, fichiers, photo 8) Accordéons (details/summary) 9) Éditeurs (expériences, formations, langues) + chips/badges 10) Résumé (aside) 11) Utilitaires (grid 12 colonnes, hide, etc.) 12) Préférences (réduction motion), Print ============================================================================= */ /* ============================================================================= 0) VARIABLES, PALETTES & BREAKPOINTS ============================================================================= */ :root { /* Couleurs principales */ --scv-primary-700: #4338CA; --scv-primary-600: #4F46E5; /* couleur d’action */ --scv-primary-500: #6366F1; --scv-primary-200: #E0E7FF; --scv-primary-100: #EEF2FF; /* Grays & surfaces */ --scv-bg: #FFFFFF; --scv-surface: #FFFFFF; --scv-soft: #F7F9FF; --scv-border: #D8E1F2; --scv-text: #1F2A44; --scv-text-soft: #586487; --scv-muted: #6B7280; /* États */ --scv-success: #10B981; --scv-warning: #F59E0B; --scv-danger: #EF4444; --scv-focus: #4338CA; /* Typo & tailles */ --scv-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; --scv-fz-xs: 12px; --scv-fz-sm: 14px; --scv-fz-md: 16px; --scv-fz-lg: 18px; --scv-fz-xl: 22px; /* Espaces & rayons */ --scv-space-1: 4px; --scv-space-2: 8px; --scv-space-3: 12px; --scv-space-4: 16px; --scv-space-5: 20px; --scv-space-6: 24px; --scv-space-7: 28px; --scv-space-8: 32px; --scv-rad-sm: 10px; --scv-rad-md: 16px; --scv-rad-lg: 20px; /* Ombres */ --scv-shadow-1: 0 2px 10px rgba(17,24,39,.06), 0 1px 3px rgba(17,24,39,.06); --scv-shadow-2: 0 8px 22px rgba(17,24,39,.12); /* Conteneur */ --scv-container: 1120px; /* Transitions */ --scv-fast: .15s; --scv-normal: .25s; --scv-ease: cubic-bezier(.22,.61,.36,1); } /* Breakpoints (mobile-first) */ @media (min-width: 480px) { :root { --scv-container: 640px; } } @media (min-width: 768px) { :root { --scv-container: 920px; } } @media (min-width: 1024px) { :root { --scv-container: 1120px; } } /* Dark mode auto si l’OS le demande (facultatif) */ @media (prefers-color-scheme: dark) { :root { --scv-bg:#0B1020; --scv-surface:#111931; --scv-soft:#0E1530; --scv-border:#273455; --scv-text:#E6ECFF; --scv-text-soft:#B5C1DC; --scv-primary-600:#818CF8; --scv-primary-100:#1D244A; --scv-primary-200:#28306A; } } /* Helpers génériques */ .scv-hide { display:none !important; } .scv-center { text-align:center; } .scv-muted { color:var(--scv-muted); } .scv-inline { display:flex; align-items:center; gap:var(--scv-space-2); } .scv-grow { flex:1 1 auto; } .scv-contrast { color:var(--scv-text); } /* Accessibilité – element uniquement vocal */ .scv-sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ============================================================================= 1) STRUCTURE PAGE & SECTIONS ============================================================================= */ .scv-demarrer { background: var(--scv-bg); color: var(--scv-text); font-family: var(--scv-font); line-height: 1.45; } .scv-container { max-width: var(--scv-container); margin-inline: auto; padding: 0 var(--scv-space-4); } .scv-section { padding: 28px 0; } .scv-title { font-size: var(--scv-fz-xl); font-weight: 700; margin: 0 0 8px; } .scv-card { background: var(--scv-surface); border: 1px solid var(--scv-border); border-radius: var(--scv-rad-md); box-shadow: var(--scv-shadow-1); padding: var(--scv-space-4); } /* ============================================================================= 2) STEPPER (progression) ============================================================================= */ .scv-stepper { padding-top: 18px; padding-bottom: 8px; } .scv-steps-line { list-style:none; display:flex; gap:12px; padding:0; margin:0; overflow:auto; scrollbar-width:none; } .scv-steps-line::-webkit-scrollbar{ display:none; } .scv-steps-line li { position:relative; padding:10px 12px; border:1px dashed var(--scv-border); border-radius:999px; color:var(--scv-text-soft); font-size:var(--scv-fz-sm); white-space:nowrap; } .scv-steps-line li.is-current { border-style: solid; color: var(--scv-primary-600); background: var(--scv-primary-100); } .scv-steps-line li.is-done { color: var(--scv-text); background:#F0F6FF; border-color:#C9D6F5; } .scv-steps-mobile { margin-top:10px; } .scv-steps-mobile__label { font-size: var(--scv-fz-sm); color: var(--scv-text-soft); } .scv-progress { height:6px; background:#E9EEFF; border-radius:999px; overflow:hidden; } .scv-progress__bar { display:block; height:100%; width:0%; background: linear-gradient(90deg,var(--scv-primary-600),var(--scv-primary-500)); transition:width var(--scv-normal) var(--scv-ease); } /* ============================================================================= 3) BOUTONS / TOGGLES / ÉTATS ============================================================================= */ .scv-btn { appearance:none; border:1px solid transparent; background:var(--scv-primary-600); color:#fff; padding:10px 14px; border-radius: var(--scv-rad-md); cursor:pointer; font-weight:600; transition: transform var(--scv-fast) var(--scv-ease), box-shadow var(--scv-fast) var(--scv-ease), background var(--scv-fast); box-shadow: var(--scv-shadow-1); } .scv-btn:hover { transform: translateY(-1px); box-shadow: var(--scv-shadow-2); } .scv-btn:active { transform: translateY(0); } .scv-btn:disabled { opacity:.55; cursor:not-allowed; } .scv-btn:focus-visible { outline:2px solid var(--scv-focus); outline-offset:3px; } .scv-btn--light { background:var(--scv-primary-100); color:var(--scv-primary-600); border-color:var(--scv-primary-200); } .scv-btn--outline { background:transparent; color:var(--scv-primary-600); border-color:var(--scv-primary-600); } .scv-toggle { background:#F6F8FF; color:#2A3861; border:1px solid var(--scv-border); } .scv-toggle.is-active { background: var(--scv-primary-100); color: var(--scv-primary-600); border-color: var(--scv-primary-600); } /* Boutons « lien simple » dans cartes items */ .scv-chipcard__btn { appearance:none; border:0; background:transparent; color:var(--scv-primary-600); font-size:var(--scv-fz-sm); padding:4px 6px; cursor:pointer; } .scv-chipcard__btn--del { color:var(--scv-danger); } /* ============================================================================= 4) OFFRES (pricing cards) ============================================================================= */ #scv-offers.scv-packages__grid { display:grid; gap:16px; grid-template-columns:1fr; } @media (min-width:768px){ #scv-offers.scv-packages__grid { grid-template-columns: repeat(2,1fr);} } @media (min-width:1024px){ #scv-offers.scv-packages__grid { grid-template-columns: repeat(3,1fr);} } .scv-pack { position:relative; padding:18px; border-radius: var(--scv-rad-lg); box-shadow: var(--scv-shadow-1); border:1px solid var(--scv-border); transition: box-shadow var(--scv-fast), transform var(--scv-fast); } .scv-pack:hover { transform: translateY(-2px); box-shadow: var(--scv-shadow-2); } .scv-pack--hot { border-color: var(--scv-primary-600); } .scv-pack__badge { position:absolute; top:10px; right:10px; z-index:1; background:var(--scv-primary-600); color:#fff; padding:4px 10px; border-radius:999px; font-size:var(--scv-fz-xs); } .scv-pack__price { font-weight:800; font-size: clamp(20px, 4.5vw, 28px); margin:6px 0 8px; } .scv-pack__points { margin:0 0 14px; padding-left:18px; color:var(--scv-text-soft); } .scv-pack.is-selected { box-shadow: 0 0 0 3px var(--scv-primary-200), var(--scv-shadow-2); } /* ============================================================================= 5) MODÈLES : grille + carrousel (Les flèches sont MASQUÉES pour répondre à ta demande) ============================================================================= */ /* Wrapper carrousel */ .scv-carousel { position:relative; } .scv-viewport { overflow:hidden; width:100%; } .scv-track { display:flex; gap: var(--scv-space-4); will-change: transform; /* smooth */ } .scv-carousel.dragging .scv-track { cursor: grabbing; } /* Slide et carte modèle */ .scv-slide { flex: 0 0 auto; width: clamp(240px, 78vw, 320px); } @media (min-width:768px){ .scv-slide { width: 300px; } } .scv-model { display:flex; flex-direction:column; gap:10px; background:var(--scv-surface); border:1px solid var(--scv-border); border-radius: var(--scv-rad-md); padding:12px; box-shadow: var(--scv-shadow-1); transition: transform var(--scv-fast) var(--scv-ease), box-shadow var(--scv-fast) var(--scv-ease); } .scv-model:hover { transform: translateY(-2px); box-shadow: var(--scv-shadow-2); } .scv-slide.is-selected .scv-model { box-shadow: 0 0 0 3px var(--scv-primary-200), var(--scv-shadow-2); } /* Cadre A4 – ratio stable */ .scv-model__frame { background: #F3F6FD; border: 1px solid var(--scv-border); border-radius: 12px; overflow: hidden; aspect-ratio: 595 / 842; /* A4 */ display:flex; align-items:center; justify-content:center; } .scv-model__img { width:100%; height:100%; object-fit: cover; display:block; transform-origin:center center; transition: transform var(--scv-fast); } .scv-model:hover .scv-model__img { transform: scale(1.015); } .scv-model__meta { text-align:center; font-size:var(--scv-fz-sm); color:var(--scv-text-soft); } .scv-model__cta { display:flex; justify-content:center; } /* NAV flèches – MASQUÉES (demande) */ .scv-carousel .scv-nav { display:none !important; } /* Grille fallback si JS désactivé (ou si tu souhaites liste fixe) */ .no-js #scv-models-carousel .scv-track, .js-disabled #scv-models-carousel .scv-track { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:16px; } /* État drag */ .scv-carousel.dragging .scv-model { pointer-events:none; } /* ============================================================================= 6) CHOIX MÉTHODE & PARCOURS (HERO) ============================================================================= */ .scv-choice-hero { padding: 8px 0 12px; } .scv-choice-card { border-radius: var(--scv-rad-lg); border: 1px solid var(--scv-border); background: linear-gradient(180deg, #F9FBFF 0%, #FFFFFF 100%); box-shadow: var(--scv-shadow-1); padding: clamp(14px, 4vw, 20px); } .scv-choice-title { font-size: clamp(18px, 4.4vw, 22px); font-weight: 800; color: var(--scv-text); } .scv-choice-sub { color: var(--scv-text-soft); margin-top: 4px; margin-bottom: 12px; font-size: var(--scv-fz-sm); } .scv-toggle-group { display:flex; gap:10px; flex-wrap:wrap; } /* ============================================================================= 7) FORMULAIRES (inputs, validation, fichiers, photo, radios, switches) ============================================================================= */ .scv-form { display:block; } .scv-form-title { margin:0 0 4px; } .scv-form-sub { margin:0 0 12px; color:var(--scv-text-soft); font-size:var(--scv-fz-sm); } .scv-control { display:block; margin-bottom: 12px; } .scv-control label { display:block; font-weight:600; margin-bottom:6px; } .scv-help { font-size: var(--scv-fz-xs); color:var(--scv-muted); } .scv-form input[type="text"], .scv-form input[type="email"], .scv-form input[type="tel"], .scv-form input[type="url"], .scv-form input[type="month"], .scv-form textarea, .scv-form select { width:100%; border:1px solid var(--scv-border); border-radius: 12px; padding: 10px 12px; font: inherit; background:#fff; color:var(--scv-text); transition: border-color var(--scv-fast), box-shadow var(--scv-fast); box-shadow: inset 0 0 0 1px transparent; } .scv-form textarea { min-height: 110px; resize: vertical; } .scv-form input:focus, .scv-form select:focus, .scv-form textarea:focus { outline: none; border-color: var(--scv-primary-600); box-shadow: 0 0 0 3px var(--scv-primary-100); } .scv-form input:invalid, .scv-form select:invalid, .scv-form textarea:invalid { border-color: var(--scv-danger); } /* Fieldset radios */ .scv-fieldset { border:1px solid var(--scv-border); border-radius: 12px; padding:12px; margin: 12px 0; } .scv-fieldset legend { padding:0 6px; font-weight:700; color:var(--scv-text); } .scv-radio { display:flex; align-items:center; gap:8px; margin:6px 0; } .scv-radio input[type="radio"] { transform: translateY(1px); } /* Switch « En cours » */ .scv-switch { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; } .scv-switch input[type="checkbox"] { width:16px; height:16px; } /* Date range */ .scv-daterange .scv-grid { gap: 10px; } .scv-daterange .js-end[disabled] { background:#F7F7FB; color:#9AA6C0; } /* Uploads – fichiers génériques */ .scv-file { display:flex; align-items:center; gap:10px; border:1px dashed var(--scv-border); border-radius: 12px; padding:10px; background:#FBFDFF; } .scv-file input[type="file"] { display:none; } .scv-file__btn, .scv-file-btn { display:inline-block; padding:8px 12px; border-radius: 12px; background: var(--scv-primary-100); color: var(--scv-primary-600); border:1px solid var(--scv-primary-200); cursor:pointer; font-weight:600; } .scv-file__name { color:var(--scv-text-soft); font-size:var(--scv-fz-sm); } /* Upload photo – aperçu rond ou carte */ .scv-photo-block { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .scv-photo-preview { width: 108px; height:108px; border-radius: 14px; background:#EEF2FF; border: 1px solid var(--scv-border); background-size: cover; background-position:center; } .scv-photo-preview.has-img { box-shadow: var(--scv-shadow-1); } /* Actions formulaire */ .scv-form__actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top: 10px; } .scv-btn.scv-btn--primary { background: var(--scv-primary-600); } /* ============================================================================= 8) ACCORDÉONS (details/summary) ============================================================================= */ .scv-acc { border:1px solid var(--scv-border); border-radius: 12px; margin: 12px 0; background:#fff; overflow:hidden; } .scv-acc > summary { list-style:none; cursor:pointer; padding: 12px 14px; position:relative; user-select:none; font-weight:700; color:var(--scv-text); } .scv-acc > summary::-webkit-details-marker { display:none; } .scv-acc[open] > summary { background: var(--scv-primary-100); } .scv-acc__head span { display:inline-flex; align-items:center; gap:8px; } .scv-acc__body { padding: 12px 14px; border-top:1px solid var(--scv-border); background:#fff; } /* ============================================================================= 9) ÉDITEURS : expériences / formations / langues ============================================================================= */ .scv-stack { display:grid; gap:10px; } /* Carte item (exp/edu/lang) */ .scv-itemcard { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; border:1px solid var(--scv-border); border-radius: 12px; background: var(--scv-surface); padding:10px 12px; } .scv-itemcard__body { min-width:0; } .scv-itemcard__title { font-weight:700; color:var(--scv-text); } .scv-itemcard__meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; } .scv-itemcard__actions { display:flex; gap:8px; flex-shrink:0; } /* Badges / chips */ .scv-badge { display:inline-block; background:var(--scv-soft); color:var(--scv-text-soft); border:1px solid var(--scv-border); border-radius:999px; padding:2px 8px; font-size:var(--scv-fz-xs); } .scv-badge--soft { background:#EFF3FF; color:#344272; } /* Barre de chips de suggestions */ .scv-chipbar { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; } .scv-chip { border:1px solid var(--scv-border); background:#fff; color:var(--scv-text); padding:6px 10px; border-radius:999px; font-size:var(--scv-fz-sm); cursor:pointer; } .scv-chip--ghost { background:#F9FBFF; color:#2A3861; } /* Lang editor (ligne d’ajout) */ .scv-lang-editor { display:grid; gap:10px; } .scv-lang-row { display:grid; gap:10px; grid-template-columns: 1fr 180px auto; align-items:end; } @media (max-width:480px){ .scv-lang-row { grid-template-columns: 1fr; } } /* ============================================================================= 10) RÉSUMÉ (ASIDE) ============================================================================= */ .scv-summary { display:grid; grid-template-columns:1fr; gap:6px; border-left: 4px solid var(--scv-primary-600); background: linear-gradient(180deg,#F7FAFF 0,#FFFFFF 100%); } /* Bouton "Changer" dans le résumé */ .scv-summary .scv-btn--light { padding:6px 10px; font-size: var(--scv-fz-sm); } /* ============================================================================= 11) GRILLE 12 colonnes + utilitaires responsive (pour formulaires) ============================================================================= */ .scv-grid { display:grid; gap: 12px; grid-template-columns: repeat(12, 1fr); } .scv-col-12 { grid-column: span 12; } .scv-col-6 { grid-column: span 12; } .scv-col-3 { grid-column: span 12; } @media (min-width: 768px){ .scv-col-6 { grid-column: span 6; } .scv-col-3 { grid-column: span 3; } } /* ============================================================================= 12) PREFERENCES (réduction motion) & PRINT ============================================================================= */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Impression : on limite les décors et favorise la lisibilité */ @media print { .scv-stepper, .scv-steps-mobile, .scv-choice-hero, .scv-carousel .scv-nav { display:none !important; } .scv-card, .scv-pack, .scv-model { box-shadow:none !important; } .scv-container { max-width: 100%; padding:0; } .scv-section { padding: 8px 0; } } /* ============================================================================= FIN – NOTES D’INTÉGRATION - Les flèches du carrousel sont masquées via `.scv-carousel .scv-nav {display:none}`. Supprime cette règle si tu veux les ré-afficher. - Les états dynamiques côté JS : `.is-selected`, `.is-active`, `.is-done`, `.dragging` sont tous stylés ci-dessus pour un retour visuel clair. - Les champs en erreur (HTML5 `:invalid`) deviennent bord rouge ; le focus affiche un ring accessible (contraste OK). - Les éditeurs (exp/edu/lang) empilent proprement (`.scv-stack`) et leur contenu reste flexible même quand beaucoup d’items sont ajoutés. ============================================================================= */ /* ============================================================================= SCV – Feuille de style complète (mobile-first, accessible, performante) Chemin : /assets/css/cv.css Compatibilité : HTML/PHP fournis (classes .scv-*) ----------------------------------------------------------------------------- Sommaire : 0) Variables & palettes (light), helpers & breakpoints 1) Structure page & sections 2) Stepper (progression) 3) Boutons / toggles / états 4) Offres (pricing) 5) Modèles – grille + carrousel horizontal mobile 6) Choix méthode & parcours (hero) 7) Formulaires (anti-condensation mobile), fichiers, photo 8) Accordéons (details/summary) 9) Éditeurs (expériences/formations/langues) + chips/badges + timeline 10) Résumé (aside) 11) Grille 12 colonnes & utilitaires 12) Préférences (reduce motion) & Print ============================================================================= */ /* ============================================================================= 0) VARIABLES & HELPERS ============================================================================= */ :root{ /* Couleurs – bleu pro & surfaces claires */ --scv-primary-800:#1536a3; --scv-primary-700:#1e3fbf; --scv-primary-600:#2457ff; /* action */ --scv-primary-500:#3e73ff; --scv-primary-300:#a9c2ff; --scv-primary-200:#d9e6ff; --scv-primary-100:#eef2ff; --scv-bg:#f7f9fc; --scv-surface:#ffffff; --scv-soft:#f3f7ff; --scv-soft-2:#fbfdff; --scv-text:#17233a; --scv-text-soft:#2a3a5a; --scv-muted:#6b7280; --scv-border:#d7e0f0; --scv-divider:#e8eef7; --scv-success:#10b981; --scv-warning:#f59e0b; --scv-danger:#ef4444; /* Typo & box */ --scv-font: ui-sans-serif,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans",sans-serif; --scv-code: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --scv-fz-xs:12px; --scv-fz-sm:14px; --scv-fz-md:16px; --scv-fz-lg:18px; --scv-fz-xl:22px; --scv-space-1:4px; --scv-space-2:8px; --scv-space-3:12px; --scv-space-4:16px; --scv-space-5:20px; --scv-space-6:24px; --scv-space-7:28px; --scv-space-8:32px; --scv-rad-sm:10px; --scv-rad-md:14px; --scv-rad-lg:18px; --scv-shadow-1:0 2px 10px rgba(17,24,39,.06),0 1px 3px rgba(17,24,39,.06); --scv-shadow-2:0 8px 28px rgba(17,24,39,.12),0 2px 8px rgba(17,24,39,.06); --scv-container:1120px; --scv-fast:.15s; --scv-normal:.25s; --scv-ease:cubic-bezier(.22,.61,.36,1); /* Hauteurs d’input – + haut en mobile (anti-condensation) */ --scv-input-h:48px; } @media (min-width:768px){ :root{ --scv-input-h:46px; } } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--scv-bg); color:var(--scv-text); font:16px/1.55 var(--scv-font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a{color:var(--scv-primary-600);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:none;box-shadow:0 0 0 3px rgba(36,87,255,.22);border-radius:10px} .scv-hide{display:none!important} .scv-center{text-align:center} .scv-muted{color:var(--scv-muted)} .scv-inline{display:flex;align-items:center;gap:var(--scv-space-2)} .scv-grow{flex:1 1 auto} .scv-contrast{color:var(--scv-text)} .scv-sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)} /* Breakpoints conteneur */ @media (min-width:480px){ :root{--scv-container:640px} } @media (min-width:768px){ :root{--scv-container:920px} } @media (min-width:1024px){ :root{--scv-container:1120px} } /* ============================================================================= 1) STRUCTURE ============================================================================= */ .scv-demarrer{background:var(--scv-bg);color:var(--scv-text)} .scv-container{max-width:var(--scv-container);margin-inline:auto;padding:0 var(--scv-space-4)} .scv-section{padding:28px 0} .scv-title{font-size:var(--scv-fz-xl);font-weight:800;margin:0 0 8px;color:var(--scv-text)} .scv-card{ background:var(--scv-surface);border:1px solid var(--scv-border); border-radius:var(--scv-rad-md);box-shadow:var(--scv-shadow-1);padding:var(--scv-space-4) } /* ============================================================================= 2) STEPPER ============================================================================= */ .scv-stepper{position:sticky;top:0;z-index:20;background:linear-gradient(#f7f9fc,rgba(247,249,252,.92));backdrop-filter:blur(4px);border-bottom:1px solid var(--scv-divider)} .scv-steps-line{list-style:none;display:grid;gap:10px;grid-template-columns:repeat(5,1fr);padding:12px 0;margin:0} .scv-steps-line li{position:relative;text-align:center;font-weight:700;color:var(--scv-muted);padding:6px 0} .scv-steps-line li::before{ content:attr(data-step);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px; border:2px solid var(--scv-border);background:var(--scv-surface);color:#334e7b;margin-right:8px;font-size:13px;vertical-align:middle } .scv-steps-line li.is-current{color:var(--scv-primary-700)} .scv-steps-line li.is-current::before{border-color:var(--scv-primary-600);color:var(--scv-primary-600);box-shadow:0 0 0 4px rgba(36,87,255,.10)} .scv-steps-line li.is-done{color:#334e7b} .scv-steps-line li.is-done::before{content:"✓";border-color:var(--scv-success);color:var(--scv-success)} .scv-steps-mobile{display:none} .scv-progress{height:4px;background:#e8eefb;border-radius:999px;overflow:hidden} .scv-progress__bar{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--scv-primary-600),#7aa5ff);transition:width .35s ease} @media (max-width:520px){.scv-steps-line{display:none}.scv-steps-mobile{display:block;padding:10px 0 12px}} /* ============================================================================= 3) BOUTONS / TOGGLES ============================================================================= */ .scv-btn{ --_bg:var(--scv-primary-600);--_fg:#fff;--_bd:var(--scv-primary-600); display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 14px;border-radius:12px; border:1px solid var(--_bd);background:var(--_bg);color:var(--_fg);font-weight:800;cursor:pointer;box-shadow:var(--scv-shadow-1); transition:transform var(--scv-fast) var(--scv-ease),box-shadow var(--scv-fast) var(--scv-ease),background var(--scv-fast) } .scv-btn:hover{transform:translateY(-1px);box-shadow:var(--scv-shadow-2)} .scv-btn:active{transform:translateY(0)} .scv-btn:disabled{opacity:.55;cursor:not-allowed} .scv-btn--light{--_bg:var(--scv-primary-100);--_fg:var(--scv-primary-700);--_bd:var(--scv-primary-200)} .scv-btn--outline{--_bg:#fff;--_fg:var(--scv-primary-700);--_bd:var(--scv-primary-700);background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,var(--scv-primary-600),#7aa5ff) border-box;border-color:transparent} .scv-btn.is-active{box-shadow:0 0 0 3px rgba(36,87,255,.18) inset,var(--scv-shadow-2)} .scv-toggle{background:#f6f8ff;color:#2a3861;border:1px solid var(--scv-border)} .scv-toggle.is-active{background:var(--scv-primary-100);color:var(--scv-primary-700);border-color:var(--scv-primary-600)} /* Liens-boutons dans les cartes items */ .scv-chipcard__btn{appearance:none;border:0;background:transparent;color:var(--scv-primary-700);font-size:var(--scv-fz-sm);padding:4px 6px;cursor:pointer} .scv-chipcard__btn--del{color:var(--scv-danger)} /* ============================================================================= 4) OFFRES (pricing) ============================================================================= */ #scv-offers.scv-packages__grid{display:grid;gap:16px;grid-template-columns:1fr} @media (min-width:768px){#scv-offers.scv-packages__grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1024px){#scv-offers.scv-packages__grid{grid-template-columns:repeat(3,1fr)}} .scv-pack{position:relative;padding:18px;border-radius:var(--scv-rad-lg);border:1px solid var(--scv-border);box-shadow:var(--scv-shadow-1);transition:transform var(--scv-fast),box-shadow var(--scv-fast)} .scv-pack:hover{transform:translateY(-2px);box-shadow:var(--scv-shadow-2)} .scv-pack--hot{border-color:#ffd9a8} .scv-pack__badge{position:absolute;top:10px;right:10px;background:linear-gradient(90deg,#ffd9a8,#ffe7c6);color:#7b3f00;padding:4px 10px;border-radius:999px;font-size:var(--scv-fz-xs);border:1px solid #ffdfb6} .scv-pack__price{font-weight:800;font-size:clamp(20px,4.5vw,28px);margin:6px 0 8px;color:var(--scv-primary-700)} .scv-pack__points{margin:0 0 14px;padding-left:18px;color:var(--scv-text-soft)} #scv-offers [data-offer].is-selected{outline:2px solid var(--scv-primary-600);box-shadow:0 0 0 4px rgba(36,87,255,.14),var(--scv-shadow-2)} /* ============================================================================= 5) MODÈLES – Grille + Carrousel horizontal mobile (AUCUN changement HTML requis : #scv-models-grid garde .scv-grid-models) ============================================================================= */ .scv-grid-models{ display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;align-items:start } /* Mobile/tablette : transforme la grille en carrousel horizontal (scroll-snap) */ @media (max-width: 980px){ .scv-grid-models{ grid-auto-flow:column; grid-auto-columns:minmax(72%, 1fr); overflow-x:auto;overflow-y:hidden;padding-bottom:6px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none } .scv-grid-models::-webkit-scrollbar{display:none} } .scv-modelcard{ appearance:none;border:1px solid var(--scv-border);background:#fff;color:inherit;text-align:left;padding:12px;border-radius:16px;cursor:pointer; box-shadow:var(--scv-shadow-1);transition:transform .15s ease,box-shadow .15s ease,outline-color .15s ease;display:flex;flex-direction:column;gap:10px } @media (max-width:980px){ .scv-modelcard{scroll-snap-align:start} } .scv-modelcard:hover{transform:translateY(-2px);box-shadow:var(--scv-shadow-2)} .scv-modelcard.is-selected{outline:2px solid var(--scv-primary-600);box-shadow:0 0 0 4px rgba(36,87,255,.14),var(--scv-shadow-2)} .scv-modelcard__frame{ aspect-ratio:210/297;background:linear-gradient(180deg,#f7f9ff 0%,#f4f6fb 100%);border:1px solid #d8e1f2;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center } .scv-modelcard__img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;transition:transform var(--scv-fast)} .scv-modelcard:hover .scv-modelcard__img{transform:scale(1.01)} .scv-modelcard__meta{display:flex;align-items:center;justify-content:space-between;gap:10px} .scv-modelcard__slug{font-weight:800;font-size:.95rem;color:#1f2a44;letter-spacing:.02em} .scv-modelcard__pick{font-size:.85rem;padding:6px 10px;border-radius:10px;background:#eef2ff;color:#4338ca;white-space:nowrap;border:1px solid #dfe6ff} /* (Optionnel) points de pagination si tu veux en JS : */ .scv-dots{display:flex;gap:6px;justify-content:center;padding:8px} .scv-dot{width:8px;height:8px;border-radius:999px;background:#dbe6ff;transition:transform .15s ease,background .15s ease} .scv-dot.is-active{background:var(--scv-primary-600);transform:scale(1.15)} /* ============================================================================= 6) CHOIX MÉTHODE & PARCOURS (HERO) ============================================================================= */ .scv-choice-hero{padding:8px 0 12px} .scv-choice-card{ border-radius:var(--scv-rad-lg);border:1px solid var(--scv-border); background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);box-shadow:var(--scv-shadow-1); padding:clamp(14px,4vw,20px) } .scv-choice-title{font-size:clamp(18px,4.4vw,22px);font-weight:800;color:var(--scv-text)} .scv-choice-sub{color:var(--scv-text-soft);margin-top:4px;margin-bottom:12px;font-size:var(--scv-fz-sm)} .scv-toggle-group{display:flex;gap:10px;flex-wrap:wrap} #btn-method-site.is-active,#btn-method-wa.is-active,#btn-flow-avec.is-active,#btn-flow-sans.is-active{box-shadow:var(--scv-shadow-2),0 0 0 3px rgba(36,87,255,.18) inset} /* ============================================================================= 7) FORMULAIRES — anti “condensation” mobile ============================================================================= */ .scv-form{display:block} .scv-form-title{margin:0 0 4px} .scv-form-sub{margin:0 0 12px;color:var(--scv-text-soft);font-size:var(--scv-fz-sm)} .scv-form-card{ background:var(--scv-surface);border:1px solid var(--scv-border); border-radius:var(--scv-rad-lg);padding:18px;box-shadow:var(--scv-shadow-1) } @media (max-width:520px){ .scv-form-card{padding:20px} /* + air */ } .scv-control{display:block;margin-bottom:12px} .scv-control label{display:block;font-weight:700;margin-bottom:6px;color:var(--scv-text-soft)} .scv-form input[type="text"], .scv-form input[type="email"], .scv-form input[type="tel"], .scv-form input[type="url"], .scv-form input[type="month"], .scv-form textarea, .scv-form select{ width:100%;height:var(--scv-input-h);border-radius:12px;border:1px solid var(--scv-border); background:#fff;color:var(--scv-text);padding:0 12px;font:inherit; transition:border-color var(--scv-fast),box-shadow var(--scv-fast),background var(--scv-fast) } .scv-form textarea{min-height:116px;padding:10px 12px;resize:vertical} .scv-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--scv-muted) 50%),linear-gradient(135deg,var(--scv-muted) 50%,transparent 50%),linear-gradient(to right,#fff,#fff);background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px,100% 0;background-size:5px 5px,5px 5px,2.5em 2.5em;background-repeat:no-repeat} .scv-form input:focus,.scv-form textarea:focus,.scv-form select:focus{outline:none;border-color:var(--scv-primary-600);box-shadow:0 0 0 3px var(--scv-primary-100);background:#fff} .scv-form input:invalid:not(:focus):not(:placeholder-shown), .scv-form textarea:invalid:not(:focus):not(:placeholder-shown){border-color:#ffcaca;background:#fff7f7} .scv-help{font-size:var(--scv-fz-xs);color:var(--scv-muted)} .scv-fieldset{border:1px solid var(--scv-border);border-radius:12px;padding:12px;margin:12px 0} .scv-fieldset legend{padding:0 6px;font-weight:700;color:var(--scv-text)} .scv-radio{display:inline-flex;align-items:center;gap:8px;margin:6px 18px 6px 0;cursor:pointer} .scv-switch{display:inline-flex;align-items:center;gap:8px} .scv-daterange .scv-grid{gap:10px} .scv-daterange .js-end[disabled]{background:#f6f8fd;color:#92a0b8;border-style:dashed} /* Fichiers */ .scv-file{display:inline-flex;align-items:center;gap:10px;padding:10px;border:1px dashed var(--scv-border);border-radius:12px;background:#fbfdff} .scv-file input[type=file]{position:absolute;opacity:0;width:0;height:0} .scv-file__btn,.scv-file-btn{ display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 12px;border-radius:12px;background:var(--scv-primary-100);color:var(--scv-primary-700);border:1px solid var(--scv-primary-200);cursor:pointer;font-weight:700 } .scv-file__name{font-size:.95rem;color:var(--scv-text-soft)} /* Photo */ .scv-photo-block{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;padding:10px;border:1px solid var(--scv-border);border-radius:var(--scv-rad-md);background:var(--scv-soft-2)} @media (max-width:640px){.scv-photo-block{grid-template-columns:1fr}} .scv-photo-preview{width:120px;aspect-ratio:1/1;border-radius:12px;background:linear-gradient(180deg,#eff5ff,#f8fbff);border:1px solid var(--scv-border);background-size:cover;background-position:center;position:relative;overflow:hidden} .scv-photo-preview::after{content:"Prévisu";position:absolute;bottom:6px;right:8px;font-size:.72rem;color:#fff;background:rgba(0,0,0,.35);padding:2px 6px;border-radius:6px;opacity:.8} .scv-photo-preview.has-img::after{display:none} /* Actions formulaire */ .scv-form__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px} .scv-btn.scv-btn--primary{--_bg:var(--scv-primary-600);--_bd:var(--scv-primary-600);--_fg:#fff} /* ============================================================================= 8) ACCORDÉONS ============================================================================= */ .scv-acc{border:1px solid var(--scv-border);border-radius:12px;margin:12px 0;background:#fff;overflow:hidden} .scv-acc>summary{list-style:none;cursor:pointer;padding:12px 14px;position:relative;font-weight:800;color:#334e7b} .scv-acc>summary::-webkit-details-marker{display:none} .scv-acc>summary::after{content:"▾";position:absolute;right:14px;top:50%;transform:translateY(-50%) rotate(0);transition:transform .2s ease;color:var(--scv-muted)} .scv-acc[open]>summary{background:var(--scv-primary-100)} .scv-acc[open]>summary::after{transform:translateY(-50%) rotate(180deg)} .scv-acc__body{padding:12px 14px;border-top:1px solid var(--scv-border);background:#fff} /* ============================================================================= 9) ÉDITEURS + CHIPS/BADGES — EXPÉRIENCE LISIBLE + TIMELINE ============================================================================= */ .scv-stack{display:grid;gap:10px;margin-top:10px} /* Carte générique */ .scv-itemcard{display:grid;grid-template-columns:1fr auto;gap:10px;border:1px solid var(--scv-border);border-radius:12px;background:#fff;padding:10px;box-shadow:var(--scv-shadow-1)} .scv-itemcard__body{min-width:0} .scv-itemcard__title{font-weight:800;color:var(--scv-text)} .scv-itemcard__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .scv-itemcard__actions{display:flex;align-items:center;gap:8px} /* Badges */ .scv-badge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:#eef4ff;color:#1b3d86;border:1px solid #d9e6ff;font-weight:700;font-size:.82rem} .scv-badge--soft{background:#f7fafc;color:#334e7b;border-color:var(--scv-border)} /* CHIPS barre */ .scv-chipbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .scv-chip{border:1px solid #dfe6ff;background:#f3f6ff;color:#364a78;padding:6px 10px;border-radius:999px;font-size:var(--scv-fz-sm);font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s} .scv-chip:hover{transform:translateY(-1px);box-shadow:var(--scv-shadow-1)} .scv-chip--ghost{background:#fff;border-style:dashed;color:#2b4270} /* ====== Amélioration VISUELLE des expériences (timeline douce) ====== */ .scv-itemcard--exp{position:relative;padding-left:14px} .scv-itemcard--exp::before{ content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,#dfe6ff,#bcd1ff); border-radius:2px } .scv-itemcard--exp .scv-itemcard__title{font-size:1rem} .scv-itemcard--exp .scv-itemcard__meta .scv-badge{background:#eef4ff;border-color:#d9e6ff;color:#1b3d86} /* Formations cohérentes */ .scv-itemcard--edu .scv-itemcard__title{font-weight:800} .scv-itemcard--lang .scv-itemcard__title{font-size:.98rem} /* Ligne d’ajout Langues */ .scv-lang-editor{border:1px solid var(--scv-border);border-radius:12px;padding:10px;background:var(--scv-soft-2)} .scv-lang-row{display:grid;grid-template-columns:1fr 220px auto;gap:10px;align-items:end} @media (max-width:720px){ .scv-lang-row{grid-template-columns:1fr 1fr} .scv-lang-row .scv-form__actions{grid-column:1/-1} } /* ============================================================================= 10) RÉSUMÉ (ASIDE) ============================================================================= */ .scv-summary{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; padding:12px 14px;background:linear-gradient(180deg,#ffffff 0,#f7fbff 100%);border:1px solid var(--scv-border);border-radius:var(--scv-rad-md);box-shadow:var(--scv-shadow-1) } @media (max-width:720px){.scv-summary{grid-template-columns:1fr}} #scv-summary [data-sum]{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;background:#f3f7ff;color:#2a3a5a;border:1px solid #dfe6ff} #scv-summary .scv-btn{height:34px;padding:0 10px} /* ============================================================================= 11) GRILLE 12 COLONNES & UTILITAIRES ============================================================================= */ .scv-grid{display:grid;gap:12px;grid-template-columns:repeat(12,1fr)} .scv-col-12{grid-column:span 12} .scv-col-6{grid-column:span 12} .scv-col-3{grid-column:span 12} @media (min-width:768px){ .scv-col-6{grid-column:span 6} .scv-col-3{grid-column:span 3} } /* Anti “condensation” : en <520px on garde de l’air autour des champs */ @media (max-width:520px){ .scv-control{margin-bottom:14px} .scv-form input, .scv-form select, .scv-form textarea{border-width:1.5px} } /* Divers utilitaires */ .scv-divider{height:1px;background:var(--scv-divider);margin:8px 0} kbd{padding:2px 6px;border:1px solid var(--scv-border);border-bottom-width:2px;border-radius:6px;background:#fff;font-family:var(--scv-code);font-size:.85rem;color:#334e7b} /* ============================================================================= 12) PREFERENCES & PRINT ============================================================================= */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } @media print{ .scv-stepper,.scv-steps-mobile,.scv-choice-hero{display:none!important} .scv-card,.scv-pack,.scv-modelcard,.scv-acc,.scv-form-card{box-shadow:none!important} .scv-container{max-width:100%;padding:0} .scv-section{padding:8px 0} }