1638 lines
55 KiB
HTML
1638 lines
55 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Mercredi 3</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
:root {
|
||
--syne: 'Nunito', sans-serif;
|
||
--dm: 'DM Sans', sans-serif;
|
||
|
||
/* Cool dark slate text colors */
|
||
--ink: #0f172a;
|
||
--ink2: #334155;
|
||
--ink3: #475569;
|
||
--muted: #94a3b8;
|
||
|
||
/* Core primary violet theme */
|
||
--accent: #5b5fc7;
|
||
--accent2: #7c7ff0;
|
||
--accent-light: #eeeffe;
|
||
|
||
/* Accent Dimensions */
|
||
--teal: #0d9e75;
|
||
--teal-light: #e1f5ee;
|
||
--amber: #b87a10;
|
||
--amber-light: #faeeda;
|
||
--coral: #c44a20;
|
||
--coral-light: #faece7;
|
||
--rose: #b81d5b;
|
||
--rose-light: #fdf2f7;
|
||
|
||
/* Borders & surfaces */
|
||
--border: rgba(91, 95, 199, 0.12);
|
||
--surface: #f8fafc;
|
||
--white: #ffffff;
|
||
|
||
/* Premium shadows */
|
||
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
|
||
--shadow-md: 0 4px 6px -1px rgba(91, 95, 199, 0.05), 0 2px 4px -2px rgba(91, 95, 199, 0.05);
|
||
--shadow-lg: 0 10px 25px -3px rgba(91, 95, 199, 0.08), 0 4px 12px -4px rgba(91, 95, 199, 0.08);
|
||
}
|
||
|
||
body {
|
||
background-color: #f8fafc;
|
||
background-image:
|
||
radial-gradient(at 0% 0%, hsla(247, 80%, 62%, 0.03) 0px, transparent 50%),
|
||
radial-gradient(at 100% 0%, hsla(162, 75%, 34%, 0.01) 0px, transparent 50%),
|
||
radial-gradient(at 50% 100%, hsla(36, 90%, 45%, 0.01) 0px, transparent 50%);
|
||
background-attachment: fixed;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.course-wrap {
|
||
font-family: var(--dm);
|
||
color: var(--ink);
|
||
max-width: 880px;
|
||
margin: 0 auto;
|
||
padding: 2.5rem 24px 4rem;
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero {
|
||
background: linear-gradient(135deg, #13132b 0%, #20204d 50%, #2f2f70 100%);
|
||
border-radius: 18px;
|
||
padding: 3rem 3rem 2.5rem;
|
||
margin-bottom: 2.5rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
right: -50px;
|
||
top: -50px;
|
||
width: 250px;
|
||
height: 250px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(124, 127, 240, 0.25) 0%, rgba(91, 95, 199, 0) 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 80px;
|
||
bottom: -80px;
|
||
width: 180px;
|
||
height: 180px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(124, 127, 240, 0.15) 0%, rgba(124, 127, 240, 0) 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-block;
|
||
background: rgba(91, 95, 199, 0.25);
|
||
color: #cbd5e1;
|
||
font-family: var(--syne);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
padding: 6px 14px;
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(124, 127, 240, 0.2);
|
||
margin-bottom: 1.25rem;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.hero h1 {
|
||
font-family: var(--syne);
|
||
font-size: 32px;
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
line-height: 1.25;
|
||
margin-bottom: 0.75rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.hero-sub {
|
||
font-size: 16px;
|
||
color: #94a3b8;
|
||
font-weight: 400;
|
||
margin-bottom: 2rem;
|
||
max-width: 90%;
|
||
}
|
||
|
||
.hero-meta {
|
||
display: flex;
|
||
gap: 2rem;
|
||
flex-wrap: wrap;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||
padding-top: 1.25rem;
|
||
}
|
||
|
||
.hero-meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 13.5px;
|
||
color: #cbd5e1;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.hero-meta-item i {
|
||
font-size: 16px;
|
||
color: var(--accent2);
|
||
}
|
||
|
||
/* Section Labels */
|
||
.section-label {
|
||
font-family: var(--syne);
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin: 2.5rem 0 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.section-label::after {
|
||
content: "";
|
||
flex: 1;
|
||
height: 1px;
|
||
background: var(--border);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* Objectives Card */
|
||
.objectives-card {
|
||
background: var(--accent-light);
|
||
border: 1px solid rgba(91, 95, 199, 0.18);
|
||
border-radius: 16px;
|
||
padding: 1.75rem 2rem;
|
||
margin-bottom: 2rem;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.objectives-card h2 {
|
||
font-family: var(--syne);
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
color: var(--accent);
|
||
margin-bottom: 1.25rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.objectives-card h2 i {
|
||
font-size: 18px;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.obj-list {
|
||
list-style: none;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.obj-list li {
|
||
font-size: 14px;
|
||
color: var(--ink2);
|
||
font-weight: 400;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.obj-list li::before {
|
||
content: '✓';
|
||
color: var(--accent);
|
||
font-weight: 900;
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
/* Prep Card */
|
||
.prep-card {
|
||
background: var(--amber-light);
|
||
border: 1px solid rgba(184, 122, 16, 0.15);
|
||
border-left: 4px solid var(--amber);
|
||
border-radius: 0 16px 16px 0;
|
||
padding: 1.5rem 2rem;
|
||
margin-bottom: 2.5rem;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.prep-card h2 {
|
||
font-family: var(--syne);
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
color: var(--amber);
|
||
margin-bottom: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.prep-card h2 i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.prep-card ul {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.prep-card ul li {
|
||
font-size: 14px;
|
||
color: #5a3a08;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.prep-card ul li::before {
|
||
content: '▸';
|
||
color: var(--amber);
|
||
font-weight: 900;
|
||
flex-shrink: 0;
|
||
font-size: 16px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
/* Points of Vigilance Card specific to mercredi3 */
|
||
.vigil-card {
|
||
background: var(--coral-light);
|
||
border: 1px solid rgba(196, 74, 32, 0.15);
|
||
border-left: 4px solid var(--coral);
|
||
border-radius: 0 16px 16px 0;
|
||
padding: 1.5rem 2rem;
|
||
margin-bottom: 2.5rem;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.vigil-card h2 {
|
||
font-family: var(--syne);
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
color: var(--coral);
|
||
margin-bottom: 1.25rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.vigil-card h2 i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.vigil-items {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.vi {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.vi-tag {
|
||
font-family: var(--syne);
|
||
font-size: 10px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
background: var(--coral-light);
|
||
color: var(--coral);
|
||
border: 1px solid rgba(196, 74, 32, 0.2);
|
||
border-radius: 4px;
|
||
padding: 2px 8px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.vi-text {
|
||
font-size: 14px;
|
||
color: #5a2010;
|
||
}
|
||
|
||
/* Timeline */
|
||
.timeline {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.seq-block {
|
||
display: grid;
|
||
grid-template-columns: 80px 1fr;
|
||
position: relative;
|
||
}
|
||
|
||
.seq-block:not(:last-child) .seq-line::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 48px;
|
||
bottom: -1px;
|
||
width: 2px;
|
||
background: var(--border);
|
||
transform: translateX(-50%);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.seq-time {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-top: 14px;
|
||
position: relative;
|
||
}
|
||
|
||
.seq-line {
|
||
position: relative;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.seq-dot {
|
||
width: 38px;
|
||
height: 38px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
font-size: 16px;
|
||
z-index: 1;
|
||
position: relative;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
.seq-duration {
|
||
font-family: var(--syne);
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
color: var(--muted);
|
||
margin-top: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.seq-content {
|
||
padding: 8px 0 24px 20px;
|
||
}
|
||
|
||
/* Sequence Cards */
|
||
.seq-card {
|
||
background: var(--white);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 1.5rem;
|
||
cursor: pointer;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.seq-card:hover {
|
||
border-color: var(--accent2);
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.seq-card.active {
|
||
border-color: var(--accent);
|
||
box-shadow: var(--shadow-lg), 0 0 0 3px rgba(91, 95, 199, 0.08);
|
||
}
|
||
|
||
.seq-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
}
|
||
|
||
.seq-num {
|
||
font-family: var(--syne);
|
||
font-size: 10px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.seq-title {
|
||
font-family: var(--syne);
|
||
font-size: 16px;
|
||
font-weight: 800;
|
||
color: var(--ink);
|
||
line-height: 1.35;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.seq-tag {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.tag-exchange {
|
||
background: var(--teal-light);
|
||
color: var(--teal);
|
||
}
|
||
|
||
.tag-analyse {
|
||
background: var(--accent-light);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.tag-atelier {
|
||
background: var(--coral-light);
|
||
color: var(--coral);
|
||
}
|
||
|
||
.tag-roleplay {
|
||
background: var(--rose-light);
|
||
color: var(--rose);
|
||
}
|
||
|
||
.tag-consigne {
|
||
background: var(--teal-light);
|
||
color: var(--teal);
|
||
}
|
||
|
||
.tag-pause {
|
||
background: #f1f5f9;
|
||
color: var(--ink3);
|
||
}
|
||
|
||
.seq-toggle {
|
||
font-size: 18px;
|
||
color: var(--muted);
|
||
transition: transform 0.25s ease, color 0.2s;
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.seq-card:hover .seq-toggle {
|
||
color: var(--ink2);
|
||
}
|
||
|
||
.seq-card.active .seq-toggle {
|
||
transform: rotate(180deg);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.seq-details {
|
||
display: none;
|
||
margin-top: 1.25rem;
|
||
padding-top: 1.25rem;
|
||
border-top: 1px solid var(--border);
|
||
animation: slideDown 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes slideDown {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.seq-card.active .seq-details {
|
||
display: block;
|
||
}
|
||
|
||
.detail-section {
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.detail-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.detail-label {
|
||
font-family: var(--syne);
|
||
font-size: 10px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.detail-text {
|
||
font-size: 14px;
|
||
color: var(--ink2);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.detail-list {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.detail-list li {
|
||
font-size: 13.5px;
|
||
color: var(--ink2);
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.detail-list li::before {
|
||
content: '→';
|
||
color: var(--accent);
|
||
flex-shrink: 0;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Tips & Atelier Boxes */
|
||
.tips-box {
|
||
background: var(--teal-light);
|
||
border: 1px solid rgba(13, 158, 117, 0.15);
|
||
border-radius: 12px;
|
||
padding: 1rem 1.25rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.tips-box .tips-title {
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
font-family: var(--syne);
|
||
color: var(--teal);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.tips-box ul {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.tips-box ul li {
|
||
font-size: 13px;
|
||
color: #0b4f3b;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.tips-box ul li::before {
|
||
content: '●';
|
||
color: var(--teal);
|
||
font-size: 8px;
|
||
flex-shrink: 0;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.atelier-box {
|
||
background: var(--coral-light);
|
||
border: 1px solid rgba(196, 74, 32, 0.15);
|
||
border-radius: 12px;
|
||
padding: 1rem 1.25rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.atelier-box .atelier-title {
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
font-family: var(--syne);
|
||
color: var(--coral);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.atelier-box p {
|
||
font-size: 13.5px;
|
||
color: #5a2010;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
/* Additional Premium Box Styles matching the custom palette */
|
||
.warn-box {
|
||
background: var(--amber-light);
|
||
border: 1px solid rgba(184, 122, 16, 0.15);
|
||
border-radius: 12px;
|
||
padding: 1rem 1.25rem;
|
||
margin-top: 1rem;
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.warn-box i {
|
||
color: var(--amber);
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.warn-box p {
|
||
font-size: 13px;
|
||
color: #5a3a08;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.warn-box strong {
|
||
font-weight: 800;
|
||
color: #3b2402;
|
||
}
|
||
|
||
.cert-box {
|
||
background: var(--teal-light);
|
||
border: 1px solid rgba(13, 158, 117, 0.15);
|
||
border-radius: 12px;
|
||
padding: 1rem 1.25rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.cert-title {
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
font-family: var(--syne);
|
||
color: var(--teal);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.cert-box p {
|
||
font-size: 13.5px;
|
||
color: #0b4f3b;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
/* Pause Card */
|
||
.pause-card {
|
||
border: 1px dashed rgba(122, 122, 154, 0.4);
|
||
background: var(--white);
|
||
border-radius: 16px;
|
||
padding: 1rem 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.pause-card span {
|
||
font-size: 13.5px;
|
||
color: var(--muted);
|
||
font-style: italic;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Roleplay (Jeu de rôle) items specific to mercredi3 */
|
||
.jr-box {
|
||
background: var(--rose-light);
|
||
border: 1px solid rgba(184, 29, 91, 0.15);
|
||
border-radius: 12px;
|
||
padding: 1.25rem 1.5rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.jr-title {
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
font-family: var(--syne);
|
||
color: var(--rose);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.jr-scenario {
|
||
background: var(--white);
|
||
border: 1px solid rgba(184, 29, 91, 0.12);
|
||
border-radius: 8px;
|
||
padding: 12px 14px;
|
||
margin-bottom: 10px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.jr-scenario:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.jr-s-tag {
|
||
font-family: var(--syne);
|
||
font-size: 10px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
color: var(--rose);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.jr-s-q {
|
||
font-size: 13.5px;
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
line-height: 1.5;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.jr-s-r {
|
||
font-size: 13px;
|
||
color: var(--ink2);
|
||
line-height: 1.6;
|
||
border-top: 1px dashed rgba(184, 29, 91, 0.15);
|
||
padding-top: 8px;
|
||
}
|
||
|
||
.jr-s-r strong {
|
||
color: var(--rose);
|
||
font-weight: 800;
|
||
}
|
||
|
||
/* Navigation Buttons */
|
||
.footer-nav {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
.nav-btn {
|
||
flex: 1;
|
||
background: var(--white);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
padding: 1.25rem;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.nav-btn:hover {
|
||
border-color: var(--accent);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 20px rgba(91, 95, 199, 0.1);
|
||
}
|
||
|
||
.nav-btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.nb-label {
|
||
font-size: 10px;
|
||
font-family: var(--syne);
|
||
font-weight: 800;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
margin-bottom: 3px;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.nb-title {
|
||
font-family: var(--syne);
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
color: var(--ink);
|
||
line-height: 1.35;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.nb-icon {
|
||
font-size: 22px;
|
||
color: var(--accent);
|
||
transition: transform 0.25s ease;
|
||
}
|
||
|
||
.nav-btn:hover .nb-icon {
|
||
transform: translateX(3px);
|
||
}
|
||
|
||
/* Progress Bar */
|
||
.progress-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 2.5rem;
|
||
background: var(--white);
|
||
padding: 12px 18px;
|
||
border-radius: 12px;
|
||
border: 1px solid var(--border);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.prog-step {
|
||
flex: 1;
|
||
height: 8px;
|
||
border-radius: 4px;
|
||
background: #e2e8f0;
|
||
cursor: pointer;
|
||
position: relative;
|
||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
outline: none;
|
||
}
|
||
|
||
.prog-step.done {
|
||
background: linear-gradient(90deg, var(--accent2) 0%, var(--accent) 100%);
|
||
box-shadow: 0 1px 3px rgba(91, 95, 199, 0.2);
|
||
}
|
||
|
||
.prog-step.current {
|
||
background: linear-gradient(90deg, var(--accent2) 0%, var(--accent) 100%);
|
||
box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--accent);
|
||
z-index: 2;
|
||
}
|
||
|
||
.prog-step:hover {
|
||
transform: scaleY(1.4);
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.prog-step:active {
|
||
transform: scaleY(1.1);
|
||
}
|
||
|
||
.prog-step.current:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.prog-step.current:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.prog-step:focus-visible {
|
||
box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--accent);
|
||
}
|
||
|
||
/* Tooltip styles */
|
||
.prog-step::after {
|
||
content: attr(data-tooltip);
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%) translateY(4px);
|
||
background: var(--ink);
|
||
color: var(--white);
|
||
padding: 6px 12px;
|
||
border-radius: 6px;
|
||
font-size: 11px;
|
||
font-family: var(--syne);
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: var(--shadow-md);
|
||
z-index: 10;
|
||
}
|
||
|
||
.prog-step::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 14px;
|
||
left: 50%;
|
||
transform: translateX(-50%) translateY(4px);
|
||
border-width: 6px 6px 0;
|
||
border-style: solid;
|
||
border-color: var(--ink) transparent;
|
||
display: block;
|
||
width: 0;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
z-index: 10;
|
||
}
|
||
|
||
.prog-step:hover::after,
|
||
.prog-step:focus-visible::after {
|
||
opacity: 1;
|
||
transform: translateX(-50%) translateY(0);
|
||
}
|
||
|
||
.prog-step:hover::before,
|
||
.prog-step:focus-visible::before {
|
||
opacity: 1;
|
||
transform: translateX(-50%) translateY(0);
|
||
}
|
||
|
||
.prog-label {
|
||
font-size: 11px;
|
||
color: var(--ink3);
|
||
font-family: var(--syne);
|
||
font-weight: 800;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
margin-left: 6px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Responsive Design */
|
||
@media (max-width: 860px) {
|
||
.course-wrap {
|
||
padding: 1.5rem 16px 3rem;
|
||
}
|
||
|
||
.hero {
|
||
padding: 2rem 2rem 1.75rem;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 26px;
|
||
}
|
||
|
||
.obj-list {
|
||
grid-template-columns: 1fr;
|
||
gap: 10px;
|
||
}
|
||
|
||
.footer-nav {
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.nav-btn {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* Print Styles */
|
||
@media print {
|
||
body {
|
||
background: white !important;
|
||
color: black !important;
|
||
-webkit-print-color-adjust: exact;
|
||
print-color-adjust: exact;
|
||
}
|
||
|
||
.course-wrap {
|
||
max-width: 100% !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.hero {
|
||
background: white !important;
|
||
border: 1px solid #cbd5e1 !important;
|
||
box-shadow: none !important;
|
||
padding: 1.5rem !important;
|
||
}
|
||
|
||
.hero h1 {
|
||
color: black !important;
|
||
}
|
||
|
||
.hero-sub,
|
||
.hero-meta-item,
|
||
.hero-badge {
|
||
color: #334155 !important;
|
||
}
|
||
|
||
.progress-bar,
|
||
.footer-nav {
|
||
display: none !important;
|
||
}
|
||
|
||
.seq-card {
|
||
box-shadow: none !important;
|
||
border: 1px solid #cbd5e1 !important;
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
.seq-details {
|
||
display: block !important;
|
||
}
|
||
|
||
.seq-toggle {
|
||
display: none !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="course-wrap">
|
||
<h2 style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">Cours complet Mercredi 3 -
|
||
Maîtriser UF3, UF4 et UF5 : sécurité, accessibilité, éthique, micro-teachings et jeux de rôle situations
|
||
difficiles
|
||
</h2>
|
||
|
||
<div class="hero">
|
||
<div class="hero-badge">Formation de formateurs IA · Séance 3/5</div>
|
||
<h1>Maîtriser UF3, UF4 & UF5</h1>
|
||
<div class="hero-sub">Sécurité, accessibilité, éthique & gestion des questions difficiles</div>
|
||
<div class="hero-meta">
|
||
<div class="hero-meta-item"><i class="ti ti-calendar" aria-hidden="true"></i> Mercredi 3</div>
|
||
<div class="hero-meta-item"><i class="ti ti-clock" aria-hidden="true"></i> 13h30 – 17h00 · 3h30</div>
|
||
<div class="hero-meta-item"><i class="ti ti-video" aria-hidden="true"></i> Visioconférence</div>
|
||
<div class="hero-meta-item"><i class="ti ti-theater" aria-hidden="true"></i> Jeu de rôle situations difficiles</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-bar" aria-label="Progression du parcours">
|
||
<div class="prog-step done" onclick="goToSession(1)" role="button" tabindex="0"
|
||
aria-label="Séance 1 : Fondements et posture" data-tooltip="Séance 1 : Fondements et posture"></div>
|
||
<div class="prog-step done" onclick="goToSession(2)" role="button" tabindex="0"
|
||
aria-label="Séance 2 : Maîtriser UF1 & UF2" data-tooltip="Séance 2 : Maîtriser UF1 & UF2"></div>
|
||
<div class="prog-step done current" onclick="goToSession(3)" role="button" tabindex="0"
|
||
aria-label="Séance 3 : Maîtriser UF3, UF4 & UF5 (Session actuelle)"
|
||
data-tooltip="Séance 3 : Maîtriser UF3, UF4 & UF5 (Actuelle)"></div>
|
||
<div class="prog-step" onclick="goToSession(4)" role="button" tabindex="0"
|
||
aria-label="Séance 4 : Deuxième micro-teaching & Approfondissement" data-tooltip="Séance 4 : Deuxième micro-teaching"></div>
|
||
<div class="prog-step" onclick="goToSession(5)" role="button" tabindex="0"
|
||
aria-label="Séance 5 : Évaluation finale et certification" data-tooltip="Séance 5 : Évaluation & Certification">
|
||
</div>
|
||
<span class="prog-label">Séance 3 / 5</span>
|
||
</div>
|
||
|
||
<div class="section-label">Objectifs de la séance</div>
|
||
<div class="objectives-card">
|
||
<h2><i class="ti ti-target" aria-hidden="true"></i>À l'issue de cette séance, vous serez capables de…</h2>
|
||
<ul class="obj-list">
|
||
<li>Aborder les sujets réglementaires (RGPD, IA Act) sans posture d'expert juridique</li>
|
||
<li>Animer les séquences accessibilité (UF4) et éthique (UF5) en gérant les vécus sensibles et les
|
||
positions tranchées</li>
|
||
<li>Animer un 2e micro-teaching sur un contenu plus complexe que l'UF1/UF2</li>
|
||
<li>Gérer en jeu de rôle un apprenant qui conteste ou qui sait déjà</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-label">Travail préparatoire - classe inversée (~1h30)</div>
|
||
<div class="prep-card">
|
||
<h2><i class="ti ti-book" aria-hidden="true"></i>À faire avant la séance</h2>
|
||
<ul>
|
||
<li>Lire en détail les séquences de l'UF3 (RGPD, IA Act, shadow IA, sécurité), UF4 (accessibilité, WCAG, FALC,
|
||
déficiences) et UF5 (éthique, biais, sobriété, études de cas) dans le scénario IA-PRO.</li>
|
||
<li>Choisir une séquence UF3, UF4 ou UF5 et préparer une animation de 10 min - intention pédagogique, méthode, 1
|
||
exemple concret. Choisir une séquence qui sort de votre zone de confort.</li>
|
||
<li>Compléter la fiche classe inversée : identifier 1 question difficile qu'un apprenant pourrait poser sur la
|
||
séquence choisie - et préparer une ébauche de réponse.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section-label">Points de vigilance spécifiques à cette séance</div>
|
||
<div class="vigil-card">
|
||
<h2><i class="ti ti-alert-triangle" aria-hidden="true"></i>3 points à avoir en tête avant d'entrer en séance</h2>
|
||
<div class="vigil-items">
|
||
<div class="vi"><span class="vi-tag">UF3</span>
|
||
<div class="vi-text">Ne jamais se positionner comme juriste : renvoyer systématiquement vers les services
|
||
compétents (DPO, service juridique). Votre rôle est de sensibiliser, pas de conseiller légalement.</div>
|
||
</div>
|
||
<div class="vi"><span class="vi-tag">UF4</span>
|
||
<div class="vi-text">Les apprenants peuvent avoir des vécus personnels liés au handicap (eux-mêmes ou un
|
||
proche). Soigner l'introduction et le cadre de la séquence - ne pas ouvrir le sujet sans avoir posé un
|
||
espace de parole sécurisé.</div>
|
||
</div>
|
||
<div class="vi"><span class="vi-tag">UF5</span>
|
||
<div class="vi-text">L'éthique peut susciter des positions tranchées et des débats enflammés. Faciliter sans
|
||
imposer son opinion, en gardant le cap sur les messages clés. Le formateur n'est pas là pour convaincre.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-label">Déroulé détaillé · 6 séquences</div>
|
||
<div class="timeline" id="tl">
|
||
|
||
<div class="seq-block">
|
||
<div class="seq-time">
|
||
<div class="seq-line">
|
||
<div class="seq-dot" style="background: var(--teal-light); color: var(--teal);"><i class="ti ti-message-circle"
|
||
aria-hidden="true"></i></div>
|
||
</div>
|
||
<div class="seq-duration">0h15</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="seq-card" onclick="tog(this)">
|
||
<div class="seq-header">
|
||
<div>
|
||
<div class="seq-num">13h30 · Séquence 1</div>
|
||
<div class="seq-title">Débrief classe inversée</div>
|
||
</div>
|
||
<span class="seq-tag tag-exchange">Échanges guidés</span>
|
||
<i class="ti ti-chevron-down seq-toggle" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="seq-details">
|
||
<div class="detail-section">
|
||
<div class="detail-label">Description</div>
|
||
<div class="detail-text">Retour collectif sur les lectures UF3/UF4/UF5 : questions difficiles préparées,
|
||
points sensibles identifiés, premières ébauches de réponse. La séquence est plus courte que les autres
|
||
mercredis (0h15 vs 0h20) - les formateurs connaissent maintenant le format, le débrief peut aller plus
|
||
vite.</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Ce que vous animez</div>
|
||
<ul class="detail-list">
|
||
<li>Tour de table : chacun dit sa séquence choisie pour le micro-teaching + la question difficile
|
||
qu'il a préparée</li>
|
||
<li>Mise en commun des questions : lesquelles reviennent ? Ce sont celles que vous traiterez en
|
||
priorité dans les coulisses</li>
|
||
<li>Pointer ce qui distingue ces UF des précédentes : contenus plus sensibles, moins techniques, plus
|
||
émotionnellement chargés</li>
|
||
<li>Cadrer l'enjeu de la séance : comment tenir un débat éthique ou légal sans perdre le groupe ni se
|
||
perdre soi-même</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tips-box">
|
||
<div class="tips-title"><i class="ti ti-bulb" aria-hidden="true"></i>Conseil d'animation</div>
|
||
<ul>
|
||
<li>15 minutes, pas une de plus. Le groupe sait maintenant ce que c'est - pas besoin de sur-expliquer
|
||
le format.</li>
|
||
<li>Les questions difficiles préparées sont de l'or : notez-les toutes au tableau blanc. Elles
|
||
structurent les coulisses qui suivent.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="seq-block">
|
||
<div class="seq-time">
|
||
<div class="seq-line">
|
||
<div class="seq-dot" style="background: var(--accent-light); color: var(--accent);"><i class="ti ti-shield"
|
||
aria-hidden="true"></i></div>
|
||
</div>
|
||
<div class="seq-duration">0h35</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="seq-card" onclick="tog(this)">
|
||
<div class="seq-header">
|
||
<div>
|
||
<div class="seq-num">13h45 · Séquence 2</div>
|
||
<div class="seq-title">Coulisses de l'UF3 - RGPD, IA Act & shadow AI</div>
|
||
</div>
|
||
<span class="seq-tag tag-analyse">Présentation + jeu de rôle</span>
|
||
<i class="ti ti-chevron-down seq-toggle" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="seq-details">
|
||
<div class="detail-section">
|
||
<div class="detail-label">Description</div>
|
||
<div class="detail-text">Décryptage des intentions pédagogiques de l'UF3 : comment aborder la réglementation
|
||
sans faire peur ni faire cours de droit. Comment animer le brainstorming "bonnes pratiques" sans
|
||
moraliser. Comment gérer le débat shadow AI qui peut devenir vif. Entraînement certification C3
|
||
intégré.</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Les 4 points clés à traiter</div>
|
||
<ul class="detail-list">
|
||
<li><strong>Reformuler le RGPD et l'IA Act de façon accessible (Ch.1, 0h45)</strong> - ne pas citer
|
||
les articles, raconter les principes : "l'IA peut utiliser vos prompts pour se réentraîner", "certains
|
||
modèles hébergés hors UE exposent vos données". La formule clé à enseigner : "Je ne suis pas juriste
|
||
- pour votre situation précise, consultez votre DPO ou service juridique."</li>
|
||
<li><strong>Animer le brainstorming "bonnes pratiques" (Ch.1, 0h30)</strong> - méthode brainstorming :
|
||
aucune réponse n'est mauvaise en phase d'émergence. Le formateur note tout, puis structure. Risque :
|
||
que les apprenants listent des contraintes sans voir les opportunités. Rééquilibrer en fin de
|
||
séquence.</li>
|
||
<li><strong>Gouvernance et gestion des accès (Ch.1, 0h30)</strong> - la question "qui a accès à quoi
|
||
dans notre structure ?" peut révéler des pratiques non conformes existantes. Rester facilitateur, ne
|
||
pas juger. Le quiz de clôture aide à objectiver sans pointer du doigt.</li>
|
||
<li><strong>Shadow AI et risques internes (Ch.2, 0h45)</strong> - vidéo + débat guidé. Le débat peut
|
||
devenir émotionnel si certains apprenants reconnaissent leurs propres pratiques. Posture : "il n'est
|
||
pas question de punir, mais de comprendre les risques pour mieux les gérer."</li>
|
||
</ul>
|
||
</div>
|
||
<div class="cert-box">
|
||
<div class="cert-title"><i class="ti ti-certificate" aria-hidden="true"></i>Entraînement certification - C3 (10 min)</div>
|
||
<p>Corriger un prompt non conforme RGPD et analyser un cas éthique selon l'IA Act. Exercice en groupe -
|
||
un cas est soumis au collectif, chacun propose sa correction, mise en commun. Critères Cr3.1 à Cr3.3.</p>
|
||
</div>
|
||
<div class="warn-box">
|
||
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
||
<p><strong>Point de vigilance absolu :</strong> si un apprenant pose une question précise sur sa
|
||
situation légale ("est-ce que mon entreprise risque quelque chose si..."), ne pas répondre. Formuler clairement
|
||
: "Ce n'est pas mon rôle de vous conseiller juridiquement - je peux vous dire ce que dit le RGPD en
|
||
général, mais pour votre situation précise, consultez un professionnel."</p>
|
||
</div>
|
||
<div class="tips-box">
|
||
<div class="tips-title"><i class="ti ti-bulb" aria-hidden="true"></i>Conseils d'animation</div>
|
||
<ul>
|
||
<li>Préparez 2-3 exemples concrets d'incidents shadow AI (Samsung/ChatGPT, données client dans un
|
||
prompt) - les faits réels sont plus efficaces qu'un discours.</li>
|
||
<li>Sur le RGPD : une slide avec les 3 questions à se poser avant d'utiliser un outil IA suffit. Pas
|
||
de tableau de conformité.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="seq-block">
|
||
<div class="seq-time">
|
||
<div class="seq-line">
|
||
<div class="seq-dot" style="background: var(--teal-light); color: var(--teal);"><i class="ti ti-accessible"
|
||
aria-hidden="true"></i></div>
|
||
</div>
|
||
<div class="seq-duration">0h30</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="seq-card" onclick="tog(this)">
|
||
<div class="seq-header">
|
||
<div>
|
||
<div class="seq-num">14h20 · Séquence 3</div>
|
||
<div class="seq-title">Coulisses de l'UF4 & UF5 - Accessibilité & Éthique</div>
|
||
</div>
|
||
<span class="seq-tag tag-analyse">Présentation + discussion</span>
|
||
<i class="ti ti-chevron-down seq-toggle" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="seq-details">
|
||
<div class="detail-section">
|
||
<div class="detail-label">Description</div>
|
||
<div class="detail-text">Double coulisses en 30 minutes : UF4 d'abord (accessibilité numérique, brainstorming
|
||
visio, FALC, spécificités déficiences visuelles et auditives), puis UF5 (éthique, biais IA, sobriété
|
||
numérique sans culpabilisation). Les deux UF partagent la même contrainte pédagogique : des sujets qui
|
||
mobilisent les vécus personnels. L'entraînement certification C4/C5/C6 est intégré.</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">UF4 - ce qu'il faut maîtriser pour l'enseigner</div>
|
||
<ul class="detail-list">
|
||
<li><strong>Le brainstorming accessibilité en visio (Ch.1, 0h45)</strong> - tableau blanc
|
||
collaboratif. Consigne à préparer soigneusement : "Qu'est-ce qui peut rendre un contenu numérique inaccessible ?"
|
||
Laisser émerger, ne pas corriger en temps réel. La mise en commun structure les réponses en
|
||
catégories (visuel, auditif, cognitif, moteur).</li>
|
||
<li><strong>Les spécificités déficience visuelle et auditive (Ch.2)</strong> - méthode "veille et mise
|
||
en commun" : chaque binôme cherche un exemple concret sur son secteur, puis partage. Le formateur
|
||
n'est pas l'expert de toutes les situations de handicap - et c'est normal. Formulaire : "Je ne
|
||
connais pas tous les cas, mais voici les principes."</li>
|
||
<li><strong>Le FALC (Facile À Lire et à Comprendre)</strong> - outil concret à démontrer en direct.
|
||
Prenez un texte dense et demandez à l'IA de le réécrire en FALC. Le résultat est immédiatement
|
||
parlant.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">UF5 - ce qu'il faut maîtriser pour l'enseigner</div>
|
||
<ul class="detail-list">
|
||
<li><strong>Le TP retro-prompting sur les biais (Ch.2, 0h45)</strong> - la séquence la plus risquée de
|
||
l'UF5. Les apprenants découvrent en direct les biais de l'IA (stéréotypes de genre, biais culturels,
|
||
hallucinations). Deux réactions possibles : effroi ("l'IA est dangereuse") ou déni ("c'est
|
||
exagéré"). Le formateur tient le cap : "les biais existent, ils sont documentés, voici comment les repérer et
|
||
les limiter."</li>
|
||
<li><strong>Sobriété numérique - chiffres sans culpabilisation (Ch.3, 0h30)</strong> - vidéo + débat.
|
||
Les chiffres (consommation énergétique, eau des data centers) peuvent créer de la culpabilité
|
||
paralysante. L'objectif n'est pas de faire arrêter l'IA, mais de conscientiser et d'orienter vers
|
||
des pratiques raisonnées. Formulaire : "Ce n'est pas tout ou rien."</li>
|
||
<li><strong>Responsabilité dans l'usage des contenus IA (Ch.2, 0h30)</strong> - "Qui est responsable
|
||
de quoi ?" Réponse simple à ancrer : l'utilisateur est toujours responsable du contenu produit avec
|
||
l'aide de l'IA. L'IA n'est pas un alibi.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="cert-box">
|
||
<div class="cert-title"><i class="ti ti-certificate" aria-hidden="true"></i>Entraînement certification - C4, C5 & C6 (10 min)</div>
|
||
<p>Rédiger un prompt inclusif et optimiser un contenu généré selon des critères FALC et accessibilité
|
||
(C4/C5, Cr4.1-Cr4.3, Cr5.1-Cr5.2). Analyser un cas éthique selon l'IA Act (C6). Exercice individuel,
|
||
correction collective.</p>
|
||
</div>
|
||
<div class="tips-box">
|
||
<div class="tips-title"><i class="ti ti-bulb" aria-hidden="true"></i>Conseils d'animation</div>
|
||
<ul>
|
||
<li>UF4 : commencer par demander si quelqu'un dans le groupe a un proche en situation de handicap -
|
||
pas pour l'exposer, mais pour signifier que le sujet peut être personnel et que c'est bienvenu.</li>
|
||
<li>UF5 / biais : montrer un exemple de biais en live (demander à une IA de décrire "un médecin", "une
|
||
infirmière", observer les stéréotypes dans les réponses) plutôt qu'expliquer en théorie.</li>
|
||
<li>Sobriété : éviter "chaque requête ChatGPT = X cl d'eau" en ouverture - ça ferme. Partir plutôt de
|
||
"à quoi ressemblerait une utilisation raisonnée de l'IA dans votre structure ?"</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="seq-block">
|
||
<div class="seq-time">
|
||
<div class="seq-line">
|
||
<div class="seq-dot" style="background:#f1f5f9;color:var(--ink3);"><i class="ti ti-coffee"
|
||
aria-hidden="true"></i></div>
|
||
</div>
|
||
<div class="seq-duration">0h15</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="pause-card">
|
||
<i class="ti ti-coffee" style="font-size:18px;color:var(--ink3);" aria-hidden="true"></i>
|
||
<span>Pause - 14h50 à 15h05</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="seq-block">
|
||
<div class="seq-time">
|
||
<div class="seq-line">
|
||
<div class="seq-dot" style="background: var(--coral-light); color: var(--coral);"><i class="ti ti-player-play"
|
||
aria-hidden="true"></i></div>
|
||
</div>
|
||
<div class="seq-duration">0h45</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="seq-card" onclick="tog(this)">
|
||
<div class="seq-header">
|
||
<div>
|
||
<div class="seq-num">15h05 · Séquence 4</div>
|
||
<div class="seq-title">Micro-teachings UF3 / UF4 / UF5</div>
|
||
</div>
|
||
<span class="seq-tag tag-atelier">Micro-teaching</span>
|
||
<i class="ti ti-chevron-down seq-toggle" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="seq-details">
|
||
<div class="detail-section">
|
||
<div class="detail-label">Description</div>
|
||
<div class="detail-text">Même format qu'au Mercredi 2 - mais les séquences sont plus complexes à animer.
|
||
Contenus réglementaires, sujets sensibles, positions tranchées des apprenants simulés. L'enjeu n'est
|
||
plus seulement la maîtrise du contenu, c'est la gestion de la salle.</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Ce qui change par rapport au Mercredi 2</div>
|
||
<ul class="detail-list">
|
||
<li>Les observateurs reçoivent une consigne supplémentaire : jouer un apprenant "difficile" - qui
|
||
conteste, qui dit "je sais déjà", ou qui partage un vécu personnel fort. Chaque formateur doit gérer
|
||
au moins une de ces situations pendant son passage</li>
|
||
<li>La grille d'observation reste la même (contenu / méthode / posture) mais la dimension Posture
|
||
prend plus de poids sur ces contenus - noter spécifiquement comment le formateur gère l'inattendu
|
||
émotionnel</li>
|
||
<li>Si un formateur a choisi une séquence UF5 éthique, le formateur référent peut relancer avec une
|
||
question provocante en Q&R simulé</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tips-box">
|
||
<div class="tips-title"><i class="ti ti-bulb" aria-hidden="true"></i>Conseils d'animation</div>
|
||
<ul>
|
||
<li>Briefer les "apprenants difficiles" avant d'ouvrir les micro-teachings - donner un rôle précis,
|
||
pas une liberté totale. Ex. : "Tu es un apprenant qui utilise déjà l'IA depuis 2 ans et tu trouves les
|
||
explications RGPD trop basiques."</li>
|
||
<li>Chronométrer visible - les séquences UF3/UF4/UF5 ont tendance à déborder sur le temps
|
||
réglementaire ou éthique.</li>
|
||
<li>Ne pas couper un formateur au milieu d'un moment délicat - attendre une transition naturelle.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="seq-block">
|
||
<div class="seq-time">
|
||
<div class="seq-line">
|
||
<div class="seq-dot" style="background: var(--rose-light); color: var(--rose);"><i class="ti ti-theater" aria-hidden="true"></i>
|
||
</div>
|
||
</div>
|
||
<div class="seq-duration">0h30</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="seq-card" onclick="tog(this)">
|
||
<div class="seq-header">
|
||
<div>
|
||
<div class="seq-num">15h50 · Séquence 5</div>
|
||
<div class="seq-title">Débrief + situations difficiles</div>
|
||
</div>
|
||
<span class="seq-tag tag-roleplay">Débrief + jeu de rôle</span>
|
||
<i class="ti ti-chevron-down seq-toggle" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="seq-details">
|
||
<div class="detail-section">
|
||
<div class="detail-label">Description</div>
|
||
<div class="detail-text">Double temps : retour sur les micro-teachings (15 min) puis jeu de rôle collectif sur
|
||
la gestion des situations difficiles (15 min). C'est la séquence la plus singulière du parcours - elle
|
||
prépare à ce que les formations UF3/UF4/UF5 réservent vraiment sur le terrain.</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Débrief micro-teachings (15 min)</div>
|
||
<ul class="detail-list">
|
||
<li>Même structure qu'au Mercredi 2 : autoévaluation 1 min → grille observateurs → synthèse formateur
|
||
référent</li>
|
||
<li>Focus additionnel : comment chacun a géré l'apprenant difficile - qu'est-ce qui a fonctionné,
|
||
qu'est-ce qui a bloqué</li>
|
||
<li>Le formateur référent nomme les stratégies efficaces observées - elles seront réutilisées dans le
|
||
jeu de rôle</li>
|
||
</ul>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Jeu de rôle - situations difficiles (15 min)</div>
|
||
<div class="detail-text">3 scénarios en rotation rapide. Un formateur joue le formateur, un autre joue
|
||
l'apprenant difficile. Le reste du groupe observe et propose des alternatives après chaque scénario.
|
||
</div>
|
||
</div>
|
||
<div class="jr-box">
|
||
<div class="jr-title"><i class="ti ti-theater" aria-hidden="true"></i>3 scénarios à jouer</div>
|
||
<div class="jr-scenario">
|
||
<div class="jr-s-tag">Scénario 1 - "Je sais déjà"</div>
|
||
<div class="jr-s-q">Un apprenant dit pendant l'UF3 : "Tout ça je le sais, on nous l'a déjà dit 10
|
||
fois. Est-ce qu'on peut passer à quelque chose d'utile ?"</div>
|
||
<div class="jr-s-r"><strong>Stratégies à explorer :</strong> valoriser l'expertise ("parfait, alors tu
|
||
peux nous partager un exemple concret de ta structure ?"), recadrer l'objectif de la séquence,
|
||
proposer un rôle d'expert-ressource pour le groupe.</div>
|
||
</div>
|
||
<div class="jr-scenario">
|
||
<div class="jr-s-tag">Scénario 2 - Position tranchée</div>
|
||
<div class="jr-s-q">Pendant l'UF5 éthique : "L'IA va détruire des emplois, c'est une catastrophe. Je
|
||
ne comprends pas qu'on forme des gens à utiliser un outil qui va les remplacer."</div>
|
||
<div class="jr-s-r"><strong>Stratégies à explorer :</strong> accueillir sans valider ni invalider
|
||
("c'est une position que beaucoup partagent"), ramener au cadre de la formation ("notre objectif ici
|
||
c'est de vous donner les clés pour choisir"), ne pas débattre au fond mais ouvrir une réflexion
|
||
collective.</div>
|
||
</div>
|
||
<div class="jr-scenario">
|
||
<div class="jr-s-tag">Scénario 3 - Vécu personnel fort</div>
|
||
<div class="jr-s-q">Pendant l'UF4 accessibilité : un apprenant dit "Mon fils est autiste, et ce que
|
||
vous décrivez là c'est vraiment ce qu'il vit. Je ne m'attendais pas à en parler en formation."</div>
|
||
<div class="jr-s-r"><strong>Stratégies à explorer :</strong> accueillir avec soin ("merci de partager
|
||
ça, c'est précieux pour le groupe"), ne pas instrumentaliser le témoignage, proposer de continuer en
|
||
privé si nécessaire, sécuriser l'espace pour les autres apprenants.</div>
|
||
</div>
|
||
</div>
|
||
<div class="tips-box">
|
||
<div class="tips-title"><i class="ti ti-bulb" aria-hidden="true"></i>Posture de débrief</div>
|
||
<ul>
|
||
<li>Après chaque scénario, posez la même question : "Qu'est-ce qui a fonctionné ? Qu'est-ce que vous
|
||
feriez autrement ?"</li>
|
||
<li>Ne donnez pas la "bonne réponse" - il n'y en a pas une seule. L'objectif est d'élargir le
|
||
répertoire de chacun.</li>
|
||
<li>Le scénario 3 peut être émotionnellement chargé - si quelqu'un dans le groupe est touché, marquez
|
||
une pause courte avant de continuer.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="seq-block">
|
||
<div class="seq-time">
|
||
<div class="seq-line">
|
||
<div class="seq-dot" style="background: var(--teal-light); color: var(--teal);"><i class="ti ti-flag" aria-hidden="true"></i>
|
||
</div>
|
||
</div>
|
||
<div class="seq-duration">0h10</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="seq-card" onclick="tog(this)">
|
||
<div class="seq-header">
|
||
<div>
|
||
<div class="seq-num">16h20 · Séquence 6</div>
|
||
<div class="seq-title">Consigne pour la séance 4</div>
|
||
</div>
|
||
<span class="seq-tag tag-consigne">Consigne</span>
|
||
<i class="ti ti-chevron-down seq-toggle" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="seq-details">
|
||
<div class="detail-section">
|
||
<div class="detail-label">Ce que vous annoncez</div>
|
||
<ul class="detail-list">
|
||
<li>Préparer une animation de 20 min (séquence au choix, toutes UF) - c'est la mise en situation
|
||
finale, plus longue et plus exigeante que les micro-teachings</li>
|
||
<li>Rédiger une note de préparation courte (3-4 phrases) : intention pédagogique, méthode retenue,
|
||
adaptation prévue pour la visio</li>
|
||
<li>Compléter la grille d'autoévaluation à blanc : s'évaluer soi-même avant la mise en situation -
|
||
sans complaisance</li>
|
||
<li>Le Mercredi 4 marque le passage vers la Phase 2 (co-animation) : chaque formateur repart avec ses
|
||
premières séquences attribuées</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tips-box">
|
||
<div class="tips-title"><i class="ti ti-bulb" aria-hidden="true"></i>Comment bien clore</div>
|
||
<ul>
|
||
<li>Un mot de chaque formateur : ce qu'il retient de la séance en une phrase.</li>
|
||
<li>Soyez précis sur la consigne - l'ambiguïté ici génère de l'anxiété avant la séance 4.</li>
|
||
<li>Rappeler la date et l'heure du Mercredi 4 avant de raccrocher.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="footer-nav">
|
||
<div class="nav-btn" onclick="sendPrompt('Génère-moi la fiche classe inversée pour le Mercredi 3 - UF3, UF4 et UF5')">
|
||
<i class="ti ti-file-plus nb-icon" aria-hidden="true"></i>
|
||
<div>
|
||
<div class="nb-label">Ressource</div>
|
||
<div class="nb-title">Fiche classe inversée Mercredi 3 ↗</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav-btn" onclick="sendPrompt('Génère-moi un entraînement pour la certification C3 - RGPD et IA Act')">
|
||
<i class="ti ti-certificate nb-icon" aria-hidden="true"></i>
|
||
<div>
|
||
<div class="nb-label">Entraînement</div>
|
||
<div class="nb-title">Certification C3 - RGPD & IA Act ↗</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav-btn"
|
||
onclick="goToSession(4)">
|
||
<i class="ti ti-arrow-right nb-icon" aria-hidden="true"></i>
|
||
<div>
|
||
<div class="nb-label">Suite du parcours</div>
|
||
<div class="nb-title">Cours Mercredi 4 ↗</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<script>
|
||
function tog(card) { const was = card.classList.contains('active'); document.querySelectorAll('.seq-card').forEach(c => c.classList.remove('active')); if (!was) card.classList.add('active'); }
|
||
|
||
function goToSession(num) {
|
||
if (num === 1) {
|
||
window.location.href = 'index.html';
|
||
return;
|
||
}
|
||
|
||
if (num === 2) {
|
||
window.location.href = 'mercredi2_maitriser_UF1_UF2.html';
|
||
return;
|
||
}
|
||
|
||
if (num === 3) {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
const badge = document.querySelector('.hero-badge');
|
||
if (badge) {
|
||
badge.style.transform = 'scale(1.08)';
|
||
badge.style.transition = 'transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)';
|
||
setTimeout(() => badge.style.transform = 'scale(1)', 300);
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (num === 4) {
|
||
window.location.href = 'mercredi4_mise_en_situation_bilan_parcours.html';
|
||
return;
|
||
}
|
||
|
||
if (num === 5) {
|
||
window.location.href = 'mercredi5_preparation_certification_IA.html';
|
||
return;
|
||
}
|
||
}
|
||
|
||
document.querySelectorAll('.prog-step').forEach(step => {
|
||
step.addEventListener('keydown', e => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
step.click();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |