/* ══════════════════════════════════════════════════════════════════════════ PAGES PUBLIQUES — socle commun : carrieres.php · actualite.php · formations.php Les trois pages décrivaient chacune leur propre hero, leurs propres cartes et leur propre échelle de gris, en couleurs écrites en dur : #9ca3af pour le texte secondaire (2,54:1 sur blanc — sous le minimum WCAG AA de 4,5:1), #e67e22, #3498db et #27ae60 pour des badges, aucune de ces trois couleurs n'existant ailleurs sur le site. Ce fichier remplace cet empilement. ── Sur la palette ────────────────────────────────────────────────────────── Les NOMS de jetons sont ceux demandés ; les VALEURS sont celles de la charte KACEL (#4B0082 / #6A5ACD / #9370DB), et non le bleu marine #1e3a8a du brief. L'en-tête, la navigation et le pied de page — partagés par tout le site — sont indigo : trois pages bleues sous un en-tête violet auraient produit une rupture visuelle à chaque défilement. Basculer en bleu marine reste un changement de trois lignes, ci-dessous. ── Sur la portée ─────────────────────────────────────────────────────────── Tout est préfixé `.kc-page`, classe posée sur le des trois pages. `.formation-card` existe déjà dans index.css pour l'accueil : sans cette portée, refondre les formations aurait silencieusement redessiné la page d'accueil. ══════════════════════════════════════════════════════════════════════════ */ .kc-page { /* ── Couleurs ── */ --color-primary: #4B0082; /* indigo — couleur principale du site */ --color-primary-lt: #6A5ACD; /* ardoise violette — survol, accents */ --color-accent: #9370DB; /* mauve — accents secondaires */ --color-success: #16a34a; --color-danger: #dc2626; --color-warning: #b45309; /* ambre foncé : #f59e0b tombe à 2,15:1 */ --color-neutral-50: #f8fafc; --color-neutral-100: #f1f5f9; --color-neutral-200: #e2e8f0; --color-neutral-600: #475569; --color-neutral-800: #1e293b; --color-text: #1e293b; /* 14,7:1 sur blanc */ --color-text-muted: #64748b; /* 4,76:1 — remplace #9ca3af, à 2,54:1 */ /* ── Formes ── */ --radius-card: 12px; --shadow-card: 0 2px 12px rgba(0, 0, 0, .07); --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, .10); --transition: .2s ease; font-feature-settings: "kern" 1; } /* ══ Hero de page intérieure ═══════════════════════════════════════════════ Un hero de page intérieure n'a rien à annoncer qui vaille un demi-écran. Les trois pages en avaient un de 480 px (actualité), 420 px (formations) et 340 px (carrières), les deux premiers portant une photo de fond tirée en HTTP direct de media.istockphoto.com — une vignette de 612 px étirée en pleine largeur, non licenciée, et hors de tout contrôle. Le dégradé la remplace : rien à télécharger, rien à casser. */ .kc-page .page-hero { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; padding: 64px 0; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-lt) 100%); color: #fff; text-align: center; overflow: hidden; } /* Trame discrète, en SVG intégré : aucune requête réseau. */ .kc-page .page-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.045'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } .kc-page .page-hero > * { position: relative; z-index: 1; width: 100%; } .kc-page .page-hero h1 { margin: 0 0 12px; color: #fff; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .kc-page .page-hero p { max-width: 560px; margin: 0 auto; color: #fff; font-size: 1.1rem; line-height: 1.6; opacity: .85; } .kc-page .page-hero .page-hero-fil { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 5px 16px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 40px; background: rgba(255, 255, 255, .13); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } @media (max-width: 768px) { .kc-page .page-hero { min-height: 220px; padding: 40px 0; } .kc-page .page-hero p { font-size: 1rem; } } /* ══ Fil d'Ariane ══════════════════════════════════════════════════════════ Sorti du hero : il y était en blanc sur image de fond, donc au contraste imprévisible selon la zone de la photo. Sur fond clair, il est lisible. */ .kc-page .kc-fil { padding: 14px 0; border-bottom: 1px solid var(--color-neutral-200); background: var(--color-neutral-50); font-size: .8rem; color: var(--color-text-muted); } .kc-page .kc-fil a { color: var(--color-primary); font-weight: 500; text-decoration: none; } .kc-page .kc-fil a:hover { text-decoration: underline; } .kc-page .kc-fil span { margin: 0 6px; } .kc-page .kc-fil span[aria-current] { margin: 0; color: var(--color-text); } /* ══ Grilles ═══════════════════════════════════════════════════════════════ */ .kc-page .offres-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .kc-page .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .kc-page .formations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; } @media (max-width: 1024px) { .kc-page .articles-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .kc-page .articles-grid { grid-template-columns: 1fr; } .kc-page .formations-grid { grid-template-columns: 1fr; } } /* ══ Socle commun aux trois types de carte ═════════════════════════════════ */ .kc-page .offre-card, .kc-page .article-card, .kc-page .formation-card { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform var(--transition), box-shadow var(--transition); } .kc-page .offre-card:hover, .kc-page .article-card:hover, .kc-page .formation-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); } /* ══ Carrières — offres ════════════════════════════════════════════════════ */ .kc-page .offre-card { padding: 28px 32px; border-left: 4px solid var(--color-primary-lt); } .kc-page .offre-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .kc-page .offre-type { padding: 3px 10px; border-radius: 20px; background: var(--color-neutral-100); color: var(--color-primary); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .kc-page .offre-date, .kc-page .offre-ref { color: var(--color-text-muted); font-size: .8rem; } .kc-page .offre-titre { margin: 0 0 8px; color: var(--color-text); font-size: 1.2rem; font-weight: 700; line-height: 1.35; } .kc-page .offre-lieu { display: flex; align-items: center; gap: 5px; margin: 0 0 12px; color: var(--color-text-muted); font-size: .875rem; } .kc-page .offre-desc { margin: 0 0 20px; color: var(--color-neutral-600); font-size: .9rem; line-height: 1.6; } .kc-page .offre-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* ══ Actualités — articles ═════════════════════════════════════════════════ */ .kc-page .article-card { display: flex; flex-direction: column; overflow: hidden; } .kc-page .article-img { position: relative; background: var(--color-neutral-100); } .kc-page .article-img img { display: block; width: 100%; height: 200px; object-fit: cover; } .kc-page .article-img-vide { display: flex; align-items: center; justify-content: center; height: 200px; background: linear-gradient(135deg, var(--color-neutral-100) 0%, var(--color-neutral-200) 100%); color: var(--color-primary-lt); font-size: 32px; } .kc-page .article-body { display: flex; flex: 1; flex-direction: column; padding: 20px; } .kc-page .article-cat { display: block; margin-bottom: 8px; color: var(--color-primary-lt); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .kc-page .article-titre { margin: 0 0 10px; font-size: 1rem; font-weight: 700; line-height: 1.4; } .kc-page .article-titre a, .kc-page .article-titre button { padding: 0; border: 0; background: none; color: var(--color-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .kc-page .article-titre a:hover, .kc-page .article-titre button:hover { color: var(--color-primary-lt); } .kc-page .article-extrait { flex: 1; margin: 0; color: var(--color-text-muted); font-size: .875rem; line-height: 1.6; } .kc-page .article-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-neutral-200); color: var(--color-text-muted); font-size: .8rem; } .kc-page .lire-plus { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--color-primary-lt); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .kc-page .lire-plus:hover { color: var(--color-primary); } /* ══ Formations ════════════════════════════════════════════════════════════ */ .kc-page .formation-card { display: flex; flex-direction: column; padding: 24px; } .kc-page .formation-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .kc-page .formation-domaine { color: var(--color-primary); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .kc-page .formation-prix { flex-shrink: 0; padding: 2px 10px; border-radius: 20px; background: var(--color-neutral-100); color: var(--color-primary); font-size: .72rem; font-weight: 700; white-space: nowrap; } .kc-page .formation-titre { margin: 0 0 10px; color: var(--color-text); font-size: 1.05rem; font-weight: 700; line-height: 1.4; } .kc-page .formation-desc { flex: 1; margin: 0 0 16px; color: var(--color-text-muted); font-size: .875rem; line-height: 1.6; } .kc-page .formation-meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; } .kc-page .formation-meta li { display: flex; align-items: center; gap: 5px; color: var(--color-text-muted); font-size: .8rem; } /* ══ Boutons ═══════════════════════════════════════════════════════════════ 48 px de haut : cible tactile WCAG 2.5.8. Les boutons faisaient 34 à 40 px. */ .kc-page .btn-postuler, .kc-page .btn-formation, .kc-page .btn-secondaire { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 24px; border-radius: 8px; font-size: .875rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--transition), color var(--transition), border-color var(--transition); } .kc-page .btn-postuler { border: 1.5px solid var(--color-primary); background: var(--color-primary); color: #fff; } .kc-page .btn-postuler:hover { border-color: var(--color-primary-lt); background: var(--color-primary-lt); color: #fff; } .kc-page .btn-secondaire { border: 1.5px solid var(--color-neutral-200); background: #fff; color: var(--color-primary); } .kc-page .btn-secondaire:hover { border-color: var(--color-primary); background: var(--color-neutral-50); } .kc-page .btn-formation { width: 100%; margin-top: auto; border: 1.5px solid var(--color-primary); background: var(--color-neutral-100); color: var(--color-primary); } .kc-page .btn-formation:hover { background: var(--color-primary); color: #fff; } /* ══ Badges de statut ══════════════════════════════════════════════════════ Les couleurs vives sur blanc — #e67e22 (2,85:1), #27ae60 (2,87:1), #3498db (3,15:1) — échouaient toutes en AA. Fond teinté, texte foncé. */ .kc-page .kc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap; } .kc-page .kc-badge-succes { background: #dcfce7; color: #166534; } .kc-page .kc-badge-attente { background: #fef9c3; color: #854d0e; } .kc-page .kc-badge-info { background: #ede9fe; color: #5b21b6; } .kc-page .kc-badge-neutre { background: var(--color-neutral-100); color: var(--color-neutral-600); } .kc-page .kc-badge-alerte { background: #fee2e2; color: #991b1b; } /* ══ Saisie ════════════════════════════════════════════════════════════════ 16 px minimum : en dessous, Safari iOS zoome au premier appui et ne dézoome jamais. Les formulaires de candidature et de demande étaient en 13–15 px. */ /* La spécificité est délibérément haute — `body.kc-page` plus deux `:not()` — parce que les règles concurrentes vivent dans un