1576 lines
50 KiB
HTML
1576 lines
50 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 2</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;
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* 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-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;
|
||
}
|
||
|
||
/* Extra Tags styled with theme colors */
|
||
.tag-debrief {
|
||
background: var(--amber-light);
|
||
color: var(--amber);
|
||
}
|
||
|
||
.tag-consigne {
|
||
background: var(--teal-light);
|
||
color: var(--teal);
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* Triptyque Block */
|
||
.triptyque {
|
||
background: var(--white);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
margin-top: 1rem;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.triptyque-header {
|
||
background: var(--accent-light);
|
||
padding: 0.75rem 1.25rem;
|
||
font-family: var(--syne);
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.triptyque-cols {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
}
|
||
|
||
.triptyque-col {
|
||
padding: 1.25rem;
|
||
border-right: 1px solid var(--border);
|
||
transition: background 0.2s ease;
|
||
}
|
||
|
||
.triptyque-col:hover {
|
||
background: #fafbfd;
|
||
}
|
||
|
||
.triptyque-col:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.triptyque-col .col-icon {
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10px;
|
||
font-size: 16px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.col-blue {
|
||
background: var(--accent-light);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.col-teal {
|
||
background: var(--teal-light);
|
||
color: var(--teal);
|
||
}
|
||
|
||
.col-amber {
|
||
background: var(--amber-light);
|
||
color: var(--amber);
|
||
}
|
||
|
||
.triptyque-col h4 {
|
||
font-family: var(--syne);
|
||
font-size: 13px;
|
||
font-weight: 800;
|
||
color: var(--ink);
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.triptyque-col p {
|
||
font-size: 12.5px;
|
||
color: var(--ink3);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
.triptyque-cols {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.triptyque-col {
|
||
border-right: none;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.triptyque-col:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.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 2 -
|
||
Maîtriser UF1 et UF2, fondamentaux IA et prompt engineering, micro-teaching</h2>
|
||
|
||
<div class="hero">
|
||
<div class="hero-badge">Formation de formateurs IA · Séance 2/5</div>
|
||
<h1>Maîtriser UF1 & UF2</h1>
|
||
<div class="hero-sub">Fondamentaux IA, prompt engineering & premier micro-teaching</div>
|
||
<div class="hero-meta">
|
||
<div class="hero-meta-item"><i class="ti ti-calendar" aria-hidden="true"></i> Mercredi 2</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-certificate" aria-hidden="true"></i> Entraînement C1 & C2</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 current" onclick="goToSession(2)" role="button" tabindex="0"
|
||
aria-label="Séance 2 : Maîtriser UF1 & UF2 (Session actuelle)"
|
||
data-tooltip="Séance 2 : Maîtriser UF1 & UF2 (Actuelle)"></div>
|
||
<div class="prog-step" onclick="goToSession(3)" role="button" tabindex="0"
|
||
aria-label="Séance 3 : Maîtriser UF3, UF4 & UF5" data-tooltip="Séance 3 : Maîtriser UF3, UF4 & UF5"></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 2 / 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>Expliquer les intentions pédagogiques des séquences clés de l'UF1 (fondamentaux IA, outils, optimisations)
|
||
</li>
|
||
<li>Enseigner le prompt engineering sans liste de recettes - en transmettant la logique ROCCO</li>
|
||
<li>Animer une séquence de 10 min sur UF1 ou UF2 devant le groupe (micro-teaching)</li>
|
||
<li>Utiliser la grille d'observation pour donner un feedback structuré à un pair</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'UF1 (chapitres 1 et 2) et de l'UF2 (chapitres 1 et 2) dans le scénario
|
||
IA-PRO.</li>
|
||
<li>Choisir une séquence UF1 ou UF2 et préparer une animation de 10 min : intention pédagogique, consigne, 1
|
||
exemple concret.</li>
|
||
<li>Compléter la fiche classe inversée : noter les points de contenu difficiles à expliquer clairement.</li>
|
||
</ul>
|
||
</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">0h20</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 la lecture UF1+UF2 : points difficiles à expliquer,
|
||
questions soulevées, premières observations sur les séquences préparées. Le formateur référent cadre
|
||
les attentes du micro-teaching.</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Ce que vous animez</div>
|
||
<ul class="detail-list">
|
||
<li>Tour de table rapide : chacun dit sa séquence choisie pour le micro-teaching et 1 point de contenu
|
||
qui lui semble difficile à formuler</li>
|
||
<li>Recueillir les questions issues de la lecture - les noter visiblement (tableau blanc collaboratif)
|
||
</li>
|
||
<li>Pointer les convergences : si plusieurs formateurs butent sur le même point, c'est là que vous
|
||
passerez plus de temps dans les coulisses</li>
|
||
<li>Cadrer les attentes du micro-teaching : 10 min d'animation + 5 min Q&R simulé, grille
|
||
d'observation utilisée by the pairs</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>Ne pas dépasser 20 min - la tentation est de tout résoudre ici. Gardez l'énergie pour les
|
||
coulisses.</li>
|
||
<li>Les questions non traitées dans le débrief doivent trouver réponse dans les séquences suivantes -
|
||
dites-le explicitement.</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-eye"
|
||
aria-hidden="true"></i></div>
|
||
</div>
|
||
<div class="seq-duration">0h40</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="seq-card" onclick="tog(this)">
|
||
<div class="seq-header">
|
||
<div>
|
||
<div class="seq-num">13h50 · Séquence 2</div>
|
||
<div class="seq-title">Coulisses de l'UF1 - Introduction à l'IA et aux outils</div>
|
||
</div>
|
||
<span class="seq-tag tag-analyse">Analyse guidée</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 derrière les séquences UF1 : comment
|
||
animer la classe inversée sur le concept d'IA générative, comment faire une démo outils sans en faire
|
||
un catalogue, comment adapter les cas d'usage sectoriels. Point RGPD dès l'intro - pourquoi il
|
||
apparaît là et comment l'aborder sans freiner.</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Les 4 points clés à traiter</div>
|
||
<ul class="detail-list">
|
||
<li><strong>La classe inversée "Qu'est-ce qu'une IA générative ?" (Ch.2, 0h30)</strong> - l'intention
|
||
est de partir des représentations des apprenants avec tableau blanc collaboratif, pas de donner une
|
||
définition. Montrez comment animer ça sans glisser vers un cours magistral.</li>
|
||
<li><strong>La démo outils (ChatGPT, Gemini, Mistral, Copilot… 0h45)</strong> - risque principal : en
|
||
faire un catalogue sans fil conducteur. La clé : choisir 2-3 outils max, montrer ce qu'ils font de
|
||
différent, ancrer dans un usage métier concret. Le quiz final permet de vérifier sans interroger.
|
||
</li>
|
||
<li><strong>Les optimisations et opportunités (Ch.2, 1h30)</strong> - séquence la plus dense de l'UF1.
|
||
Travaux de réflexion collective : comment structurer le débat "tâches délégables vs non délégables"
|
||
sans que ça parte dans tous les sens. Donner un cadre : critères d'une tâche IA-compatible.</li>
|
||
<li><strong>Le point RGPD dès l'intro</strong> - une note courte sur la position de chaque modèle en
|
||
matière de RGPD, pas un cours juridique. Formule à avoir : "On en parle brièvement maintenant pour
|
||
que vous sachiez pourquoi certains outils sont à éviter en contexte pro - l'UF3 approfondira."</li>
|
||
</ul>
|
||
</div>
|
||
<div class="warn-box">
|
||
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
||
<p><strong>Point de vigilance :</strong> les outils évoluent vite. Signalez aux apprenants que les
|
||
interfaces peuvent avoir changé depuis la création du support. Adoptez une posture "on vérifie
|
||
ensemble" plutôt que "voici comment ça marche".</p>
|
||
</div>
|
||
<div class="cert-box">
|
||
<div class="cert-title"><i class="ti ti-certificate" aria-hidden="true"></i>Entraînement certification -
|
||
C1 (5 min)</div>
|
||
<p>À partir d'un cas donné (ex. : responsable de communication dans une PME), sélectionner et justifier
|
||
les outils IA adaptés. Exercice individuel - critères Cr1.1 à Cr1.3. Correction rapide en plénière.
|
||
</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>Utilisez des exemples sectoriels variés - santé, communication, industrie - pour que chacun se
|
||
retrouve dans au moins un cas.</li>
|
||
<li>Sur la démo outils : préparez-la à l'avance. Une démo qui plante en direct sur une interface qui a
|
||
changé casse la crédibilité.</li>
|
||
<li>L'exercice C1 peut être fait en classe inversée si le temps manque - annoncez-le clairement.</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-prompt"
|
||
aria-hidden="true"></i></div>
|
||
</div>
|
||
<div class="seq-duration">0h20</div>
|
||
</div>
|
||
<div class="seq-content">
|
||
<div class="seq-card" onclick="tog(this)">
|
||
<div class="seq-header">
|
||
<div>
|
||
<div class="seq-num">14h30 · Séquence 3</div>
|
||
<div class="seq-title">Coulisses de l'UF2 - Prompt Engineering</div>
|
||
</div>
|
||
<span class="seq-tag tag-analyse">Analyse guidée</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">Comment enseigner le prompt sans liste de recettes - insister sur la logique de
|
||
structuration ROCCO. Comment animer l'atelier "études de cas" en visio avec des binômes en breakout
|
||
rooms. La densité de l'UF2 (5 chapitres, 2 jours) impose des choix : savoir prioriser.</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">La structure ROCCO - à maîtriser pour l'enseigner</div>
|
||
<ul class="detail-list">
|
||
<li><strong>R - Rôle :</strong> à qui parle-t-on ? Quel expert demande-t-on à l'IA d'incarner ?</li>
|
||
<li><strong>O - Objectif :</strong> qu'attend-on précisément comme résultat ?</li>
|
||
<li><strong>C - Contexte :</strong> quelles informations l'IA a-t-elle besoin de connaître ?</li>
|
||
<li><strong>C - Contraintes :</strong> format, longueur, ton, ce qu'il ne faut pas faire</li>
|
||
<li><strong>O - Output :</strong> la forme exacte de la réponse attendue (liste, tableau, texte,
|
||
code…)</li>
|
||
</ul>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Ce que vous enseignez sur la méthode</div>
|
||
<ul class="detail-list">
|
||
<li>La démo live commentée est la méthode centrale : vous rédigez un prompt en direct, montrez le
|
||
résultat, expliquez pourquoi vous le reformulez, montrez l'amélioration - l'apprenant voit le
|
||
raisonnement, pas juste la technique</li>
|
||
<li>L'atelier études de cas en binômes (breakout rooms, 1h) : chaque binôme travaille sur un cas
|
||
métier réel et rédige + itère ses prompts - préparez 3-4 cas pour des secteurs variés</li>
|
||
<li>La séquence "Adapter ses prompts selon l'outil" (0h30) : chaque modèle a ses spécificités - ne pas
|
||
promettre qu'un prompt ChatGPT fonctionnera à l'identique sur Mistral</li>
|
||
</ul>
|
||
</div>
|
||
<div class="warn-box">
|
||
<i class="ti ti-alert-triangle" aria-hidden="true"></i>
|
||
<p><strong>Point de vigilance :</strong> éviter la liste de "formules magiques". L'objectif est que
|
||
l'apprenant comprenne pourquoi un prompt est efficace - pas qu'il mémorise une recette. Si vous
|
||
entendez "donnez-nous une liste des meilleurs prompts", c'est le signal de recadrer.</p>
|
||
</div>
|
||
<div class="cert-box">
|
||
<div class="cert-title"><i class="ti ti-certificate" aria-hidden="true"></i>Entraînement certification -
|
||
C2 (10 min)</div>
|
||
<p>Rédiger un prompt complet selon la structure ROCCO pour un besoin métier fourni. Auto-évaluation en
|
||
binôme sur les critères Cr2.1 à Cr2.3 - correction collective. Idéalement en breakout rooms de 2.</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 votre démo live à l'avance - et prévoyez un prompt qui donne un résultat imparfait du
|
||
premier coup, pour montrer l'itération en direct.</li>
|
||
<li>L'automatisation (Ch.3, 0h30) est dense mais courte : prévoir une démo très cadrée Zapier/Make
|
||
pour ne pas déborder. Évitez l'improvisation sur cette séquence.</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 UF1 / UF2</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">Chaque formateur anime sa séquence de 10 min. Les autres jouent le rôle des
|
||
apprenants - en posant de vraies questions, pas en restant passifs. Après chaque passage, 5 min de Q&R
|
||
simulé. Les observateurs utilisent la grille d'observation (contenu / méthode / posture).</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Organisation pratique</div>
|
||
<ul class="detail-list">
|
||
<li>Calculez le temps selon le nombre de formateurs : si 3 formateurs → 3 × 15 min = 45 min,
|
||
compatible. Si 4 ou plus, réduire à 10 min chrono (sans Q&R simulé) ou décaler une partie à la
|
||
séance 3</li>
|
||
<li>Rôles pendant chaque passage : 1 formateur anime - les autres sont "apprenants" actifs + 1 désigné
|
||
"observateur grille"</li>
|
||
<li>Rotation : le formateur référent ne joue pas l'apprenant, il observe et complète sa propre grille
|
||
</li>
|
||
<li>Rappeler avant de démarrer : "Vous êtes des apprenants - posez les questions qu'un vrai groupe
|
||
poserait"</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="triptyque">
|
||
<div class="triptyque-header">
|
||
<i class="ti ti-clipboard-list" aria-hidden="true"></i>Grille d'observation - 3 dimensions à évaluer
|
||
</div>
|
||
<div class="triptyque-cols">
|
||
<div class="triptyque-col">
|
||
<div class="col-icon col-blue"><i class="ti ti-book" aria-hidden="true"></i></div>
|
||
<h4>Contenu</h4>
|
||
<p>Les points clés sont-ils couverts ? Y a-t-il des erreurs factuelles ? La hiérarchisation est-elle
|
||
claire ?</p>
|
||
</div>
|
||
<div class="triptyque-col">
|
||
<div class="col-icon col-teal"><i class="ti ti-settings" aria-hidden="true"></i></div>
|
||
<h4>Méthode</h4>
|
||
<p>La méthode choisie sert-elle le contenu ? Le temps est-il respecté ? La consigne est-elle claire
|
||
?</p>
|
||
</div>
|
||
<div class="triptyque-col">
|
||
<div class="col-icon col-amber"><i class="ti ti-user" aria-hidden="true"></i></div>
|
||
<h4>Posture</h4>
|
||
<p>Le formateur engage-t-il le groupe ? Gère-t-il l'imprévu ? La posture est-elle cohérente avec la
|
||
séquence ?</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tips-box">
|
||
<div class="tips-title"><i class="ti ti-bulb" aria-hidden="true"></i>Conseils d'animation</div>
|
||
<ul>
|
||
<li>Chronométrez visible - un compte à rebours partagé à l'écran aide tout le monde à gérer le temps.
|
||
</li>
|
||
<li>Si un formateur dépasse, coupez avec bienveillance mais fermement : "Je vais t'arrêter là - on
|
||
revient dessus dans le débrief."</li>
|
||
<li>Posez une question difficile pendant le Q&R simulé de chaque passage - ça prépare à la réalité
|
||
terrain.</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(--amber-light); color: var(--amber);"><i class="ti ti-star"
|
||
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 collectif</div>
|
||
</div>
|
||
<span class="seq-tag tag-debrief">Débrief guidé</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 structuré avec la grille d'observation. Points forts confirmés, axes
|
||
d'amélioration identifiés. Le formateur référent synthétise les observations transversales - ce qui
|
||
revient chez plusieurs formateurs est précieux : c'est souvent là que l'UF elle-même est difficile à
|
||
enseigner.</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<div class="detail-label">Structure du débrief (30 min pour 3-4 formateurs)</div>
|
||
<ul class="detail-list">
|
||
<li>Chaque formateur s'autoévalue en 1 min : "Ce que j'ai bien fait / Ce que je referais différemment"
|
||
</li>
|
||
<li>Les observateurs restituent leur grille : 1 point fort + 1 axe de travail, pas plus - pour ne pas
|
||
noyer dans le feedback</li>
|
||
<li>Le formateur référent synthétise : points transversaux, erreurs récurrentes, 1 conseil prioritaire
|
||
par formateur</li>
|
||
<li>Clore sur ce qui était globalement solide - le premier micro-teaching est souvent stressant,
|
||
valoriser le courage d'avoir essayé</li>
|
||
</ul>
|
||
</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>Commencer par les points forts - toujours. Un débrief qui commence par les axes d'amélioration
|
||
ferme les personnes.</li>
|
||
<li>Ne pas tout dire : choisir 1 axe prioritaire par formateur, pas 5. Moins c'est plus efficace.</li>
|
||
<li>Si un formateur a eu du mal, ne le laissez pas partir avec une image dégradée de lui-même - ancrez
|
||
sur ce qui était solide.</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 3</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 séquence de 10 min dans l'UF3, UF4 ou UF5 pour le micro-teaching de la séance 3</li>
|
||
<li>Lire en détail les séquences de l'UF3 (RGPD, IA Act, sécurité), UF4 (accessibilité) et UF5
|
||
(éthique, biais, sobriété) dans le scénario</li>
|
||
<li>Compléter la fiche classe inversée : identifier 1 question difficile qu'un apprenant pourrait
|
||
poser - et préparer une ébauche de réponse</li>
|
||
<li>Rappel : les séquences UF3/UF4/UF5 sont plus complexes à animer (réglementaire, éthique) -
|
||
choisissez une séquence qui vous sort de votre zone de confort</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 3.</li>
|
||
<li>Rappeler la date et l'heure de la séance 3 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 grille d\'observation complète pour les micro-teachings du Mercredi 2')">
|
||
<i class="ti ti-clipboard-check nb-icon" aria-hidden="true"></i>
|
||
<div>
|
||
<div class="nb-label">Outil séance</div>
|
||
<div class="nb-title">Grille d'observation micro-teaching ↗</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav-btn"
|
||
onclick="sendPrompt('Prépare-moi les 4 cas métiers pour l\'atelier études de cas prompt engineering UF2')">
|
||
<i class="ti ti-briefcase nb-icon" aria-hidden="true"></i>
|
||
<div>
|
||
<div class="nb-label">Atelier UF2</div>
|
||
<div class="nb-title">Cas métiers prompt engineering ↗</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav-btn"
|
||
onclick="goToSession(3)">
|
||
<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 3 ↗</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.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 === 3) {
|
||
window.location.href = 'mercredi3_maitriser_UF3_UF4_UF5.html';
|
||
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> |