/* ========================================================================== IGI-CI — style.css global (design system "Orange Impact", CDC §4) Construit au LOT 1. Ce fichier est le SEUL fichier CSS du site. Mobile-first. Breakpoints : min-width 768px (tablette) / 1024px (desktop). Polices chargées via Google Fonts dans le : Sora + Inter. ========================================================================== SOMMAIRE 01. Variables (tokens : palette §4.1, spacing, radius, ombres, container) 02. Reset léger & base 03. Typographie (échelle §4.2, .accent, utilitaires) 04. Layout (.container, .section alternées, .band) 05. Boutons (.btn primaire / secondaire / whatsapp / états) 06. Badges (.badge, .badge--price) 07. Cards (.card-formation, .card-profil) 08. Formulaires (labels, inputs, erreur, succès) 09. Header sticky + nav desktop + menu mobile burger 10. Footer 11. Bouton WhatsApp flottant 12. Bandeau CTA orange plein 13. Chiffres clés (compteurs) 14. Grille "Pourquoi" 2×2 + étapes numérotées + piliers 15. Hero signature (accueil §5.2) + heros courts 16. Reveal génériques au scroll (.reveal / .is-revealed) 17. Focus ring global (§9) 18. prefers-reduced-motion (§5 — tout désactivé) ========================================================================== */ /* ========================================================================== 01. VARIABLES ========================================================================== */ :root { /* Palette verrouillée — CDC §4.1 */ --orange: #F5711A; --orange-dark: #D95B0A; --orange-soft: #FEF0E5; --ink: #1C1410; --ink-soft: #5C5248; --white: #FFFFFF; --cream: #FBF7F2; --green-ok: #1E8A4C; /* Orange réservé aux PETITS textes (liens, eyebrows, badges 13-16px) : dérivé de --orange-dark, seul à passer AA 4.5:1 sur blanc (5.2:1), --orange-soft (4.7:1) et --cream. --orange-dark (3.85:1 sur blanc) reste réservé aux titres (gros texte, seuil AA 3:1). */ --orange-text: #B84A04; /* Couleurs de service (hors accents — bordure/erreur/whatsapp) */ --border: #E5DED6; --error: #D64545; --error-soft: #FCECEC; --whatsapp: #25D366; --whatsapp-dk: #1EBE5A; /* Échelle d'espacement — CDC §4.3 (4/8/12/16/24/32/48/64/96) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; /* Rayons — CDC §4.3 */ --radius-card: 12px; --radius-pill: 999px; --radius-img: 20px; /* Ombres douces chaudes uniquement — CDC §4.3 */ --shadow: 0 8px 30px rgba(28, 20, 16, .08); --shadow-lift: 0 14px 40px rgba(28, 20, 16, .12); --shadow-soft: 0 4px 16px rgba(28, 20, 16, .06); /* Container — CDC §4.3 */ --container: 1140px; --pad: 20px; /* padding latéral mobile */ /* Typo */ --font-title: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* Courbe d'animation signature — CDC §5.1 */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } @media (min-width: 1024px) { :root { --pad: 32px; } /* padding latéral desktop — CDC §4.3 */ } /* ========================================================================== 02. RESET LÉGER & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.65; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } input, textarea, select { font: inherit; color: inherit; } ul, ol { list-style: none; padding: 0; } :target { scroll-margin-top: 96px; } /* ancres sous header sticky */ /* ========================================================================== 03. TYPOGRAPHIE — CDC §4.2 ========================================================================== */ h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; } h1 { font-size: clamp(2rem, 6vw, 3.5rem); } h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); } h3 { font-size: 1.25rem; font-weight: 700; } h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; } p { text-wrap: pretty; } /* Mot-clé orange dans un titre — CDC §4.2. Sur fond CLAIR : --orange-dark (AA, #F5711A ≈ 2.9:1 sur blanc = insuffisant). Sur fond ORANGE (bandeau CTA) : surchargé en blanc, voir §12. */ .accent { color: var(--orange-dark); } /* Sur-titre / eyebrow */ .eyebrow { display: inline-block; font-family: var(--font-title); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange-text); } /* Chapô / intro de section */ .lead { font-size: clamp(1.0625rem, 2.4vw, 1.25rem); line-height: 1.6; color: var(--ink-soft); max-width: 62ch; } .text-soft { color: var(--ink-soft); } /* Lien texte inline (orange AA) */ .link { color: var(--orange-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(184, 74, 4, .35); transition: text-decoration-color 160ms ease; } .link:hover { text-decoration-color: currentColor; } /* Titre de section centré + espace */ .section-head { max-width: 62ch; margin-bottom: var(--sp-8); } .section-head .lead { margin-top: var(--sp-4); } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .lead { margin-inline: auto; } /* ========================================================================== 04. LAYOUT — container, sections alternées, bands ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); } .container--narrow { max-width: 760px; } /* Section = rythme vertical. Fond blanc par défaut. */ .section { padding-block: var(--sp-16); } @media (min-width: 1024px) { .section { padding-block: var(--sp-24); } } /* Sections alternées — CDC §4.3 / §5 */ .section--soft { background: var(--orange-soft); } .section--cream { background: var(--cream); } .section--white { background: var(--white); } /* Utilitaires d'espacement ponctuels */ .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .mt-12 { margin-top: var(--sp-12); } .center { text-align: center; } /* Grille auto-fit générique pour listes de cards */ .grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; } @media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid { gap: var(--sp-8); } .grid--3 { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== 05. BOUTONS — CDC §4.5 (tous états) ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; /* cible tactile ≥ 44px — §9 */ padding: 14px 28px; font-family: var(--font-title); font-weight: 600; font-size: 1rem; line-height: 1; text-align: center; border-radius: var(--radius-pill); border: 2px solid transparent; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 160ms var(--ease-out), box-shadow 180ms ease; will-change: transform; user-select: none; } .btn svg { width: 20px; height: 20px; flex-shrink: 0; } /* Primaire */ .btn--primary { background: var(--orange); color: var(--white); border-color: var(--orange); } .btn--primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); transform: translateY(-2px); box-shadow: var(--shadow); } .btn--primary:active { transform: translateY(0); box-shadow: none; } /* Secondaire */ .btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--secondary:hover { background: var(--ink); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow); } .btn--secondary:active { transform: translateY(0); box-shadow: none; } /* WhatsApp — CDC §4.5 (uniquement actions "Écrire sur WhatsApp") */ .btn--whatsapp { background: var(--whatsapp); color: var(--white); border-color: var(--whatsapp); } .btn--whatsapp:hover { background: var(--whatsapp-dk); border-color: var(--whatsapp-dk); transform: translateY(-2px); box-shadow: var(--shadow); } .btn--whatsapp:active { transform: translateY(0); box-shadow: none; } /* Variante ghost blanche (sur fond orange du bandeau CTA) */ .btn--white { background: var(--white); color: var(--orange-text); border-color: var(--white); } .btn--white:hover { background: var(--cream); border-color: var(--cream); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); } .btn--white:active { transform: translateY(0); box-shadow: none; } /* États communs */ .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; } .btn--block { display: flex; width: 100%; } .btn--sm { min-height: 44px; padding: 11px 20px; font-size: 0.9375rem; } /* Lien secondaire discret sous un formulaire (fallback email) */ .btn-alt { display: inline-block; margin-top: var(--sp-3); font-weight: 500; font-size: 0.9375rem; color: var(--ink-soft); } .btn-alt u { text-decoration-color: var(--orange); } .btn-alt:hover { color: var(--orange-dark); } /* ========================================================================== 06. BADGES — CDC §4.5 ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 5px 12px; font-family: var(--font-title); font-weight: 600; font-size: 0.8125rem; /* 13px */ line-height: 1.3; color: var(--orange-text); background: var(--orange-soft); border-radius: var(--radius-pill); white-space: nowrap; } /* Badge prix en overlay sur l'image d'une card formation. Fond --orange-text (et non --orange) : blanc sur --orange = 2.9:1, illisible à 13px ; blanc sur --orange-text = 5.2:1 (AA). */ .badge--price { background: var(--orange-text); color: var(--white); box-shadow: var(--shadow-soft); } /* Badge profil sobre (opportunités) */ .badge--neutral { background: var(--cream); color: var(--ink-soft); } /* ========================================================================== 07. CARDS — CDC §4.5 ========================================================================== */ /* --- Card formation / événement --------------------------------------- */ .card-formation { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 200ms var(--ease-out), box-shadow 200ms ease; } .card-formation:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .card-formation__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--orange-soft); } .card-formation__media img { width: 100%; height: 100%; /* contain (et non cover) : les flyers fournis doivent rester lisibles en entier, jamais recadrés (demande client 07/07). */ object-fit: contain; background: var(--orange-soft); transition: transform 300ms var(--ease-out); } .card-formation:hover .card-formation__media img { transform: scale(1.03); } .card-formation__media .badge--price { position: absolute; top: var(--sp-3); left: var(--sp-3); } .card-formation__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); flex: 1; } .card-formation__title { font-size: 1.25rem; } .card-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: 0.875rem; color: var(--ink-soft); } .card-meta li { display: inline-flex; align-items: center; gap: 6px; } .card-meta svg { width: 16px; height: 16px; color: var(--orange-dark); flex-shrink: 0; } .card-formation__excerpt { color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Liste à coches (points forts / programme d'une formation) */ .check-list { display: flex; flex-direction: column; gap: var(--sp-2); } .check-list li { position: relative; padding-left: 28px; color: var(--ink); } .check-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--orange-soft); /* coche orange en SVG data-uri (traits arrondis, cohérent §3) */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D95B0A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .card-formation__footer { margin-top: auto; padding-top: var(--sp-2); } /* --- Card profil (opportunités) --------------------------------------- */ .card-profil { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); transition: transform 200ms var(--ease-out), box-shadow 200ms ease; } .card-profil:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .card-profil__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--orange-soft); color: var(--orange-dark); } .card-profil__icon svg { width: 28px; height: 28px; } .card-profil__title { font-size: 1.25rem; } .card-profil p { color: var(--ink-soft); flex: 1; } .card-profil__footer { margin-top: auto; } /* ========================================================================== 08. FORMULAIRES — CDC §4.5 / §7 / §9 ========================================================================== */ .form { display: flex; flex-direction: column; gap: var(--sp-6); } .form-card { padding: var(--sp-8); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow); } .form-field { display: flex; flex-direction: column; gap: var(--sp-2); } .form-label { font-family: var(--font-title); font-weight: 600; font-size: 0.9375rem; color: var(--ink); } .form-label .req { color: var(--orange-dark); } .form-control { width: 100%; min-height: 48px; /* cible tactile — §9 */ padding: 14px 16px; background: var(--white); color: var(--ink); border: 1.5px solid var(--border); border-radius: var(--radius-card); transition: border-color 160ms ease, box-shadow 160ms ease; appearance: none; } textarea.form-control { min-height: 120px; resize: vertical; line-height: 1.6; } .form-control::placeholder { color: #A69E93; } .form-control:hover { border-color: #CFC6BA; } .form-control:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245, 113, 26, .18); } /* Select : chevron SVG inline */ select.form-control { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235C5248' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } .form-hint { font-size: 0.8125rem; color: var(--ink-soft); } /* --- État ERREUR — CDC §4.5 / §5.5 (shake) ----------------------------- */ .form-field.has-error .form-control { border-color: var(--error); background: var(--error-soft); } .form-field.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(214, 69, 69, .18); } .field-error { display: none; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 500; color: var(--error); } .form-field.has-error .field-error { display: flex; } .form-field.has-error .form-control { animation: shake 200ms ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* --- État SUCCÈS — CDC §7 (check animé, formulaire NON vidé) ------------ */ .form-success { display: none; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); background: rgba(30, 138, 76, .10); border: 1.5px solid rgba(30, 138, 76, .35); border-radius: var(--radius-card); color: #14663a; font-weight: 500; } .form-success.is-visible { display: flex; } .form-success__check { flex-shrink: 0; width: 28px; height: 28px; color: var(--green-ok); } .form-success__check circle, .form-success__check path { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; } .form-success.is-visible .form-success__check circle { stroke-dasharray: 76; stroke-dashoffset: 76; animation: draw 400ms var(--ease-out) forwards; } .form-success.is-visible .form-success__check path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw 300ms var(--ease-out) 250ms forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } /* Encart d'information (fond orange-soft, ex : trombone PDF — §6.4) */ .info-box { display: flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); background: var(--orange-soft); border-radius: var(--radius-card); color: var(--ink); line-height: 1.55; } .info-box svg { flex-shrink: 0; width: 24px; height: 24px; color: var(--orange-dark); margin-top: 2px; } /* ========================================================================== 09. HEADER STICKY + NAV + MENU MOBILE — CDC §4.5 ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid transparent; transition: box-shadow 200ms ease, border-color 200ms ease; } /* État scrolled : ombre subtile + padding réduit — CDC §4.5 / §5.4 */ .site-header.scrolled { box-shadow: var(--shadow-soft); border-color: var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 68px; padding-block: var(--sp-4); transition: min-height 200ms ease, padding-block 200ms ease; } .site-header.scrolled .header-inner { min-height: 58px; padding-block: var(--sp-3); } /* Wordmark logo provisoire — CDC §4.4 */ .logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-title); font-weight: 800; font-size: 1.5rem; /* 24px */ letter-spacing: -0.03em; color: var(--ink); line-height: 1; white-space: nowrap; } /* --orange-dark et non --orange : 24px gras = "gros texte" AA (3:1) ; #F5711A sur blanc = 2.89:1 (échec), #D95B0A = 3.85:1. */ .logo .logo-ci { color: var(--orange-dark); } .logo .logo-dot { color: var(--orange); } /* --- Navigation (desktop) --------------------------------------------- */ .main-nav { display: none; } /* caché en mobile, affiché ≥1024 */ .nav-list { display: flex; align-items: center; gap: var(--sp-8); } .nav-link { position: relative; display: inline-block; padding: 6px 2px; font-weight: 500; color: var(--ink); transition: color 160ms ease; } /* Soulignement animé — barre orange qui glisse — CDC §5.3 */ .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--orange); border-radius: var(--radius-pill); transform: scaleX(0); transform-origin: left center; transition: transform 220ms var(--ease-out); } .nav-link:hover, .nav-link:focus-visible { color: var(--orange-text); } .nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); } /* Page courante */ .nav-link[aria-current="page"] { color: var(--orange-text); } .nav-link[aria-current="page"]::after { transform: scaleX(1); } .header-cta { display: none; } /* CTA "Nous écrire" — affiché ≥1024 */ /* --- Bouton burger (mobile) ------------------------------------------- */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -8px; border-radius: var(--radius-card); color: var(--ink); z-index: 120; } .nav-toggle__bars { position: relative; width: 24px; height: 16px; } .nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: var(--radius-pill); background: currentColor; transition: transform 250ms var(--ease-out), opacity 200ms ease, top 250ms var(--ease-out); } .nav-toggle__bars span:nth-child(1) { top: 0; } .nav-toggle__bars span:nth-child(2) { top: 7px; } .nav-toggle__bars span:nth-child(3) { top: 14px; } /* Transformation en croix quand le panneau est ouvert (aria-expanded piloté JS) */ .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 7px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); } /* --- Panneau menu plein écran (mobile) — CDC §4.5 --------------------- */ .nav-panel { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; padding: var(--sp-24) var(--pad) var(--sp-12); background: var(--white); transform: translateX(100%); visibility: hidden; transition: transform 250ms var(--ease-out), visibility 0s linear 250ms; overflow-y: auto; } .nav-panel.is-open { transform: translateX(0); visibility: visible; transition: transform 250ms var(--ease-out), visibility 0s; } .nav-panel__list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-8); } .nav-panel__link { display: block; padding: var(--sp-3) 0; font-family: var(--font-title); font-weight: 700; font-size: clamp(1.75rem, 8vw, 2.25rem); letter-spacing: -0.02em; color: var(--ink); transition: color 160ms ease, transform 200ms var(--ease-out); } .nav-panel__link:hover, .nav-panel__link:focus-visible, .nav-panel__link[aria-current="page"] { color: var(--orange-dark); transform: translateX(var(--sp-2)); } .nav-panel__cta { margin-top: auto; } /* Empêche le scroll du body quand le menu est ouvert (classe posée par le JS) */ body.nav-open { overflow: hidden; } @media (min-width: 1024px) { .nav-toggle { display: none; } .main-nav { display: block; } .header-cta { display: inline-flex; } /* Le panneau mobile ne doit jamais s'afficher sur desktop */ .nav-panel { display: none; } } /* ========================================================================== 10. FOOTER — CDC §4.5 ========================================================================== */ .site-footer { background: var(--ink); color: var(--cream); } .footer-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-12); padding-block: var(--sp-16); } .footer-col .logo { color: var(--cream); } .footer-col .logo .logo-ci, .footer-col .logo .logo-dot { color: var(--orange); } .footer-tagline { margin-top: var(--sp-3); font-family: var(--font-title); font-weight: 600; color: var(--white); } .footer-desc { margin-top: var(--sp-3); color: rgba(251, 247, 242, .72); max-width: 40ch; } .footer-col h3 { color: var(--white); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--sp-4); } .footer-nav { display: flex; flex-direction: column; gap: var(--sp-3); } .footer-nav a, .footer-contact a, .footer-contact li { color: rgba(251, 247, 242, .80); transition: color 160ms ease; } .footer-nav a:hover, .footer-contact a:hover { color: var(--orange); } .footer-contact { display: flex; flex-direction: column; gap: var(--sp-3); } .footer-contact li { display: flex; align-items: flex-start; gap: var(--sp-2); } .footer-contact svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--orange); } .footer-socials { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); } .footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .08); color: var(--cream); transition: background-color 160ms ease, color 160ms ease; } .footer-socials a:hover { background: var(--orange); color: var(--white); } .footer-socials svg { width: 20px; height: 20px; } .footer-bottom { padding-block: var(--sp-6); border-top: 1px solid rgba(251, 247, 242, .14); font-size: 0.875rem; color: rgba(251, 247, 242, .60); text-align: center; } .footer-bottom a { color: rgba(251, 247, 242, .80); text-decoration: underline; text-underline-offset: 2px; } .footer-bottom a:hover { color: var(--orange); } @media (min-width: 768px) { .footer-inner { grid-template-columns: 1.4fr 1fr 1.2fr; } } /* ========================================================================== 11. BOUTON WHATSAPP FLOTTANT — CDC §4.5 / §5 ========================================================================== */ .wa-float { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 90; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--whatsapp); color: var(--white); box-shadow: 0 8px 24px rgba(37, 211, 102, .40); /* Caché par défaut — le JS (LOT 4) ajoute .is-visible après 300px de scroll */ opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), background-color 180ms ease; } .wa-float.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; } .wa-float:hover { background: var(--whatsapp-dk); } .wa-float svg { width: 30px; height: 30px; } @media (min-width: 1024px) { .wa-float { right: var(--sp-8); bottom: var(--sp-8); } } /* ========================================================================== 12. BANDEAU CTA ORANGE PLEIN — CDC §4.5 / §6.1(S7) ========================================================================== */ /* Fond --orange-dark (et non --orange) : blanc sur --orange = 2.9:1, sous le seuil AA gros texte (3:1) ; sur --orange-dark = 3.85:1. */ .cta-band { background: var(--orange-dark); color: var(--white); } .cta-band__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); padding-block: var(--sp-16); } .cta-band h2 { color: var(--white); } /* Sur fond orange, l'accent d'un titre passe en blanc (contraste) */ .cta-band .accent { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); text-underline-offset: 4px; } .cta-band p { /* Blanc plein + 20px semibold : qualifie "gros texte" AA (3:1 suffit). */ color: var(--white); max-width: 52ch; font-size: 1.25rem; font-weight: 600; } @media (min-width: 768px) { .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-12); } .cta-band__text { flex: 1; } } /* ========================================================================== 13. CHIFFRES CLÉS (compteurs animés) — CDC §6.1(S2) ========================================================================== */ .stats { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); text-align: center; } .stat__num { display: block; font-family: var(--font-title); font-weight: 800; font-size: clamp(2.5rem, 8vw, 3.75rem); line-height: 1; letter-spacing: -0.03em; color: var(--orange-dark); } .stat__label { margin-top: var(--sp-2); font-weight: 500; color: var(--ink-soft); } @media (min-width: 768px) { .stats { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== 14. PILIERS + GRILLE "POURQUOI" 2×2 + ÉTAPES NUMÉROTÉES ========================================================================== */ /* --- Cards piliers (accueil §6.1 S4) : réutilise le motif card-profil --- */ .pillar { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); transition: transform 200ms var(--ease-out), box-shadow 200ms ease, border-color 200ms ease; } .pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(245, 113, 26, .35); } .pillar__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: var(--radius-pill); background: var(--orange-soft); color: var(--orange-dark); } .pillar__icon svg { width: 30px; height: 30px; } .pillar h3 { font-size: 1.375rem; } .pillar p { color: var(--ink-soft); flex: 1; } .pillar__footer { margin-top: auto; } /* --- Grille "Pourquoi Igi-ci" 2×2 (§6.1 S5) --------------------------- */ .why-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); } .why-item { display: flex; gap: var(--sp-4); } .why-item__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--orange-soft); color: var(--orange-dark); } .why-item__icon svg { width: 24px; height: 24px; } .why-item h3 { font-size: 1.125rem; margin-bottom: var(--sp-2); } .why-item p { color: var(--ink-soft); } @media (min-width: 768px) { .why-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-12); } /* Variante 3 items sur une ligne (Communauté des Entrepreneurs) */ .why-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); } } /* --- Étapes numérotées "Comment ça marche" (§6.3 / §6.4) -------------- */ .steps { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); counter-reset: step; } .step { position: relative; display: flex; flex-direction: column; align-items: center; /* numéro + textes centrés (demande client 07/07) */ text-align: center; gap: var(--sp-3); } .step__num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--orange); color: var(--white); font-family: var(--font-title); font-weight: 800; font-size: 1.25rem; box-shadow: var(--shadow-soft); } .step h3 { font-size: 1.125rem; } .step p { color: var(--ink-soft); } @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } /* Trait de liaison entre les étapes */ .step:not(:last-child)::after { content: ""; position: absolute; top: 24px; /* du bord du numéro centré (50% + rayon + marge) au numéro suivant */ left: calc(50% + 24px + var(--sp-2)); right: calc(-50% - var(--sp-8) + 24px + var(--sp-2)); height: 2px; background: repeating-linear-gradient( to right, var(--orange) 0 8px, transparent 8px 14px); opacity: .5; } } /* ========================================================================== 15. HERO — signature accueil (§5.2) + heros courts (pages internes) ========================================================================== */ /* --- Hero signature (accueil) ----------------------------------------- */ .hero { position: relative; overflow: hidden; background: var(--cream); } .hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); padding-block: var(--sp-16) var(--sp-24); } .hero .eyebrow.badge { color: var(--orange-text); background: var(--orange-soft); padding: 7px 16px; } /* Titre ligne par ligne (clip + translate) — CDC §5.2 */ .hero__title { max-width: 16ch; } .hero__title .line { display: block; overflow: hidden; /* masque pour l'effet clip */ } .hero__title .line > span { display: block; } .hero__sub { max-width: 54ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); } /* Forme décorative orange (SVG inline dans le HTML) — CDC §5.2 */ .hero-shape { position: absolute; z-index: 1; pointer-events: none; top: -8%; right: -18%; width: min(70vw, 460px); color: var(--orange); opacity: .16; animation: floatShape 8s ease-in-out infinite alternate; } .hero-shape--soft { color: var(--orange); opacity: .10; } @keyframes floatShape { from { transform: translateY(0); } to { transform: translateY(10px); } } @media (min-width: 1024px) { .hero__inner { max-width: 62%; } .hero-shape { top: -6%; right: -6%; width: min(46vw, 560px); opacity: .18; } } /* --- Animations d'entrée du hero (jouées uniquement si JS actif) -------- html.js posé par main.js (LOT 4). Sans JS → hero visible immédiatement. */ @keyframes lineReveal { from { transform: translateY(110%); } to { transform: translateY(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } html.js .hero__title .line > span { transform: translateY(110%); animation: lineReveal 500ms var(--ease-out) forwards; } html.js .hero__title .line:nth-child(1) > span { animation-delay: 100ms; } html.js .hero__title .line:nth-child(2) > span { animation-delay: 220ms; } /* stagger 120ms */ html.js .hero__title .line:nth-child(3) > span { animation-delay: 340ms; } html.js .hero__title .line:nth-child(4) > span { animation-delay: 460ms; } html.js .hero__eyebrow { opacity: 0; animation: fadeUp 400ms var(--ease-out) forwards; } html.js .hero__sub { opacity: 0; animation: fadeUp 500ms var(--ease-out) 480ms forwards; } html.js .hero__cta { opacity: 0; animation: fadeUp 500ms var(--ease-out) 600ms forwards; } /* --- Hero court (pages internes) -------------------------------------- */ .hero-mini { background: var(--orange-soft); } .hero-mini__inner { display: flex; flex-direction: column; gap: var(--sp-4); padding-block: var(--sp-12); max-width: 60ch; } @media (min-width: 1024px) { .hero-mini__inner { padding-block: var(--sp-16); } } /* ========================================================================== 16. REVEAL GÉNÉRIQUES AU SCROLL — CDC §5.1 État masqué appliqué UNIQUEMENT si html.js présent (site lisible sans JS). Le JS (LOT 4, IntersectionObserver) ajoute .is-revealed. ========================================================================== */ html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); } html.js .reveal.is-revealed { opacity: 1; transform: none; } /* Stagger 80ms entre cards d'une même grille (data-index posé par le JS, ou fallback via nth-child) — CDC §5.1 */ html.js .reveal[style*="--i"] { transition-delay: calc(var(--i) * 80ms); } html.js .grid > .reveal:nth-child(1) { transition-delay: 0ms; } html.js .grid > .reveal:nth-child(2) { transition-delay: 80ms; } html.js .grid > .reveal:nth-child(3) { transition-delay: 160ms; } html.js .grid > .reveal:nth-child(4) { transition-delay: 240ms; } /* ========================================================================== 17. FOCUS RING GLOBAL — CDC §9 (visible sur TOUT élément interactif) ========================================================================== */ :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; } /* Sur fonds sombres/orange, ring blanc pour rester visible */ .cta-band :focus-visible, .site-footer :focus-visible, .wa-float:focus-visible, .btn--whatsapp:focus-visible, .btn--primary:focus-visible { outline-color: var(--white); outline-offset: 3px; } /* Le champ de formulaire gère son focus via border+box-shadow (pas de double ring) */ .form-control:focus-visible { outline: none; } /* ========================================================================== 18. prefers-reduced-motion — CDC §5 (tout désactivé, opacité instantanée) ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; } /* Hero et reveals : visibles immédiatement, aucune transformation */ html.js .hero__title .line > span, html.js .hero__eyebrow, html.js .hero__sub, html.js .hero__cta, html.js .reveal { opacity: 1 !important; transform: none !important; } .hero-shape { animation: none !important; } /* Pas de lift au hover */ .btn:hover, .card-formation:hover, .card-profil:hover, .pillar:hover { transform: none !important; } } /* ========================================================================== 19. PLACEHOLDER VISUEL FORMATION — ajout exceptionnel LOT 2 (index.html) Flyers IA / vente pas encore fournis par la cliente (CDC §10). En attendant, wordmark centré sur fond --orange-soft, ratio 16/10 hérité de .card-formation__media (pas de layout shift au remplacement par le WebP définitif). À supprimer dès que les flyers sont intégrés. ========================================================================== */ .card-formation__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-title); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--orange-dark); background: var(--orange-soft); } /* ========================================================================== 20. CHAMP FICHIER — pièce jointe PDF optionnelle (fonctionnalité upload) Champ "Joindre un dossier (PDF)" ajouté en fin des 4 formulaires (form-inscription, form-profil, form-projet, form-rdv). Masqué en JS tant que UPLOAD_ENDPOINT n'est pas renseigné (voir js/main.js) — le site reste 100% fonctionnel sans le service d'upload. ========================================================================== */ .form-field--upload input[type="file"].form-control { padding: 10px 16px; cursor: pointer; } /* Bouton natif "Choisir un fichier" habillé aux couleurs du site */ .form-field--upload input[type="file"].form-control::file-selector-button { margin-right: var(--sp-4); padding: 8px 18px; border: none; border-radius: 999px; background: var(--orange-soft); color: var(--orange-dark); font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: background 160ms ease; } .form-field--upload input[type="file"].form-control:hover::file-selector-button { background: #FCE0C7; } .form-field--upload input[type="file"].form-control:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* Pendant l'upload : bouton "Envoi du dossier…" désactivé (état disabled déjà géré par .btn:disabled) */ .form-field--upload input[type="file"].form-control:disabled { opacity: .6; cursor: not-allowed; } /* ========================================================================== 21. HEROS AVEC PHOTO (évolution client 07/07 — LOT 6) Accueil : photo dans le blob (SVG clipPath, inline dans index.html). Pages internes : photo de fond + voile encre pour garder le texte lisible (les photos sources sont floutées à la conversion : textes incrustés noyés). ========================================================================== */ .hero-mini--photo { position: relative; background-color: var(--ink); background-size: cover; background-position: center; } .hero-mini--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(28, 20, 16, .90) 25%, rgba(28, 20, 16, .64)); } .hero-mini--photo .hero-mini__inner { position: relative; } /* Heros photo plus hauts (demande client 07/07) : la photo respire, le contenu reste centré verticalement. */ .hero-mini--photo { display: flex; align-items: center; min-height: 360px; } @media (min-width: 1024px) { .hero-mini--photo { min-height: 480px; } } .hero-mini--photo h1 { color: var(--white); } .hero-mini--photo .lead { color: var(--white); } /* Mot-clé accent : orange plein, lisible sur le voile encre (gros texte) */ .hero-mini--photo .accent { color: var(--orange); } .hero-mini--formations { background-image: url("../assets/img/hero-formations.webp"); } .hero-mini--emploi { background-image: url("../assets/img/hero-emploi.webp"); } .hero-mini--projet { background-image: url("../assets/img/hero-projet.webp"); } .hero-mini--contact { background-image: url("../assets/img/hero-contact.webp"); } /* Blob avec photo (accueil) : le SVG reprend sa pleine opacité, la douceur est gérée à l'intérieur (fond orange .18 + voile orange .16 sur l'image). */ .hero-shape.hero-shape--photo { opacity: 1; } /* Avec photo opaque, le blob ne doit plus passer sous le texte du hero. */ .hero-shape.hero-shape--photo { width: min(56vw, 340px); top: -4%; right: -16%; } @media (min-width: 1024px) { .hero-shape.hero-shape--photo { width: min(33vw, 440px); right: -5%; top: 3%; } } /* Hero accueil en photo plein fond (demande client 07/07) : le blob photo est retiré, l'image couvre toute la section sous un voile encre. */ .hero--photo { background: var(--ink) url("../assets/img/hero-accueil.webp") center 55% / cover no-repeat; } .hero--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(28, 20, 16, .88) 30%, rgba(28, 20, 16, .55)); } .hero--photo .hero__inner { position: relative; } .hero--photo h1, .hero--photo .hero__sub { color: var(--white); } .hero--photo .accent { color: var(--orange); } /* Marque SVG du logo (client, vectorisée) — règle manquante au premier passage : sans taille explicite, le reset la réduisait à zéro. */ .logo-mark { width: 36px; height: 36px; flex-shrink: 0; } .site-footer .logo-mark { width: 32px; height: 32px; }