/* ========================================================================== Campus365 - Design system Mobile-first. Breakpoints : 480 / 768 / 1024 / 1280 ========================================================================== */ :root{ --c-navy:#0B1B3E; --c-blue:#2E5BFF; --c-blue-ink:#1E3FD0; --c-green:#8CC63F; --c-green-dark:#6FA82E; --c-lavender:#EAEDFC; --c-text:#3A3F4B; --c-white:#FFFFFF; --c-border:#DDE2F5; --radius:16px; --radius-lg:24px; --radius-pill:999px; --shadow-soft:0 12px 32px rgba(11,27,62,0.08); --shadow-card:0 8px 24px rgba(11,27,62,0.06); --font-heading:'Poppins', system-ui, sans-serif; --font-body:'Poppins', system-ui, sans-serif; --font-hand:'Caveat', cursive; --container:1280px; --header-h:76px; --c-surface:var(--c-white); --c-bg:var(--c-white); color-scheme:light; } /* ========================================================================== Mode sombre. Activé via [data-theme="dark"] sur (bouton bascule dans le header) ; persisté en localStorage, cf. js/main.js. --c-navy garde son rôle de "couleur d'encre" (textes, icônes, bordures) et devient clair en mode sombre ; les quelques usages où --c-navy sert de FOND volontairement toujours sombre (footer, bandeau navy, bouton header navy, tooltip, texte sur bouton vert) sont re-figés en dur juste après pour ne pas s'inverser avec le reste. ========================================================================== */ :root[data-theme="dark"]{ --c-navy:#E7EAF6; --c-blue:#7C93FF; --c-blue-ink:#5470E6; --c-lavender:#161F38; --c-text:#B9C0D6; --c-border:#2A3352; --c-bg:#0A0F1D; --c-surface:#121A2E; --shadow-soft:0 12px 32px rgba(0,0,0,.55); --shadow-card:0 10px 26px rgba(0,0,0,.4); color-scheme:dark; } /* Fonds volontairement toujours "navy", quel que soit le thème */ [data-theme="dark"] .skip-link, [data-theme="dark"] .section--navy, [data-theme="dark"] .site-footer, [data-theme="dark"] .btn--secondary:hover, [data-theme="dark"] .btn--navy, [data-theme="dark"] .header-icon-btn{ background:#0B1B3E; } [data-theme="dark"] .btn--navy:hover{ background:#1E3FD0; } [data-theme="dark"] .header-icon-btn{ border-color:#0B1B3E; } [data-theme="dark"] .header-icon-btn[data-tooltip]::after{ background:#0B1B3E; } [data-theme="dark"] .header-icon-btn[data-tooltip]::before{ border-bottom-color:#0B1B3E; } /* Texte toujours "navy" pour garder le contraste sur fond vert/blanc dédié */ [data-theme="dark"] .btn--primary, [data-theme="dark"] .btn--primary:hover, [data-theme="dark"] .btn--on-navy, [data-theme="dark"] .header-icon-btn--green, [data-theme="dark"] .header-icon-btn--green:hover, [data-theme="dark"] .step::before, [data-theme="dark"] .hs-form .hs-button, [data-theme="dark"] .hs-form-frame .hs-button, [data-theme="dark"] .hero__brush{ color:#0B1B3E; } /* Surfaces "carte" : blanc en clair -> fond sombre surélevé en sombre */ [data-theme="dark"] .site-header{ background:rgba(10,15,29,.92); } [data-theme="dark"] .mobile-drawer, [data-theme="dark"] .sticky-cta, [data-theme="dark"] .header-dropdown__menu, [data-theme="dark"] .main-nav__sub, [data-theme="dark"] .modal, [data-theme="dark"] .badge, [data-theme="dark"] .pillar, [data-theme="dark"] .card, [data-theme="dark"] .step, [data-theme="dark"] .form-panel, [data-theme="dark"] .contact-info, [data-theme="dark"] .testimonial, [data-theme="dark"] .cookie-banner, [data-theme="dark"] .btn--ghost{ background:var(--c-surface); } @media (min-width:768px){ [data-theme="dark"] .form-panel--airy{ background:var(--c-surface); } } [data-theme="dark"] .testimonial__avatar-placeholder{ background:#2A3352; color:#B9C0D6; } [data-theme="dark"] .placeholder-note{ background:#3A2E12; border-color:#8A6A1E; color:#F0C86B; } /* Logo navy illisible sur fond sombre : même traitement (blanc) que le logo du footer, qui est toujours sur fond navy. Couvre le header et le tiroir mobile (même classe .site-header__logo). */ [data-theme="dark"] .site-header__logo img{ filter:brightness(0) invert(1); } /* ---------- Reset ---------- */ *, *::before, *::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--font-body); color:var(--c-text); background:var(--c-bg); line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; height:auto; display:block; } a{ color:var(--c-blue); text-decoration:none; } a:hover{ color:var(--c-blue-ink); } ul{ list-style:none; margin:0; padding:0; } button{ font-family:inherit; cursor:pointer; } h1,h2,h3,h4{ font-family:var(--font-heading); color:var(--c-navy); line-height:1.2; margin:0 0 .5em; } h1{ font-weight:800; font-size:clamp(2rem,5vw,3.25rem); } h2{ font-weight:700; font-size:clamp(1.6rem,4vw,2.5rem); } h3{ font-weight:700; font-size:clamp(1.2rem,2.6vw,1.5rem); } p{ margin:0 0 1em; } :focus-visible{ outline:3px solid var(--c-blue); outline-offset:3px; } .skip-link{ position:absolute; left:0; top:-100px; z-index:1000; background:var(--c-navy); color:var(--c-white); padding:.75em 1.2em; border-radius:0 0 var(--radius) 0; transition:top .2s ease; } .skip-link:focus{ top:0; } .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:1.25rem; } @media (min-width:768px){ .container{ padding-inline:2rem; } } .section{ padding-block:clamp(2.25rem,6vw,4.5rem); } .section--tight{ padding-block:clamp(1.5rem,4vw,2.75rem); } .section--lavender{ background:var(--c-lavender); } .section--navy{ background:var(--c-navy); color:var(--c-white); } .section--navy h2, .section--navy h3{ color:var(--c-white); } .eyebrow{ font-family:var(--font-hand); font-size:1.5rem; color:var(--c-blue); display:inline-block; margin-bottom:.25em; } .text-center{ text-align:center; } .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; } /* ---------- Buttons & badges ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.55em 1.1em; border-radius:10px; font-weight:600; font-size:1rem; border:2px solid transparent; transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; white-space:nowrap; } .btn:hover{ transform:translateY(-1px); } .btn--primary{ background:var(--c-green); color:var(--c-navy); } .btn--primary:hover{ background:var(--c-green-dark); color:var(--c-navy); } .btn--secondary{ background:transparent; color:var(--c-navy); border-color:var(--c-navy); } .btn--secondary:hover{ background:var(--c-navy); color:var(--c-white); } .btn--ghost{ background:var(--c-white); color:var(--c-navy); border-color:var(--c-border); } .btn--ghost:hover{ border-color:var(--c-blue); color:var(--c-blue); } .btn--on-navy{ background:var(--c-white); color:var(--c-navy); } .btn--navy{ background:var(--c-navy); color:var(--c-white); } .btn--navy:hover{ background:var(--c-blue-ink); color:var(--c-white); } .btn--icon svg{ flex-shrink:0; } .btn--block{ width:100%; } .link-button{ background:none; border:0; padding:0; color:inherit; font:inherit; text-decoration:underline; text-underline-offset:.2em; } .badge{ display:inline-flex; align-items:center; gap:.4em; padding:.4em 1em; border-radius:var(--radius-pill); background:var(--c-white); border:1px solid var(--c-border); font-size:.85rem; font-weight:600; color:var(--c-navy); } .badge svg{ color:var(--c-blue); flex-shrink:0; } .badge-row{ display:flex; flex-wrap:wrap; gap:.6rem; } .badge--link{ cursor:pointer; transition:border-color .15s ease, color .15s ease; } .badge--link:hover{ border-color:var(--c-blue); color:var(--c-blue); } /* ---------- Header ---------- */ .site-header{ position:sticky; top:0; z-index:500; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--c-border); -webkit-transform:translateZ(0); transform:translateZ(0); } .site-header__bar{ max-width:var(--container); margin-inline:auto; padding:0 1.25rem; height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:1rem; } .site-header__logo img{ width:190px; height:auto; } .main-nav{ display:none; } .site-header__actions{ display:none; } .site-header__icons{ display:flex; align-items:center; gap:.75rem; } .hamburger{ border:0; background:none; width:44px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; } .hamburger span{ display:block; width:24px; height:2px; background:var(--c-navy); border-radius:2px; transition:transform .2s ease, opacity .2s ease; } .hamburger--close{ display:flex; } .hamburger--close span:first-child{ transform:rotate(45deg) translate(1px,1px); } .hamburger--close span:last-child{ transform:rotate(-45deg) translate(1px,-1px); } .mobile-drawer{ position:fixed; inset:0; z-index:600; width:100%; height:100%; background:var(--c-white); display:flex; flex-direction:column; padding:1.25rem; overflow-y:auto; } .mobile-drawer[hidden]{ display:none; } .mobile-drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; } .mobile-drawer__list{ display:flex; flex-direction:column; } .mobile-drawer__list > li > a, .mobile-drawer__trigger{ display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; padding:.9rem 0; border-bottom:1px solid var(--c-border); font-size:1.1rem; font-weight:600; color:var(--c-navy); background:none; border-left:0; border-right:0; border-top:0; } .mobile-drawer__sub{ padding-left:1rem; } .mobile-drawer__sub li a{ display:block; padding:.7rem 0; color:var(--c-text); font-weight:500; } .mobile-drawer__sub[hidden]{ display:none; } .mobile-drawer__social{ display:flex; align-items:center; justify-content:center; gap:1rem; padding:1rem 0 .5rem; border-bottom:0; } .mobile-drawer__list > li.mobile-drawer__social > a{ width:auto; padding:0; border-bottom:0; color:var(--c-navy); display:flex; } .mobile-drawer__list > li.mobile-drawer__social > a.social-brand{ color:#fff; width:44px; height:44px; padding:0; justify-content:center; align-items:center; } .mobile-drawer__list > li.mobile-drawer__social > a.social-brand svg{ width:22px; height:22px; } .mobile-drawer__theme{ display:flex; justify-content:center; padding:0 0 .75rem; border-bottom:1px solid var(--c-border); } .social-brand{ width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .social-brand.social-brand--facebook{ background:#1877F2; } .social-brand.social-brand--instagram{ background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); } .social-brand.social-brand--tiktok{ background:#000000; } .social-brand.social-brand--linkedin{ background:#0A66C2; } .mobile-drawer__list.mobile-drawer__list--secondary{ margin-top:1rem; background:var(--c-blue); color:var(--c-white); border-radius:var(--radius); padding:.25rem 1rem; } .mobile-drawer__list.mobile-drawer__list--secondary a{ display:block; padding:.85rem 0; color:var(--c-white); font-weight:500; } .mobile-drawer__list.mobile-drawer__list--secondary > li{ border-bottom:1px solid rgba(255,255,255,.25); } .mobile-drawer__list.mobile-drawer__list--secondary > li:last-child{ border-bottom:0; } .mobile-drawer__list.mobile-drawer__list--secondary .mobile-drawer__trigger{ color:var(--c-white); border-bottom:0; padding:.85rem 0; } .mobile-drawer__list.mobile-drawer__list--secondary .mobile-drawer__sub{ padding-bottom:.5rem; } .mobile-drawer__list.mobile-drawer__list--secondary .mobile-drawer__sub li a{ color:rgba(255,255,255,.8); padding:.6rem 0; } .mobile-drawer__list.mobile-drawer__list--secondary .mobile-drawer__sub li a:hover{ color:var(--c-white); } .mobile-drawer__footer{ margin-top:auto; display:flex; flex-wrap:wrap; gap:.75rem; padding-top:1.5rem; } .mobile-drawer__footer .btn{ flex:1 1 auto; min-width:0; } .mobile-drawer__backdrop[hidden]{ display:none; } .sticky-cta{ position:fixed; left:50%; bottom:max(1rem, env(safe-area-inset-bottom)); z-index:400; width:calc(100% - 2rem); max-width:420px; display:flex; align-items:center; justify-content:center; gap:.6rem; padding:.6rem; border-radius:14px; background:var(--c-white); box-shadow:var(--shadow-soft); transform:translate(-50%, 150%); transition:transform .25s ease; } .sticky-cta.is-visible{ transform:translate(-50%, 0); } .sticky-cta .btn{ flex:1; } .floating-actions{ position:fixed; right:1.25rem; bottom:max(5.5rem, calc(4.5rem + env(safe-area-inset-bottom))); z-index:450; display:flex; flex-direction:column; align-items:center; gap:.55rem; } @media (min-width:1024px){ .floating-actions{ bottom:auto; top:50%; transform:translateY(-50%); } } .whatsapp-float{ width:48px; height:48px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-soft); transition:transform .15s ease; } .whatsapp-float:hover{ transform:scale(1.08); color:#fff; } .social-float{ display:none; } @media (min-width:768px){ .social-float{ display:flex; flex-direction:column; align-items:center; gap:.55rem; } } .social-float a{ width:48px; height:48px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-soft); transition:transform .15s ease; } .social-float a:hover{ transform:scale(1.08); } .social-float a.social-float--facebook{ background:#1877F2; } .social-float a.social-float--instagram{ background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); } .social-float a.social-float--tiktok{ background:#000000; } .social-float a.social-float--linkedin{ background:#0A66C2; } @media (min-width:1024px){ .main-nav{ display:block; } .main-nav__list{ display:flex; align-items:center; gap:1.75rem; } .main-nav__link{ background:none; border:0; display:flex; align-items:center; gap:.35em; font-weight:600; font-size:1rem; color:var(--c-navy); padding:.5em 0; } .main-nav__item--has-sub{ position:relative; } .main-nav__sub{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); min-width:280px; background:var(--c-white); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:.5rem; opacity:0; visibility:hidden; transition:opacity .15s ease, transform .15s ease; } .main-nav__item--has-sub:hover .main-nav__sub, .main-nav__item--has-sub:focus-within .main-nav__sub, .main-nav__item--has-sub.is-open .main-nav__sub{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .main-nav__sub li a{ display:flex; justify-content:space-between; gap:1rem; padding:.7em .9em; border-radius:calc(var(--radius) - 6px); color:var(--c-text); font-weight:500; } .main-nav__sub li a span{ color:var(--c-blue); font-size:.8rem; font-weight:600; } .main-nav__sub li a:hover{ background:var(--c-lavender); color:var(--c-navy); } .main-nav__chevron{ transition:transform .15s ease; } .main-nav__item--has-sub:hover .main-nav__chevron{ transform:rotate(180deg); } .main-nav__social{ display:flex; align-items:center; gap:.85rem; padding-left:.5rem; margin-left:.25rem; border-left:1px solid var(--c-border); } .main-nav__social a{ color:var(--c-navy); display:flex; } .main-nav__social a:hover{ color:var(--c-blue); } .site-header__actions{ display:flex; flex-direction:row; align-items:center; gap:.85rem; } .hamburger{ display:none; } } [data-theme-toggle] .icon-sun{ display:none; } [data-theme="dark"] [data-theme-toggle] .icon-moon{ display:none; } [data-theme="dark"] [data-theme-toggle] .icon-sun{ display:block; } .theme-toggle-link{ display:inline-flex; align-items:center; gap:.4em; background:none; border:0; padding:0; color:inherit; font-family:inherit; font-size:.85rem; font-weight:600; line-height:1.2; opacity:.85; } .theme-toggle-link:hover{ opacity:1; } .theme-toggle-link svg{ flex-shrink:0; } .theme-switch{ display:inline-flex; align-items:center; gap:.4rem; flex-shrink:0; background:none; border:0; padding:0; cursor:pointer; } .theme-switch__track{ display:block; width:44px; height:24px; border-radius:var(--radius-pill); background:var(--c-border); padding:2px; transition:background-color .2s ease; } .theme-switch__thumb{ display:block; width:20px; height:20px; border-radius:50%; background:var(--c-surface); box-shadow:var(--shadow-soft); transition:transform .2s ease; } .theme-switch[aria-pressed="true"] .theme-switch__track{ background:var(--c-blue); } .theme-switch[aria-pressed="true"] .theme-switch__thumb{ transform:translateX(20px); } .theme-switch__icon{ color:var(--c-text); opacity:.4; flex-shrink:0; transition:opacity .2s ease, color .2s ease; } .theme-switch[aria-pressed="false"] .theme-switch__icon--sun{ opacity:1; color:var(--c-blue); } .theme-switch[aria-pressed="true"] .theme-switch__icon--moon{ opacity:1; color:var(--c-blue); } @media (min-width:1024px){ .theme-switch--mobile{ display:none; } } .header-icon-btn{ background:var(--c-navy); color:var(--c-white); border-color:var(--c-navy); } .header-icon-btn:hover{ background:var(--c-blue-ink); border-color:var(--c-blue-ink); color:var(--c-white); } .header-icon-btn.header-icon-btn--blue{ background:var(--c-blue); border-color:var(--c-blue); } .header-icon-btn.header-icon-btn--blue:hover{ background:var(--c-blue-ink); border-color:var(--c-blue-ink); } .header-icon-btn.header-icon-btn--green{ background:var(--c-green); border-color:var(--c-green); color:var(--c-navy); } .header-icon-btn.header-icon-btn--green:hover{ background:var(--c-green-dark); border-color:var(--c-green-dark); color:var(--c-navy); } .header-icon-btn{ position:relative; } .header-icon-btn[data-tooltip]::before, .header-icon-btn[data-tooltip]::after{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px); opacity:0; visibility:hidden; pointer-events:none; z-index:500; transition:opacity .15s ease, transform .15s ease; } .header-icon-btn[data-tooltip]::before{ content:''; margin-top:2px; border:6px solid transparent; border-bottom-color:var(--c-navy); } .header-icon-btn[data-tooltip]::after{ content:attr(data-tooltip); margin-top:14px; background:var(--c-navy); color:var(--c-white); font-family:var(--font-body); font-size:.78rem; font-weight:600; padding:.4em .8em; border-radius:8px; white-space:nowrap; } .header-icon-btn[data-tooltip]:hover::before, .header-icon-btn[data-tooltip]:hover::after, .header-icon-btn[data-tooltip]:focus-visible::before, .header-icon-btn[data-tooltip]:focus-visible::after{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .header-icon-btn[data-tooltip][aria-expanded="true"]::before, .header-icon-btn[data-tooltip][aria-expanded="true"]::after{ opacity:0; visibility:hidden; } /* ---------- Header icon dropdown (planning) ---------- */ .header-dropdown{ position:relative; } .header-dropdown__menu{ position:absolute; top:100%; right:0; margin-top:8px; min-width:200px; background:var(--c-white); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:.5rem; z-index:50; } .header-dropdown__menu[hidden]{ display:none; } .header-dropdown__menu li a{ display:block; padding:.65em .9em; border-radius:calc(var(--radius) - 6px); color:var(--c-text); font-weight:500; font-size:.95rem; } .header-dropdown__menu li a:hover{ background:var(--c-lavender); color:var(--c-navy); } /* ---------- Rappel modal ---------- */ .modal-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(11,27,62,.55); display:flex; align-items:center; justify-content:center; padding:1.25rem; } .modal-overlay[hidden]{ display:none; } .modal{ position:relative; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:2rem; } .modal__close{ position:absolute; top:1rem; right:1rem; width:36px; height:36px; border-radius:50%; border:0; background:var(--c-lavender); color:var(--c-navy); display:flex; align-items:center; justify-content:center; } .modal__close:hover{ background:var(--c-border); } .modal__intro{ color:var(--c-text); } #rappel-modal-title{ padding-right:2.5rem; } .modal--document{ max-width:900px; width:min(900px, 100%); height:85vh; max-height:85vh; display:flex; flex-direction:column; padding:1.5rem; } #qualiopi-modal-title{ padding-right:2.5rem; } .modal__pdf-frame{ flex:1; border-radius:var(--radius); overflow:hidden; margin-top:1rem; background:var(--c-lavender); } .modal__pdf-frame iframe{ width:100%; height:100%; border:0; } .modal__pdf-download{ margin-top:1rem; align-self:flex-start; } /* ---------- Hero ---------- */ .hero{ padding-block:clamp(2.5rem,7vw,5rem); overflow:hidden; } .hero__grid{ display:grid; gap:2.5rem; align-items:center; } .hero__content .eyebrow{ display:block; } .hero__brush{ position:relative; display:inline-block; white-space:nowrap; color:var(--c-navy); isolation:isolate; } .hero__brush::before{ content:""; position:absolute; z-index:-1; left:-.12em; right:-.14em; top:8%; bottom:4%; background:var(--c-green); border-radius:255px 15px 225px 15px/15px 225px 15px 255px; transform:scaleX(0) rotate(-1deg); transform-origin:left center; -webkit-transform:scaleX(0) rotate(-1deg); animation:hero-brush-reveal .65s cubic-bezier(.65,0,.35,1) .6s forwards; } @keyframes hero-brush-reveal{ to{ transform:scaleX(1) rotate(-1deg); } } @media (prefers-reduced-motion: reduce){ .hero__brush::before{ animation:none; transform:rotate(-1deg); } } .hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; } .hero__visual{ position:relative; } .blob{ position:relative; border-radius:50% 50% 45% 55% / 55% 45% 55% 45%; background:var(--c-lavender); overflow:hidden; aspect-ratio:1/1; max-width:480px; margin-inline:auto; } .blob img{ width:100%; height:100%; object-fit:cover; } @media (min-width:1024px){ .hero__grid{ grid-template-columns:1.1fr 1fr; } } /* ---------- Pillars / features ---------- */ .pillars{ display:grid; gap:1.5rem; grid-template-columns:1fr; } .pillar{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:1.75rem; text-align:center; } .pillar__icon{ width:64px; height:64px; border-radius:50%; background:var(--c-lavender); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; color:var(--c-blue); } @media (min-width:768px){ .pillars{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1024px){ .pillars{ grid-template-columns:repeat(4,1fr); } } /* ---------- Cards / formations ---------- */ .cards-grid{ display:grid; gap:1.75rem; grid-template-columns:1fr; } @media (min-width:768px){ .cards-grid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1024px){ .cards-grid{ grid-template-columns:repeat(3,1fr); } } .card{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease; } .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); } .card:focus-visible{ outline-offset:3px; } .card__media{ aspect-ratio:4/3; background:var(--c-lavender); } .card__media img{ width:100%; height:100%; object-fit:cover; } .card__body{ padding:1.5rem; display:flex; flex-direction:column; gap:.75rem; flex:1; } .card__body p:not(.card__meta){ color:var(--c-text); } .card__meta{ font-size:.9rem; color:var(--c-blue); font-weight:600; } .card__link{ margin-top:auto; font-weight:700; display:inline-flex; align-items:center; gap:.4em; color:var(--c-blue); } /* ---------- Icon list ---------- */ .icon-list{ display:grid; gap:1.25rem; grid-template-columns:1fr; } @media (min-width:768px){ .icon-list{ grid-template-columns:repeat(2,1fr); } } .icon-list__item{ display:flex; gap:1rem; align-items:flex-start; } .icon-list__icon{ width:48px; height:48px; border-radius:50%; background:var(--c-lavender); color:var(--c-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; } /* ---------- Checklist ---------- */ .checklist li{ display:flex; gap:.75rem; align-items:flex-start; padding:.5rem 0; } .checklist li svg{ color:var(--c-green-dark); flex-shrink:0; margin-top:.2em; } /* ---------- Stats banner ---------- */ .stats{ display:grid; gap:2rem; grid-template-columns:repeat(2,1fr); text-align:center; } @media (min-width:768px){ .stats{ grid-template-columns:repeat(4,1fr); } } .stats__num{ font-family:var(--font-heading); font-weight:800; font-size:clamp(2rem,5vw,2.75rem); color:var(--c-blue); } .stats__label{ font-size:.95rem; color:var(--c-text); } .section--navy .stats__label{ color:var(--c-white); opacity:.85; } /* ---------- Testimonials ---------- */ .testimonials{ position:relative; } .testimonial-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:2rem; padding-bottom:.5rem; } .testimonial-track::-webkit-scrollbar{ height:6px; } .testimonial{ scroll-snap-align:start; flex:0 0 100%; max-width:100%; margin:0; background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:1.5rem; } @media (min-width:768px){ .testimonial{ flex-basis:calc(50% - 1rem); } } .testimonial__quote{ font-size:1.1rem; font-style:italic; } .testimonial__author{ display:flex; align-items:center; gap:.75rem; margin-top:1rem; } .testimonial__avatar-placeholder{ width:48px; height:48px; border-radius:50%; flex-shrink:0; background:#D9DCE3; color:#6B7280; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:700; font-size:1.1rem; user-select:none; -webkit-user-select:none; -moz-user-select:none; cursor:default; } /* Variantes colorées façon avis en ligne : couleurs figées en dur (pas de var --c-*) pour rester stables et lisibles identiquement en clair/sombre. */ .testimonial__author .testimonial__avatar-placeholder--1{ background:#2E5BFF; color:#fff; } .testimonial__author .testimonial__avatar-placeholder--2{ background:#6FA82E; color:#fff; } .testimonial__author .testimonial__avatar-placeholder--3{ background:#0B1B3E; color:#fff; } .testimonial__author .testimonial__avatar-placeholder--4{ background:#B5714F; color:#fff; } .testimonial__author .testimonial__avatar-placeholder--5{ background:#6B5FA8; color:#fff; } .testimonial__author .testimonial__avatar-placeholder--6{ background:#1E8A8A; color:#fff; } .testimonial__name{ margin:0; font-weight:700; color:var(--c-navy); } .testimonial__role{ margin:0; font-size:.85rem; color:var(--c-text); } .testimonial__date{ margin:.15rem 0 0; font-size:.78rem; color:var(--c-text); opacity:.65; } .testimonial__tag{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--c-blue); font-weight:700; } /* ---------- Partners carousel ---------- */ .partners{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .partners__track{ display:flex; align-items:center; gap:1.25rem; width:max-content; padding-block:.5rem; animation:partners-scroll 28s linear infinite; } .partners:hover .partners__track, .partners:focus-within .partners__track{ animation-play-state:paused; } @keyframes partners-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .partners__logo{ display:flex; align-items:center; justify-content:center; padding:.85rem 1.75rem; white-space:nowrap; flex-shrink:0; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); box-shadow:var(--shadow-card); font-family:var(--font-heading); font-weight:700; letter-spacing:.01em; font-size:1.05rem; color:var(--c-navy); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .partners__logo:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:var(--c-blue); } @media (prefers-reduced-motion: reduce){ .partners__track{ animation:none; } } /* ---------- CTA banner ---------- */ .cta-banner{ background:linear-gradient(135deg, var(--c-blue), var(--c-blue-ink)); color:var(--c-white); border-radius:var(--radius-lg); padding:clamp(1.25rem,4vw,2rem); text-align:center; } .cta-banner h2{ color:var(--c-white); } .cta-banner__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:1rem; } /* ---------- Steps ---------- */ .steps{ display:grid; gap:1.5rem; grid-template-columns:1fr; counter-reset:step; } @media (min-width:768px){ .steps{ grid-template-columns:repeat(4,1fr); } } .step{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:1.75rem; position:relative; } .step::before{ counter-increment:step; content:counter(step); display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--c-green); color:var(--c-navy); font-weight:800; margin-bottom:1rem; } /* ---------- Accordion (FAQ) ---------- */ .accordion__item{ border-bottom:1px solid var(--c-border); } .accordion__trigger{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; background:none; border:0; padding:1.25rem 0; text-align:left; font-weight:700; font-size:1.05rem; color:var(--c-navy); } .accordion__trigger svg{ transition:transform .2s ease; flex-shrink:0; } .accordion__trigger[aria-expanded="true"] svg{ transform:rotate(180deg); } .accordion__panel{ padding-bottom:1.25rem; } .accordion__panel[hidden]{ display:none; } /* ---------- Forms (HubSpot host) ---------- */ .form-panel{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:clamp(1.5rem,4vw,2.5rem); } /* Version mobile allégée : se fond dans la page, padding réduit ; devient une carte à partir de tablette */ .form-panel--airy{ background:transparent; box-shadow:none; border-radius:0; padding:.75rem 0; } @media (min-width:768px){ .form-panel--airy{ background:var(--c-white); box-shadow:var(--shadow-soft); border-radius:var(--radius-lg); padding:clamp(2rem,6vw,4rem); } } .hs-form, .hs-form-frame, .modal__form-slot{ min-height:280px; } .hs-form .hs-form-field label, .hs-form-frame .hs-form-field label{ font-weight:600; color:var(--c-navy); margin-bottom:.35em; display:block; } .hs-form input[type="text"], .hs-form input[type="email"], .hs-form input[type="tel"], .hs-form textarea, .hs-form select, .hs-form-frame input[type="text"], .hs-form-frame input[type="email"], .hs-form-frame input[type="tel"], .hs-form-frame textarea, .hs-form-frame select{ width:100%; border:1px solid var(--c-border); border-radius:var(--radius); padding:.8em 1em; font:inherit; } .hs-form .hs-button, .hs-form-frame .hs-button{ border:0; border-radius:10px; background:var(--c-green); color:var(--c-navy); font-weight:700; padding:.55em 1.2em; cursor:pointer; } .hs-form .hs-error-msgs, .hs-form-frame .hs-error-msgs{ color:#C0392B; font-size:.85rem; list-style:none; padding:0; } /* ---------- Contact info block ---------- */ .contact-info{ display:grid; gap:1.5rem 2rem; grid-template-columns:1fr; background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:clamp(1.5rem,4vw,2rem); } @media (min-width:640px){ .contact-info{ grid-template-columns:1fr 1fr; } } .contact-info__item{ display:flex; gap:1rem; align-items:flex-start; } .contact-info__item svg{ color:var(--c-blue); flex-shrink:0; margin-top:.15em; } .map-frame{ border:0; width:100%; aspect-ratio:16/9; border-radius:var(--radius-lg); } /* ---------- Blog ---------- */ .blog-grid{ display:grid; gap:1.75rem; grid-template-columns:1fr; } @media (min-width:768px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1024px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } } .article{ max-width:760px; margin-inline:auto; } .article__meta{ color:var(--c-blue); font-weight:600; font-size:.9rem; } .article__body h2{ margin-top:1.75em; } .article__body ul{ list-style:disc; padding-left:1.4em; margin-bottom:1em; } .article__body ul li{ margin-bottom:.4em; } .article__cover{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; background:var(--c-lavender); margin-bottom:2rem; } .article__cover img{ width:100%; height:100%; object-fit:cover; } /* ---------- Footer ---------- */ .site-footer{ background:var(--c-navy); color:var(--c-white); padding-block:3.5rem 1.5rem; padding-bottom:calc(1.5rem + 5.5rem); } .site-footer a{ color:var(--c-white); opacity:.85; } .site-footer a:hover{ opacity:1; color:var(--c-white); } .site-footer__inner{ max-width:var(--container); margin-inline:auto; padding-inline:1.25rem; display:grid; gap:2.5rem; grid-template-columns:1fr; } @media (min-width:768px){ .site-footer__inner{ grid-template-columns:1.2fr 1fr 1fr 1fr; padding-inline:2rem; } } .site-footer__logo{ filter:brightness(0) invert(1); width:150px; } .site-footer__baseline{ font-family:var(--font-hand); font-size:1.4rem; margin-top:1rem; opacity:.9; } .site-footer__social{ display:flex; justify-content:center; gap:1rem; margin-top:1.25rem; } .site-footer__social .social-brand{ width:44px; height:44px; } .site-footer__social .social-brand svg{ width:22px; height:22px; } @media (min-width:768px){ .site-footer__social{ justify-content:flex-start; } .site-footer__social .social-brand{ width:auto; height:auto; background:none !important; color:var(--c-white); opacity:.85; } .site-footer__social .social-brand:hover{ opacity:1; } .site-footer__social .social-brand svg{ width:20px; height:20px; } } .site-footer__qualiopi-block{ display:flex; align-items:center; gap:.85rem; margin-top:1.5rem; max-width:320px; } .site-footer__qualiopi-link{ display:block; flex-shrink:0; } .site-footer__qualiopi{ display:block; background:var(--c-white); border-radius:var(--radius); padding:.5rem .75rem; width:110px; height:auto; } .site-footer__qualiopi-mention{ margin:0; font-size:.7rem; line-height:1.35; opacity:.7; } .site-footer__social a{ opacity:.85; } .site-footer__title{ color:var(--c-white); font-size:1rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:1rem; } .brand-365{ font-weight:300; } .contact-map-grid{ grid-template-columns:1fr; max-width:1100px; margin-inline:auto; } .contact-map-grid .map-frame{ width:100%; aspect-ratio:21/9; height:auto; min-height:0; } .map-popup-actions{ display:none; } @media (max-width:767px){ .map-popup-actions{ display:flex; gap:.6rem; margin-top:.6rem; padding-top:.5rem; border-top:1px solid var(--c-border); flex-wrap:wrap; } .map-popup-actions a{ font-size:.8rem; font-weight:600; color:var(--c-blue); padding:.3em .6em; border-radius:6px; background:var(--c-lavender); } } .site-footer__col ul{ display:flex; flex-direction:column; gap:.6rem; } .site-footer__contact li{ opacity:.85; } .site-footer__bottom{ max-width:var(--container); margin:2.5rem auto 0; padding:1.5rem 1.25rem 0; border-top:1px solid rgba(255,255,255,.15); display:flex; flex-direction:column; gap:1rem; font-size:.85rem; } @media (min-width:768px){ .site-footer__bottom{ flex-direction:row; justify-content:space-between; align-items:center; padding-inline:2rem; } } .site-footer__legal{ display:flex; flex-wrap:wrap; gap:1rem; } .site-footer__legal a, .site-footer__legal button{ opacity:.75; font-size:.85rem; } /* ---------- Cookie banner ---------- */ .cookie-banner{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:900; max-width:640px; margin-inline:auto; background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:1.5rem; border:1px solid var(--c-border); } .cookie-banner[hidden]{ display:none; } .cookie-banner__text p{ margin-bottom:.5em; font-size:.9rem; } .cookie-banner__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem; } .cookie-banner__panel{ margin-top:1rem; border-top:1px solid var(--c-border); padding-top:1rem; } .cookie-banner__panel[hidden]{ display:none; } .cookie-banner__option{ display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.6rem 0; font-size:.85rem; } .cookie-banner__panel-actions{ margin-top:.75rem; } /* ---------- Legal content ---------- */ .legal-content{ max-width:800px; margin-inline:auto; } .legal-content h2{ margin-top:1.75em; } .legal-content ul{ list-style:disc; padding-left:1.4em; margin-bottom:1em; } .legal-content ol{ list-style:decimal; padding-left:1.4em; margin-bottom:1em; } .legal-content ol > li{ margin-bottom:.75em; } .legal-content ul ul{ margin-top:.5em; margin-bottom:.5em; } .legal-content h3{ margin-top:1.4em; } .placeholder-note{ background:#FFF7E6; border:1px dashed #E8B34A; border-radius:var(--radius); padding:1rem 1.25rem; font-size:.9rem; color:#7A5300; margin-block:1rem; } /* ---------- 404 ---------- */ .error-page{ text-align:center; padding-block:clamp(4rem,10vw,7rem); } .error-page__code{ font-family:var(--font-heading); font-weight:800; font-size:clamp(4rem,12vw,7rem); color:var(--c-blue); } /* ---------- Simulateur de salaire (pop-up) ---------- */ .sim-field{ margin-bottom:1.1rem; } .sim-field label{ display:block; font-weight:600; color:var(--c-navy); margin-bottom:.4rem; font-size:.9rem; } .sim-field select{ width:100%; padding:.7em .9em; border-radius:var(--radius); border:1px solid var(--c-border); background:var(--c-surface); color:var(--c-navy); font-family:inherit; font-size:1rem; } .sim-result{ margin-top:1.5rem; padding:1.25rem; border-radius:var(--radius); background:var(--c-lavender); } .sim-result__amount{ font-size:1.5rem; font-weight:700; color:var(--c-navy); margin:0 0 .25rem; } .sim-result__detail{ margin:0; font-size:.9rem; opacity:.8; }