/* =====================================================================
main.css — GÉNÉRÉ AUTOMATIQUEMENT par tools/build-css.js
NE PAS ÉDITER DIRECTEMENT. Modifier les fichiers dans css/modules/.
Date build : 2026-04-30T10:24:01.630Z
===================================================================== */
/* ==================================================================== */
/* 01-base.css */
/* ==================================================================== */
/* =================================================================
HEADER
================================================================= */
/* =====================================================================
main.css — GÉNÉRÉ AUTOMATIQUEMENT par tools/build-css.js
NE PAS ÉDITER DIRECTEMENT. Modifier les fichiers dans css/modules/.
Date build : 2026-04-24T08:13:45.310Z
===================================================================== */
/* ==================================================================== */
/* 01-base.css */
/* ==================================================================== */
/* =================================================================
RESET
================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text-primary);
font-family: var(--font-body);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
line-height: 1.7;
font-size: 16px;
transition: background 0.3s, color 0.3s;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
::selection { background: var(--sky); color: var(--black); }
/* Theme toggle button */
/* Dark/light palette is now in tokens.css */
/* =================================================================
UTILITY
================================================================= */
.sg { font-family: var(--font-display); }
.container { max-width: 1100px; margin: 0 auto; padding-inline: 40px; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
@media (prefers-reduced-motion: no-preference) {
.reveal {
opacity: 0; transform: translateY(24px);
transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-33.333%); }
}
.fu { animation: fadeUp 0.6s ease-out both; }
.fu1 { animation: fadeUp 0.6s ease-out 0.08s both; }
.fu2 { animation: fadeUp 0.6s ease-out 0.16s both; }
.fu3 { animation: fadeUp 0.6s ease-out 0.24s both; }
.fu4 { animation: fadeUp 0.6s ease-out 0.32s both; }
/* =================================================================
TABLE DES ACCENTS PAR COURS (audit UX Pattern 3 / Chantier B)
================================================================= */
body[data-course="comprendre"] { --course-accent: var(--sky); --course-color: var(--sky); }
body[data-course="assistant"] { --course-accent: var(--yellow); --course-color: var(--yellow); }
body[data-course="ethique"] { --course-accent: var(--green); --course-color: var(--green); }
body[data-course="strategie"] { --course-accent: var(--red); --course-color: var(--red); }
body[data-course="accelerateur"] { --course-accent: var(--caramel); --course-color: var(--caramel); }
body[data-course="applications"] { --course-accent: var(--blue); --course-color: var(--blue); }
body[data-course="claude-code-pratique"] { --course-accent: var(--yellow); --course-color: var(--yellow); }
body[data-course="claude-code-equipe"] { --course-accent: var(--red); --course-color: var(--red); }
/* === Auto-restored attribute selectors (anti-faux-positif PurgeCSS) === */
body[data-course="comprendre"] { --course-accent: var(--sky); --course-color: var(--sky); }
body[data-course="assistant"] { --course-accent: var(--yellow); --course-color: var(--yellow); }
body[data-course="ethique"] { --course-accent: var(--green); --course-color: var(--green); }
body[data-course="strategie"] { --course-accent: var(--red); --course-color: var(--red); }
body[data-course="accelerateur"] { --course-accent: var(--caramel); --course-color: var(--caramel); }
body[data-course="applications"] { --course-accent: var(--blue); --course-color: var(--blue); }
body[data-course="claude-code-pratique"] { --course-accent: var(--yellow); --course-color: var(--yellow); }
body[data-course="claude-code-equipe"] { --course-accent: var(--red); --course-color: var(--red); }
/* ==================================================================== */
/* 02-buttons.css */
/* ==================================================================== */
/* =================================================================
BUTTONS
================================================================= */
.btn-p {
background: var(--sky); color: var(--black);
border: 2px solid var(--sky); padding: 14px 32px;
font-size: 14px; font-weight: 700;
font-family: var(--font-display);
cursor: pointer; transition: all 0.2s;
text-transform: uppercase; letter-spacing: 0.04em;
display: inline-block;
}
.btn-p:hover {
background: var(--white); border-color: var(--white);
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--sky);
}
.btn-p:active { transform: translate(0,0); box-shadow: none; }
.btn-p:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.btn-s {
background: transparent; color: var(--text-primary);
border: 2px solid var(--border-dark); padding: 14px 32px;
font-size: 14px; font-weight: 700;
font-family: var(--font-display);
cursor: pointer; transition: all 0.2s;
text-transform: uppercase; letter-spacing: 0.04em;
display: inline-block;
}
.btn-s:hover {
border-color: var(--sky); color: var(--sky);
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--border-dark);
}
.btn-s:active { transform: translate(0,0); box-shadow: none; }
.btn-s:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* ==================================================================== */
/* 03-nav-footer.css */
/* ==================================================================== */
/* ==================================================================== */
/* 03-nav-footer.css */
/* ==================================================================== */
/* =================================================================
NAV
================================================================= */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: color-mix(in srgb, var(--bg) 95%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border-dark);
transition: box-shadow 0.2s, padding 0.2s;
}
.nav.scrolled {
box-shadow: 0 1px 8px rgba(0,0,0,0.05);
}
.nav.scrolled .nav-inner { padding-top: 8px; padding-bottom: 8px; }
.nav-inner {
max-width: 1100px; margin: 0 auto; padding: 12px 40px;
display: flex; align-items: center; justify-content: space-between;
transition: padding 0.2s;
}
/* Pivot marque Adaprompt 2026-04-24 : wordmark nav en Inter, wordmark
eclate en "Ada" + "prompt" pour permettre un styling de jonction.
Squares brand-bars deplaces en tagline sous le wordmark.
Footer inchange pour comparaison cote staging. */
.nav-logo {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 17px;
font-weight: 700;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: -0.01em;
display: inline-grid;
grid-template-columns: auto auto 1fr;
grid-template-areas:
"prefix suffix badge"
"dot dot badge";
column-gap: 1px;
row-gap: 8px;
align-items: center;
line-height: 1;
font-feature-settings: 'ss01', 'cv11';
}
/* Direction hybride retenue (@creative + @designer consensus 2026-04-24) :
- Bascule de graisse : ADA 700 tracking serre / prompt 400 tracking ouvert.
- Filet sky 1px continu sous le wordmark via ::before parent qui span les
2 cols de la ligne 1 du grid (evite la coupure entre prefix et suffix). */
.nav-logo::before {
content: "";
grid-column: prefix / suffix-end;
grid-row: 1;
align-self: end;
justify-self: stretch;
height: 1px;
background: var(--sky);
opacity: 0.55;
margin-bottom: -4px;
}
.nav-logo-prefix {
grid-area: prefix;
color: var(--text-primary);
font-weight: 700;
letter-spacing: -0.02em;
}
.nav-logo-suffix {
grid-area: suffix;
color: var(--text-primary);
font-weight: 400;
letter-spacing: 0.08em;
}
.nav-logo .dot {
grid-area: dot;
display: inline-flex;
gap: 3px;
margin-left: 0;
align-items: center;
}
/* Anciennement .nav-brand-bar (barres verticales). Renommage conserve pour
compat ; le visuel est desormais un carre aligne sur la signature hero
(5 swatches 10x10 cf .hero-badge .swatch). */
.nav-brand-bar {
display: inline-block;
width: 11px;
height: 11px;
border-radius: 2px;
}
.nav-logo .badge {
grid-area: badge;
justify-self: start;
align-self: center;
font-size: 8px; font-weight: 700;
background: var(--bg-card); color: var(--text-secondary);
border: 1px solid var(--border-dark);
padding: 2px 6px; margin-left: 10px;
text-transform: uppercase; letter-spacing: 0.1em;
line-height: 1.4; border-radius: 3px;
}
/* Sous-etiquette version injectee par js/app.js sous le badge "Alpha" */
.badge-version {
display: inline-block;
font-size: 7px; font-weight: 600;
opacity: 0.75;
letter-spacing: 0.04em;
margin-left: 2px;
padding-left: 4px;
border-left: 1px solid currentColor;
text-transform: none;
}
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-link {
color: var(--text-secondary); font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
font-family: var(--font-display); transition: color 0.2s;
}
.nav-link:hover { color: var(--sky); }
.nav-link:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.nav-links .btn-p.nav-cta { padding: 8px 20px; font-size: 11px; }
.nav-burger {
display: none; flex-direction: column; gap: 5px;
padding: 8px; cursor: pointer; z-index: 110;
background: none; border: none;
transition: background 0.2s, transform 0.2s;
}
.nav-burger span {
display: block; width: 24px; height: 2px;
background: var(--text-primary); transition: all 0.3s;
}
.nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* Etat ouvert : le burger reste cliquable au-dessus de l'overlay menu
(sinon il se cache dessous et on perd la sortie visuelle). Cercle
discret autour pour affirmer sa tangibilite. */
.nav-burger.open {
z-index: 1600 !important;
background-color: #F6F8FA !important;
border-radius: 50% !important;
padding: 10px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
[data-theme="dark"] .nav-burger.open {
background-color: #21262D !important;
}
.nav-burger.open span {
width: 22px;
height: 2.5px;
}
/* =================================================================
FOOTER
================================================================= */
footer {
border-top: 1px solid var(--border-dark); padding: 24px 40px;
background: var(--bg-card);
}
.footer-inner {
max-width: 1100px; margin: 0 auto;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 16px;
}
.footer-logo {
font-family: var(--font-display); font-size: 16px;
font-weight: 700; color: var(--text-primary); text-transform: uppercase;
display: flex; align-items: center;
}
/* Footer : meme signature que la nav (5 carres marque), mais version
compacte pour ne pas pousser footer-logo au-dela du flex space-between.
Avant la refonte le .dot etait un simple disque 6x6 ; on garde un total
proche de ca pour preserver l'alignement de footer-links sur la ligne 1. */
.footer-logo .dot {
display: inline-flex;
gap: 1.5px;
margin-left: 6px;
align-items: center;
}
.footer-logo .nav-brand-bar {
width: 7px;
height: 7px;
border-radius: 1.5px;
}
.footer-logo .badge {
font-size: 7px; font-weight: 700;
background: var(--yellow); color: var(--black);
padding: 1px 5px; margin-left: 6px;
text-transform: uppercase; letter-spacing: 0.1em;
border-radius: 2px;
}
.footer-logo .by {
font-size: 10px; color: var(--text-tertiary); margin-left: 10px;
font-weight: 600; letter-spacing: 0.06em;
}
.footer-copy { font-size: 11px; color: var(--text-tertiary); }
.footer-links { display: flex; gap: 20px; }
.footer-link {
font-size: 11px; color: var(--text-secondary); font-family: var(--font-display);
text-transform: uppercase; letter-spacing: 0.06em; transition: color 0.2s;
}
.footer-link:hover { color: var(--sky); }
/* =================================================================
SKIP LINK
================================================================= */
.skip-link:focus {
position: fixed !important;
clip: auto !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
background: var(--sky);
color: var(--black);
padding: 8px 16px;
z-index: 999;
font-weight: 700;
}
/* =================================================================
NAV MENU BURGER MOBILE : plein ecran defensif
================================================================= */
@media (max-width: 900px) {
/* Neutralise le containing block cree par backdrop-filter sur .nav. */
.nav {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: var(--bg) !important;
}
.nav-links.open {
display: flex !important;
flex-direction: column !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: #ffffff !important;
z-index: 1500 !important;
padding: 88px 32px 48px !important;
gap: 24px !important;
justify-content: center !important;
align-items: center !important;
overflow-y: auto;
box-sizing: border-box;
}
[data-theme="dark"] .nav-links.open {
background: #0D1117 !important;
}
.nav-links.open .nav-link {
font-size: 24px !important;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-primary);
}
.nav-links.open .nav-link:hover { color: var(--sky); }
/* Menu ouvert = les FAB disparaissent pour ne pas polluer la surface. */
body.menu-open .tuteur-fab,
body.menu-open .feedback-fab {
display: none !important;
}
/* Fallback modernes si la classe menu-open n'a pas ete posee (edge case). */
body:has(.nav-links.open) .tuteur-fab,
body:has(.nav-links.open) .feedback-fab {
display: none !important;
}
/* Niveau empilement hors menu ouvert : FAB au-dessus de la nav sticky. */
.tuteur-fab { z-index: 1200; }
.feedback-fab { z-index: 1200; }
}
/* Progressive enhancement : blur translucide si le navigateur le supporte.
Safari a besoin du prefixe -webkit-. Sur les navigateurs sans
backdrop-filter (vieux Firefox Android), on garde le bg solide ci-dessus. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
@media (max-width: 900px) {
.nav-links.open {
background: rgba(255, 255, 255, 0.88) !important;
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
}
[data-theme="dark"] .nav-links.open {
background: rgba(13, 17, 23, 0.88) !important;
}
}
}
/* --- Tres petits ecrans (iPhone SE, Android compacts) --- */
@media (max-width: 400px) {
.hero h1 { font-size: 1.65rem; }
.cours-title { font-size: 1.4rem; }
.nav-logo { font-size: 14px; }
.cours-try-ada { padding: 12px 10px; }
.cours-try-ada-submit { padding: 8px 12px; }
.feedback-fab svg { width: 26px; height: 26px; }
}
/* Nav badge : priorise le logo sur mobile, on masque des 480px au lieu
de 400. Le badge Alpha v0.1.0 surchargeait la barre entre 401-640px. */
@media (max-width: 480px) {
.nav-logo .badge { display: none; }
}
/* ==================================================================== */
/* 04-hero.css */
/* ==================================================================== */
/* === Auto-restored attribute selectors (anti-faux-positif PurgeCSS) === */
[data-theme="dark"] .nav-burger.open {
background-color: #21262D !important;
}
@media (max-width: 900px) {
[data-theme="dark"] .nav-links.open {
background: #0D1117 !important;
}
}
@media (max-width: 900px) {
body.menu-open .tuteur-fab,
body.menu-open .feedback-fab {
display: none !important;
}
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
@media (max-width: 900px) {
[data-theme="dark"] .nav-links.open {
background: rgba(13, 17, 23, 0.88) !important;
}
}
}
/* ==================================================================== */
/* 04-hero.css */
/* ==================================================================== */
/* =================================================================
HERO (compact, centered)
================================================================= */
.hero {
padding: 96px 40px 44px; text-align: center;
position: relative; overflow: hidden;
border-bottom: 1px solid var(--border-dark);
min-height: calc(100vh - 48px);
display: flex;
align-items: center;
justify-content: center;
}
.hero-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; width: 100%; }
.hero-content { max-width: 860px; margin: 0 auto; }
.hero-badge {
display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px;
}
/* Swatches du hero-badge : carres dormants (etat par defaut).
Au hover, metamorphose en mini-galet avec 2 yeux. Chaque carre
porte un title= (Ada, Linus, Alan, Grace, Margaret) qui revele
l'identite dormante. Convention du panthéon (voir
tasks/mascottes-catalogue.md). */
.hero-badge .swatch {
width: 16px; height: 16px; border-radius: 3px;
position: relative;
cursor: help;
transition: border-radius 0.25s ease, width 0.25s ease, height 0.25s ease, transform 0.25s ease;
}
/* Deux yeux en pseudo-elements, caches par defaut (scale 0). */
.hero-badge .swatch::before,
.hero-badge .swatch::after {
content: "";
position: absolute;
top: 50%;
width: 2.2px; height: 2.2px;
border-radius: 50%;
background: var(--text-primary);
transform: translateY(-50%) scale(0);
transition: transform 0.25s ease;
pointer-events: none;
}
.hero-badge .swatch::before { left: 5px; }
.hero-badge .swatch::after { right: 5px; }
/* Hover : le carre devient galet (22x20 ellipse propre, haut et bas
pleinement arrondis, cotes epais pour rappeler les avatars du produit). */
.hero-badge .swatch:hover {
width: 22px; height: 20px;
border-radius: 50%;
transform: translateY(-2px);
}
.hero-badge .swatch:hover::before,
.hero-badge .swatch:hover::after {
transform: translateY(-50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
.hero-badge .swatch,
.hero-badge .swatch::before,
.hero-badge .swatch::after { transition: none; }
}
.hero-badge .lbl {
font-family: var(--font-display); font-size: 11px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 0.12em; color: var(--text-secondary); margin-left: 10px;
}
.hero h1 {
font-family: var(--font-display);
font-size: clamp(40px, 6.5vw, 76px); font-weight: 800;
line-height: 1.18; color: var(--text-primary); margin-bottom: 24px;
text-transform: uppercase; letter-spacing: -0.025em;
}
.hero h1 .hl {
display: inline-block;
background: var(--sky);
color: #fff;
padding: 0.02em 0.2em 0.08em;
border-radius: 4px;
line-height: 1;
}
.hero .lead {
font-size: 17px; line-height: 1.55; color: var(--text-secondary);
max-width: 860px; margin: 0 auto 32px;
}
.hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-trust {
margin-top: 20px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
}
/* =================================================================
MARQUEE
================================================================= */
.marquee-wrap {
border-bottom: 1px solid var(--border-dark);
background: var(--bg-card); padding: 12px 0; overflow: hidden; white-space: nowrap;
}
.marquee-track {
display: inline-flex; align-items: center;
animation: marquee 30s linear infinite;
}
.marquee-item {
font-family: var(--font-display); font-size: 12px;
font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
padding: 0 24px;
}
.marquee-dot { width: 4px; height: 4px; flex-shrink: 0; border-radius: 50%; }
/* ==================================================================== */
/* 05-home.css */
/* ==================================================================== */
/* ==================================================================== */
/* 05-home.css */
/* ==================================================================== */
/* =================================================================
SECTION LABEL
================================================================= */
.section-label {
display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.section-label .bar { width: 32px; height: 3px; border-radius: 2px; }
.section-label span {
font-family: var(--font-display); font-size: 11px;
font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
}
/* =================================================================
CATALOGUE (vertical list layout)
================================================================= */
.catalogue { padding: 80px 0; }
.catalogue h2 {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 44px); font-weight: 700;
color: var(--text-primary); text-transform: uppercase;
line-height: 1.05; letter-spacing: -0.01em;
}
.catalogue .sub {
font-size: 15px; color: var(--text-secondary); max-width: 460px;
line-height: 1.75; margin-top: 12px;
}
/* Access badges */
/* Combo card full width */
/* =================================================================
PARCOURS (prominent banner)
================================================================= */
.parcours {
padding: 80px 0;
border-top: 1px solid var(--border-dark);
border-bottom: 1px solid var(--border-dark);
background: var(--bg-card);
}
.parcours h2 {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 44px); font-weight: 700;
color: var(--text-primary); text-transform: uppercase;
line-height: 1.1; letter-spacing: -0.01em;
}
.parcours .sub {
font-size: 15px; color: var(--text-secondary); max-width: 500px;
line-height: 1.75; margin-top: 12px;
}
.parcours-step {
padding: 28px 24px; position: relative;
border-right: 1px solid var(--border-dark);
display: flex; flex-direction: column;
}
.parcours-step:last-child { border-right: none; }
.parcours-step-num {
font-family: var(--font-display); font-size: 10px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; margin-bottom: 8px;
}
/* =================================================================
APPROCHE (horizontal cards)
================================================================= */
.approche { padding: 80px 0; }
.approche-grid {
max-width: 1100px; margin: 0 auto; padding-inline: 40px;
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
}
.approche-item {
padding: 32px 28px; border-radius: 6px;
border: 1px solid var(--border-dark);
background: var(--bg-card);
transition: all 0.3s;
}
.approche-item:hover {
border-color: var(--sky);
transform: translateY(-2px);
}
.approche-num {
font-family: var(--font-display);
font-size: 48px; font-weight: 700; color: var(--text-primary);
opacity: 0.06; line-height: 1; margin-bottom: 12px;
}
.approche-item h4 {
font-family: var(--font-display);
font-size: 17px; font-weight: 700; color: var(--text-primary);
margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.02em;
}
.approche-item p { font-size: 13px; line-height: 1.7; margin: 0; color: var(--text-secondary); }
/* Color accents on approche items */
.approche-item.sky { border-left: 3px solid var(--sky); }
.approche-item.yellow { border-left: 3px solid var(--yellow); }
.approche-item.blue { border-left: 3px solid var(--blue); }
/* =================================================================
QUOTE
================================================================= */
.quote-section {
max-width: 800px; margin: 0 auto; padding: 80px 40px; text-align: center;
}
.quote-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 24px; }
.quote-dots .d { width: 16px; height: 3px; border-radius: 2px; }
.quote-section p {
font-family: var(--font-display);
font-size: clamp(20px, 3vw, 28px); font-weight: 500;
color: var(--text-primary); line-height: 1.5;
}
/* =================================================================
CONTACT
================================================================= */
.contact-section {
padding: 0 40px 100px;
border-top: 1px solid var(--border-dark);
padding-top: 80px;
}
.contact-box {
max-width: 700px; margin: 0 auto;
border: 1px solid var(--border-dark); border-radius: 8px;
overflow: hidden; background: var(--bg-card);
}
.contact-bar { display: flex; height: 4px; }
.contact-bar div { flex: 1; }
.contact-inner { padding: 48px; }
.contact-inner h2 {
font-family: var(--font-display);
font-size: clamp(24px, 3vw, 34px); font-weight: 700;
color: var(--text-primary); margin-bottom: 12px; text-transform: uppercase;
text-align: center;
}
.contact-inner .sub {
font-size: 14px; color: var(--text-secondary); line-height: 1.7;
max-width: 480px; margin: 0 auto 32px; text-align: center;
}
.contact-form { max-width: 560px; margin: 0 auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label {
display: block; font-family: var(--font-display);
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; margin-bottom: 6px; color: var(--text-secondary);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%; padding: 12px 14px;
background: var(--bg); color: var(--text-primary);
border: 1px solid var(--border-dark); border-radius: 4px;
font-family: var(--font-body); font-size: 14px;
outline: none; transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--sky); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-group select { cursor: pointer; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-tertiary); }
/* Consent RGPD sur le formulaire contact : checkbox + texte + lien. */
.form-consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 4px 0 16px;
cursor: pointer;
font-size: 12px;
line-height: 1.5;
color: var(--text-tertiary);
}
.form-consent input[type="checkbox"] {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--sky);
cursor: pointer;
}
.form-consent a {
color: var(--text-secondary);
text-decoration: underline;
}
.form-consent a:hover { color: var(--sky); }
.form-submit {
width: 100%; padding: 14px;
background: var(--sky); color: var(--black);
border: 2px solid var(--sky); border-radius: 4px;
font-family: var(--font-display); font-size: 13px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; cursor: pointer;
transition: all 0.2s;
}
.form-submit:hover { background: var(--white); border-color: var(--white); }
.form-submit:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.contact-fine {
font-size: 11px; color: var(--text-tertiary); margin-top: 14px; text-align: center;
}
/* Form feedback (created by JS) */
.form-feedback {
margin-top: 12px; padding: 12px 16px;
font-size: 13px; font-weight: 600;
font-family: var(--font-display);
text-transform: uppercase; letter-spacing: 0.04em;
border-radius: 4px;
}
.form-feedback.error {
background: rgba(215,0,0,0.08); color: var(--red);
border: 1px solid rgba(215,0,0,0.3);
}
.form-feedback.success {
background: rgba(96,191,245,0.08); color: var(--blue);
border: 1px solid rgba(96,191,245,0.3);
}
/* ==================================================================== */
/* 06-landing-refonte.css */
/* ==================================================================== */
/* ==================================================================== */
/* 06-landing-refonte.css */
/* ==================================================================== */
/* =================================================================
LANDING REFONTE
================================================================= */
/* ----- Hero : ligne de preuve sobre (remplace hero-stats) ----- */
/* ----- Section label reutilise (h2 + sub coherent) ----- */
.bundles h2 {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
color: var(--text-primary);
text-transform: uppercase;
line-height: 1.05;
letter-spacing: -0.01em;
}
.bundles .sub {
font-size: 15px;
color: var(--text-secondary);
max-width: 540px;
line-height: 1.75;
margin-top: 12px;
}
/* =================================================================
WALKTHROUGH
================================================================= */
.walkthrough-intro { margin-bottom: 40px; }
.walkthrough-personas {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.walkthrough-persona {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 24px 22px;
background: var(--bg-card);
border: 1px solid var(--border-dark);
border-radius: 8px;
text-align: left;
cursor: pointer;
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
color: var(--text-primary);
}
.walkthrough-persona:hover {
border-color: var(--sky);
transform: translateY(-2px);
box-shadow: var(--elev-floating);
}
.walkthrough-persona:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 2px;
}
.walkthrough-persona[data-active] {
border-color: var(--sky);
background: color-mix(in srgb, var(--sky) 8%, var(--bg-card));
box-shadow: inset 0 -3px 0 var(--sky);
}
.walkthrough-persona-eyebrow {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--sky);
}
.walkthrough-persona-title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
line-height: 1.25;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.walkthrough-persona-desc {
font-size: 13px;
line-height: 1.6;
color: var(--text-secondary);
}
/* Stage et panels */
.walkthrough-stage {
position: relative;
min-height: 200px;
}
.walkthrough-panel {
background: var(--bg-card);
border: 1px solid var(--border-dark);
border-radius: 8px;
padding: 32px;
opacity: 0;
transform: translateY(8px);
transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.walkthrough-panel[data-active] {
opacity: 1;
transform: none;
}
.walkthrough-panel[hidden] { display: none; }
.walkthrough-panel-head {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-dark);
}
.walkthrough-panel-kicker {
display: inline-block;
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--caramel);
margin-bottom: 8px;
}
.walkthrough-panel-title {
font-family: var(--font-display);
font-size: clamp(22px, 3vw, 30px);
font-weight: 700;
line-height: 1.15;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: -0.01em;
margin: 0;
}
.walkthrough-panel-grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 32px;
align-items: start;
}
/* Recit + sequence */
.walkthrough-story-kicker {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-tertiary);
margin-bottom: 8px;
}
.walkthrough-story-text {
font-size: 15px;
line-height: 1.75;
color: var(--text-secondary);
margin-bottom: 14px;
max-width: 58ch;
}
.walkthrough-sequence-intro {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-tertiary);
margin: 24px 0 12px;
}
.walkthrough-sequence {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.walkthrough-step {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: start;
padding: 14px 16px;
background: var(--bg);
border: 1px solid var(--border-dark);
border-radius: 6px;
border-left: 3px solid var(--sky);
}
.walkthrough-step[data-color="sky"] { border-left-color: var(--sky); }
.walkthrough-step[data-color="yellow"] { border-left-color: var(--yellow); }
.walkthrough-step[data-color="blue"] { border-left-color: var(--blue); }
.walkthrough-step[data-color="green"] { border-left-color: var(--green); }
.walkthrough-step[data-color="red"] { border-left-color: var(--red); }
.walkthrough-step[data-color="caramel"] { border-left-color: var(--caramel); }
.walkthrough-step-num {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
line-height: 1;
color: var(--text-primary);
min-width: 32px;
padding-top: 2px;
}
.walkthrough-step-body {
display: flex;
flex-direction: column;
gap: 3px;
}
.walkthrough-step-title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.walkthrough-step-meta {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-tertiary);
}
.walkthrough-step-desc {
font-size: 13px;
line-height: 1.6;
color: var(--text-secondary);
margin-top: 4px;
}
.walkthrough-arrow {
align-self: center;
justify-self: center;
font-size: 14px;
color: var(--text-tertiary);
line-height: 1;
padding: 0;
}
/* Bundle aside */
.walkthrough-bundle {
padding: 24px;
background: var(--bg);
border: 1px solid var(--border-dark);
border-radius: 8px;
border-top: 3px solid var(--sky);
position: sticky;
top: 80px;
}
.walkthrough-bundle[data-bundle="decouverte"] { border-top-color: var(--sky); }
.walkthrough-bundle[data-bundle="pro"] { border-top-color: var(--caramel); }
.walkthrough-bundle[data-bundle="solo"] { border-top-color: var(--yellow); }
.walkthrough-bundle[data-bundle="team"] { border-top-color: var(--red); }
.walkthrough-bundle-tag {
display: inline-block;
font-family: var(--font-display);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 4px 10px;
border-radius: 2px;
background: rgba(96,191,245,0.12);
color: var(--sky);
margin-bottom: 12px;
}
.walkthrough-bundle[data-bundle="pro"] .walkthrough-bundle-tag { background: rgba(175,101,40,0.14); color: var(--caramel); }
.walkthrough-bundle[data-bundle="solo"] .walkthrough-bundle-tag { background: rgba(255,206,0,0.14); color: var(--yellow); }
.walkthrough-bundle[data-bundle="team"] .walkthrough-bundle-tag { background: rgba(215,0,0,0.12); color: var(--red); }
.walkthrough-bundle-title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: -0.01em;
margin: 0 0 10px;
}
.walkthrough-bundle-pitch {
font-size: 13px;
line-height: 1.7;
color: var(--text-secondary);
margin-bottom: 16px;
}
.walkthrough-bundle-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-dark);
}
.walkthrough-bundle-price-new {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
line-height: 1;
}
.walkthrough-bundle-price-old {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: var(--text-tertiary);
text-decoration: line-through;
}
.walkthrough-bundle-save {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 3px 8px;
border-radius: 2px;
background: rgba(88,214,141,0.15);
color: var(--green);
}
.walkthrough-bundle-ctas {
display: flex;
flex-direction: column;
gap: 10px;
}
.walkthrough-bundle-ctas .btn-p,
.walkthrough-bundle-ctas .btn-s {
padding: 12px 18px;
font-size: 12px;
text-align: center;
}
/* =================================================================
ARBRE DE PARCOURS
================================================================= */
/* =================================================================
VITRINE BUNDLES
================================================================= */
.bundles {
padding: 64px 0;
border-top: 1px solid var(--border-dark);
}
.bundles-intro { margin-bottom: 36px; text-align: center; }
.bundles-intro h2 { text-transform: uppercase; }
.bundle-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.bundle-card {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px 20px 18px;
background: var(--bg);
border: 1px solid var(--border-dark);
border-radius: 8px;
border-top: 3px solid var(--sky);
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.bundle-card[data-bundle="decouverte"] { border-top-color: var(--sky); }
.bundle-card[data-bundle="pro"] { border-top-color: var(--caramel); }
.bundle-card[data-bundle="solo"] { border-top-color: var(--yellow); }
.bundle-card[data-bundle="team"] { border-top-color: var(--red); }
.bundle-card:hover {
transform: translateY(-3px);
box-shadow: var(--elev-floating);
}
.bundle-card[data-bundle="decouverte"]:hover { border-color: var(--sky); }
.bundle-card[data-bundle="pro"]:hover { border-color: var(--caramel); }
.bundle-card[data-bundle="solo"]:hover { border-color: var(--yellow); }
.bundle-card[data-bundle="team"]:hover { border-color: var(--red); }
.bundle-card-flag {
position: absolute;
top: -8px;
right: 14px;
font-family: var(--font-display);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 4px 9px;
border-radius: 3px;
background: var(--caramel);
color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.bundle-card-head {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 4px;
}
.bundle-card-persona {
font-family: var(--font-display);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
background: var(--bg-card);
border: 1px solid var(--border-dark);
padding: 3px 7px;
border-radius: 3px;
align-self: flex-start;
white-space: nowrap;
}
.bundle-card-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
line-height: 1.15;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: -0.01em;
margin: 0;
}
.bundle-card-hook {
font-size: 13px;
line-height: 1.45;
color: var(--text-secondary);
margin: 2px 0 0;
}
.bundle-card-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}
.bundle-card-price-new {
font-family: var(--font-display);
font-size: 26px;
font-weight: 800;
color: var(--text-primary);
line-height: 1;
letter-spacing: -0.01em;
}
.bundle-card-price-old {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: var(--text-tertiary);
text-decoration: line-through;
}
.bundle-card-price-save {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 3px 7px;
border-radius: 2px;
background: rgba(88,214,141,0.15);
color: var(--green);
}
.bundle-card-courses {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 8px 0 0;
list-style: none;
border-top: 1px solid var(--border-dark);
}
.bundle-card-courses li {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
line-height: 1.4;
color: var(--text-secondary);
}
.bundle-card-courses li .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.5;
flex-shrink: 0;
}
.bundle-card-courses li .meta {
font-family: var(--font-display);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--green);
margin-left: auto;
}
/* Sous-tuiles sieges pour Team */
.bundle-card-cta {
margin-top: auto;
padding: 11px 16px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
}
/* ==================================================================== */
/* 07-mascottes.css */
/* ==================================================================== */
/* === Auto-restored attribute selectors (anti-faux-positif PurgeCSS) === */
.walkthrough-persona[data-active] {
border-color: var(--sky);
background: color-mix(in srgb, var(--sky) 8%, var(--bg-card));
box-shadow: inset 0 -3px 0 var(--sky);
}
.walkthrough-panel[data-active] {
opacity: 1;
transform: none;
}
.walkthrough-step[data-color="sky"] { border-left-color: var(--sky); }
.walkthrough-step[data-color="yellow"] { border-left-color: var(--yellow); }
.walkthrough-step[data-color="blue"] { border-left-color: var(--blue); }
.walkthrough-step[data-color="green"] { border-left-color: var(--green); }
.walkthrough-step[data-color="red"] { border-left-color: var(--red); }
.walkthrough-step[data-color="caramel"] { border-left-color: var(--caramel); }
.walkthrough-bundle[data-bundle="decouverte"] { border-top-color: var(--sky); }
.walkthrough-bundle[data-bundle="pro"] { border-top-color: var(--caramel); }
.walkthrough-bundle[data-bundle="solo"] { border-top-color: var(--yellow); }
.walkthrough-bundle[data-bundle="team"] { border-top-color: var(--red); }
.walkthrough-bundle[data-bundle="pro"] .walkthrough-bundle-tag { background: rgba(175,101,40,0.14); color: var(--caramel); }
.walkthrough-bundle[data-bundle="solo"] .walkthrough-bundle-tag { background: rgba(255,206,0,0.14); color: var(--yellow); }
.walkthrough-bundle[data-bundle="team"] .walkthrough-bundle-tag { background: rgba(215,0,0,0.12); color: var(--red); }
.parcours-tree-node[data-color="sky"] { border-top-color: var(--sky); }
.parcours-tree-node[data-color="yellow"] { border-top-color: var(--yellow); }
.parcours-tree-node[data-color="blue"] { border-top-color: var(--blue); }
.parcours-tree-node[data-color="green"] { border-top-color: var(--green); }
.parcours-tree-node[data-color="red"] { border-top-color: var(--red); }
.parcours-tree-node[data-color="caramel"] { border-top-color: var(--caramel); }
.parcours-tree-node[data-color="yellow"] .parcours-tree-node-bundle { background: rgba(255,206,0,0.14); color: var(--yellow); }
.parcours-tree-node[data-color="blue"] .parcours-tree-node-bundle { background: rgba(46,99,164,0.14); color: var(--blue); }
.parcours-tree-node[data-color="red"] .parcours-tree-node-bundle { background: rgba(215,0,0,0.1); color: var(--red); }
.parcours-tree-node[data-color="caramel"] .parcours-tree-node-bundle { background: rgba(175,101,40,0.14); color: var(--caramel); }
.parcours-tree-node[data-color="green"] .parcours-tree-node-bundle { background: rgba(88,214,141,0.14); color: var(--green); }
.bundle-card[data-bundle="decouverte"] { border-top-color: var(--sky); }
.bundle-card[data-bundle="pro"] { border-top-color: var(--caramel); }
.bundle-card[data-bundle="solo"] { border-top-color: var(--yellow); }
.bundle-card[data-bundle="team"] { border-top-color: var(--red); }
.bundle-card[data-bundle="decouverte"]:hover { border-color: var(--sky); }
.bundle-card[data-bundle="pro"]:hover { border-color: var(--caramel); }
.bundle-card[data-bundle="solo"]:hover { border-color: var(--yellow); }
.bundle-card[data-bundle="team"]:hover { border-color: var(--red); }
/* ==================================================================== */
/* 07-mascottes.css */
/* ==================================================================== */
/* =================================================================
MASCOTTES LANDING : carrousel choix de personnage
================================================================= */
.mascottes-landing {
padding: 80px 0;
border-top: 1px solid var(--border-dark);
background: var(--bg-card);
--current-accent: var(--sky);
}
/* Tete de section : titre + tagline, au-dessus du carrousel. */
.mascottes-section-head {
max-width: 720px;
margin: 0 auto 48px;
text-align: center;
}
/* Ancre #ada portee par le titre lui-meme. Le scroll-padding-top global
(96px sur :root) place naturellement la cible sous la nav fixe ;
scroll-margin-top negatif resserre le tampon visuel pour caler le
titre juste sous le bandeau au lieu d'un grand vide blanc. */
.mascottes-section-title[id="ada"] {
scroll-margin-top: -8px;
}
.mascottes-section-title {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 10px;
}
.mascottes-section-tagline {
font-size: 15px;
line-height: 1.5;
color: var(--text-secondary);
margin: 0;
}
.mascottes-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 56px;
align-items: start;
max-width: 1000px;
margin: 0 auto;
}
.mascottes-stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.mascottes-content {
text-align: left;
}
/* Avatar-wrap : taille fixe, un seul SVG visible a la fois (les autres
ont l'attribut hidden). Pas de scene 3D, pas de spotlight : on revient
a la purete originelle d'Ada (galet organique + yeux qui clignent). */
.mascottes-avatar-wrap {
position: relative;
width: 220px;
height: 220px;
}
.mascottes-avatar {
width: 100%;
height: 100%;
display: block;
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.12));
}
.mascottes-avatar[hidden] {
display: none;
}
/* =================================================================
ANIMATIONS MASCOTTES
================================================================= */
/* Clignement des yeux, cycle 8s. Les yeux scaleY de 1 a 0.08 brievement. */
@keyframes mascotte-blink {
0%, 92%, 100% { transform: scaleY(1); }
94%, 97% { transform: scaleY(0.08); }
}
.mascottes-avatar .m-eye {
transform-box: fill-box;
transform-origin: center;
animation: mascotte-blink 8s infinite ease-in-out;
}
.mascottes-avatar .m-eye-right {
animation-delay: 0.04s; /* clin desynchronise pour effet naturel */
}
/* Alan scrute : le groupe des yeux se deplace gauche-droite en boucle,
pendant que chaque oeil continue son clignement individuel. */
@keyframes alan-scan {
0%, 100% { transform: translateX(0); }
30% { transform: translateX(-1.6px); }
60% { transform: translateX(1.6px); }
80% { transform: translateX(0.4px); }
}
.mascottes-avatar[data-m="alan"] .m-eyes {
transform-box: fill-box;
transform-origin: center;
animation: alan-scan 5s infinite ease-in-out;
}
/* Grace wink : l'oeil droit fait un clin d'oeil marque toutes les 6s
(wink a part entiere), l'oeil gauche garde le blink classique. */
@keyframes grace-wink {
0%, 80%, 100% { transform: scaleY(1); }
85%, 93% { transform: scaleY(0.08); }
}
.mascottes-avatar[data-m="grace"] .m-eye-right {
animation: grace-wink 6s infinite ease-in-out;
}
/* Entrance Pokemon : scale-in leger + fade, une seule fois. */
@keyframes mascotte-entrance {
0% { transform: scale(0.88); opacity: 0; }
60% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.mascottes-avatar.is-entering {
animation: mascotte-entrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1 both;
}
/* Dormantes : les z apparaissent en fondu sequentiel a l'arrivee,
puis restent en place. Pas de loop. */
@keyframes sleep-z-in {
0% { opacity: 0; transform: translate(1px, 2px); }
100% { opacity: 0.5; transform: translate(0, 0); }
}
.mascottes-avatar.is-entering .m-z-1 {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: sleep-z-in 0.6s ease-out 1 both;
animation-delay: 0.3s;
}
.mascottes-avatar.is-entering .m-z-2 {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: sleep-z-in 0.6s ease-out 1 both;
animation-delay: 0.55s;
}
@media (prefers-reduced-motion: reduce) {
.mascottes-avatar .m-eye,
.mascottes-avatar.is-entering,
.mascottes-avatar.is-entering .m-z-1,
.mascottes-avatar.is-entering .m-z-2 {
animation: none;
}
}
.mascottes-dormant-badge {
position: absolute;
bottom: 6px;
right: 6px;
padding: 4px 10px;
background: var(--bg);
border: 1px solid var(--border-dark);
border-radius: 999px;
font: 700 10px/1 var(--font-display);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
z-index: 2;
}
.mascottes-nav {
display: flex;
align-items: center;
gap: 16px;
}
.mascottes-prev,
.mascottes-next {
background: none;
border: 1px solid var(--border-dark);
border-radius: 50%;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.mascottes-prev:hover,
.mascottes-next:hover {
color: var(--text-primary);
border-color: var(--current-accent);
transform: translateY(-1px);
}
.mascottes-prev:focus-visible,
.mascottes-next:focus-visible {
outline: 2px solid var(--current-accent);
outline-offset: 3px;
}
.mascottes-position {
font: 700 12px/1 var(--font-display);
letter-spacing: 0.08em;
color: var(--text-tertiary);
min-width: 36px;
text-align: center;
}
.mascottes-caption {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
min-height: 84px;
}
.mascottes-caption-name {
font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.01em;
color: var(--text-primary);
}
.mascottes-caption-role {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-tertiary);
}
.mascottes-caption-signature {
margin-top: 10px;
font-size: 14px;
font-style: italic;
color: var(--text-secondary);
line-height: 1.4;
max-width: 220px;
}
/* Colonne de droite : contenu qui switch selon la mascotte courante.
Le heading est split en deux lignes fixes (static + dynamic) avec
nowrap sur chacune pour garantir un rendu uniforme quel que soit
le nom ou le verbe de la mascotte. min-height reserve la hauteur
pour eviter les sauts de layout. */
.mascottes-heading {
font-family: var(--font-display);
font-size: clamp(26px, 3.2vw, 38px);
font-weight: 800;
line-height: 1.15;
margin: 0 0 24px;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: -0.02em;
}
.mascottes-heading-static,
.mascottes-heading-dynamic {
display: block;
white-space: nowrap; /* chaque ligne reste sur une ligne */
}
.mascottes-heading .hl {
display: inline-block;
background: var(--current-accent);
color: #fff;
padding: 0.02em 0.2em 0.08em;
border-radius: 4px;
line-height: 1;
transition: background 0.22s ease;
}
.mascottes-quote {
margin: 0 0 28px;
padding: 20px 22px;
border-left: 3px solid var(--current-accent);
background: var(--bg);
border-radius: 6px;
transition: border-color 0.22s ease;
}
.mascottes-quote p {
margin: 0;
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
font-style: italic;
}
.mascottes-features {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: flex;
flex-direction: column;
gap: 10px;
}
.mascottes-features li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
line-height: 1.45;
color: var(--text-primary);
}
.mascottes-features li::before {
content: "";
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--current-accent);
margin-top: 7px;
transition: background 0.22s ease;
}
.mascottes-funfact {
margin: -4px 0 22px;
padding: 12px 0 0;
border-top: 1px dashed var(--border, rgba(0, 0, 0, 0.12));
font-size: 12.5px;
font-style: italic;
line-height: 1.55;
color: var(--text-tertiary);
}
.mascottes-funfact[hidden] {
display: none;
}
.mascottes-funfact strong {
font-style: normal;
font-weight: 600;
color: var(--text-secondary);
margin-right: 4px;
}
.mascottes-cta {
display: inline-block;
}
.mascottes-cta[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
border-color: var(--border-dark);
color: var(--text-tertiary);
}
/* Animation de bascule : caption + partie DYNAMIQUE du contenu fadent
pendant le swap. Le titre 'Vous n'etes pas seul.' reste permanent
(ancre visuel, rassure que la section ne recharge pas). Les avatars
ont leur propre transition via data-offset. Durees alignees sur le
timeout JS (180ms) pour un fade-out complet avant swap. */
.mascottes-landing.is-switching .mascottes-caption,
.mascottes-landing.is-switching .mascottes-heading-dynamic,
.mascottes-landing.is-switching .mascottes-quote,
.mascottes-landing.is-switching .mascottes-features,
.mascottes-landing.is-switching .mascottes-funfact,
.mascottes-landing.is-switching .mascottes-cta {
opacity: 0;
transform: translateX(-10px);
}
.mascottes-caption,
.mascottes-heading-dynamic,
.mascottes-quote,
.mascottes-features,
.mascottes-funfact,
.mascottes-cta {
transition: opacity 0.18s ease, transform 0.18s ease;
}
.mascottes-heading-static {
/* reste fixe pendant les switches, aucun fade, ancre visuel permanent */
}
/* .mascottes-heading-dynamic display/whitespace sont poses plus haut
dans la regle commune avec .mascottes-heading-static (display:block +
white-space:nowrap). Pas de override ici pour garder le layout uniforme. */
/* Responsive : desktop 2-col -> tablet/mobile stack vertical. */
@media (max-width: 768px) {
.mascottes-landing { padding: 56px 0; }
.mascottes-section-head { margin-bottom: 32px; }
.mascottes-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.mascottes-stage {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.mascottes-avatar-wrap {
width: 140px;
height: 140px;
}
}
@media (max-width: 640px) {
.mascottes-landing { padding: 40px 0; }
.mascottes-landing .container { padding: 0 16px; }
.mascottes-avatar-wrap {
width: 120px;
height: 120px;
}
.mascottes-caption { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
.mascottes-avatar,
.mascottes-heading .hl,
.mascottes-quote,
.mascottes-features li::before {
transition: none;
}
}
/* ============ TUTEUR : jauge deplacee dans l'input-bar ============ */
.tuteur-input-actions {
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
.tuteur-input-gauge {
position: relative;
background: none; border: none; padding: 0;
width: 24px; height: 24px;
cursor: pointer; flex-shrink: 0;
color: var(--accent-primary);
}
.tuteur-input-gauge svg { display: block; }
.tuteur-input-gauge .tuteur-header-gauge-arc {
transition: stroke-dashoffset 0.35s ease, stroke 0.35s ease;
}
.tuteur-input-gauge-popover {
position: absolute;
bottom: calc(100% + 12px);
right: 0;
padding: 8px 12px;
background: var(--bg);
border: 1px solid var(--border-dark);
border-radius: 6px;
box-shadow: var(--elev-floating);
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
z-index: 10;
}
/* ============ TUTEUR : onboarding tooltip sur la jauge ============ */
.tuteur-gauge-intro {
position: absolute;
bottom: calc(100% + 14px);
right: 0;
max-width: 260px;
padding: 14px 16px;
background: var(--text-primary);
color: var(--bg);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
font-size: 13px;
line-height: 1.45;
z-index: 20;
animation: tuteur-gauge-intro-in 0.25s ease-out;
}
.tuteur-gauge-intro::after {
content: "";
position: absolute;
bottom: -6px;
right: 16px;
width: 12px;
height: 12px;
background: var(--text-primary);
transform: rotate(45deg);
}
.tuteur-gauge-intro p { margin: 0 0 10px; }
.tuteur-gauge-intro-ok {
background: var(--bg);
color: var(--text-primary);
border: none;
border-radius: 4px;
padding: 6px 12px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
cursor: pointer;
}
@keyframes tuteur-gauge-intro-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.tuteur-gauge-intro { animation: none; }
}
/* ============ TUTEUR : spotlight onboarding ============ */
.tuteur-spotlight-overlay {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
z-index: 1500;
cursor: pointer;
animation: tuteur-overlay-in 0.25s ease-out;
}
.tuteur-panel--spotlight { z-index: 1600 !important; }
.tuteur-input-gauge--spotlight {
position: relative;
border-radius: 50%;
box-shadow:
0 0 0 4px rgba(96, 191, 245, 0.45),
0 0 32px rgba(96, 191, 245, 0.75);
animation: tuteur-gauge-pulse 1.8s ease-in-out infinite;
transform: scale(1.1);
transition: transform 0.2s ease;
}
.tuteur-spotlight-tip {
max-width: 280px;
padding: 16px 18px;
background: var(--bg);
color: var(--text-primary);
border: 1px solid var(--border-dark);
border-radius: 10px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
z-index: 1700;
cursor: default;
font-size: 13px;
line-height: 1.5;
animation: tuteur-spotlight-tip-in 0.3s 0.1s ease-out both;
}
.tuteur-spotlight-tip p { margin: 0 0 12px; }
.tuteur-spotlight-tip-ok {
background: var(--accent-primary);
color: var(--bg);
border: none;
border-radius: 6px;
padding: 8px 14px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
}
.tuteur-spotlight-tip-ok:hover { opacity: 0.9; }
@keyframes tuteur-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes tuteur-gauge-pulse {
0%, 100% {
box-shadow:
0 0 0 4px rgba(96, 191, 245, 0.45),
0 0 32px rgba(96, 191, 245, 0.75);
}
50% {
box-shadow:
0 0 0 8px rgba(96, 191, 245, 0.25),
0 0 48px rgba(96, 191, 245, 0.9);
}
}
/* Animation entree : opacity seule. Pas de transform ici, sinon elle ecrase
le translate(-50%, -50%) de la variante --centered et la bulle se centre
en deux temps (apparition decalee, puis snap au centre). */
@keyframes tuteur-spotlight-tip-in {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.tuteur-spotlight-overlay,
.tuteur-spotlight-tip,
.tuteur-input-gauge--spotlight { animation: none; }
}
/* Retire l'ancien tooltip gauge-intro qui ne sert plus */
.tuteur-gauge-intro { display: none !important; }
/* ============ TUTEUR : spotlight FAB ============ */
.tuteur-fab--spotlight {
z-index: 1700 !important;
animation: tuteur-gauge-pulse 1.8s ease-in-out infinite;
border-radius: 50%;
}
.tuteur-spotlight-tip--fab {
max-width: 280px;
}
.tuteur-spotlight-tip-title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
margin: 0 0 8px !important;
color: var(--accent-primary);
}
@media (max-width: 520px) {
.tuteur-spotlight-tip--fab {
right: 12px !important;
bottom: 96px !important;
left: 12px !important;
max-width: none;
}
}
/* ============ TUTEUR : spotlight tip avec avatar Ada ============ */
.tuteur-spotlight-tip-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
color: var(--text-primary);
}
.tuteur-spotlight-tip-head .tuteur-msg-avatar {
flex-shrink: 0;
}
.tuteur-spotlight-tip-head .tuteur-msg-avatar svg {
width: 28px;
height: 28px;
display: block;
}
.tuteur-spotlight-tip-name {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent-primary);
}
/* ============ SPOTLIGHT HELPER : target + boost generique ============ */
.app-spotlight-target {
position: relative;
z-index: 1700 !important;
animation: tuteur-gauge-pulse 1.8s ease-in-out infinite;
border-radius: 6px;
}
.app-spotlight-boost {
z-index: 1600 !important;
}
@media (prefers-reduced-motion: reduce) {
.app-spotlight-target { animation: none; }
}
/* ============ COURS REST : heading "A retenir" avec Ada + livres ============ */
.cours-rest-heading {
display: flex;
align-items: center;
gap: 14px;
margin-top: 0;
}
@media (max-width: 640px) {
.cours-rest-heading {
gap: 10px;
}
}
/* ============ ENCARTS TUTEURS : Alan (QA) et Marvin (theorie) ============
Composant statique d'illustration. Un tuteur, un role : Alan challenge,
Marvin approfondit. Ada reste dans le widget chat et "A retenir". */
.cours-tuteur-encart {
display: flex;
gap: 18px;
align-items: flex-start;
padding: 18px 20px;
border-radius: var(--radius-md);
border-left: 3px solid var(--border);
margin: 24px 0;
}
.cours-tuteur-encart-avatar {
flex-shrink: 0;
color: var(--text-primary);
display: inline-flex;
align-items: center;
padding-top: 2px;
}
.cours-tuteur-encart-avatar svg {
display: block;
width: 56px;
height: 42px;
}
.cours-tuteur-encart-body {
flex: 1;
min-width: 0;
}
.cours-tuteur-encart-heading {
margin: 0 0 10px;
font: 600 1.05rem/1.35 var(--font-display);
letter-spacing: -0.01em;
color: var(--text-primary);
}
.cours-tuteur-encart-signature {
display: block;
font: 400 0.78rem/1.3 var(--font-body);
color: var(--text-muted);
letter-spacing: 0;
margin-top: 2px;
}
.cours-tuteur-encart-body p {
margin: 0 0 8px;
font: 400 0.98rem/1.65 var(--font-body);
color: var(--text-secondary);
}
.cours-tuteur-encart-body p:last-child { margin-bottom: 0; }
/* ----- Marvin collapsible (details/summary) -----
Marvin est utilise pour les encarts "Pour aller plus loin" qui sont
des approfondissements optionnels. Par défaut replié pour ne pas
alourdir le flow de lecture principal. */
/* Avatar Marvin 40x40 : carré arrondi avec fond bg, centre l'SVG */
/* Badge méta : 3 min · Approfondissement, en pill discrète à droite */
.cours-tuteur-encart-meta {
flex-shrink: 0;
padding: 4px 10px;
border-radius: 999px;
background: rgba(88, 214, 141, 0.15);
color: var(--green);
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
}
@keyframes cours-tuteur-slide {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Encart « À retenir » DANS le body Marvin : le takeaway ne doit
pas être noyé dans la prose d'approfondissement. Mini-encart
green border + label en tête. */
@media (max-width: 640px) {
.cours-tuteur-encart {
gap: 12px;
padding: 14px 16px;
}
.cours-tuteur-encart-avatar svg {
width: 44px;
height: 33px;
}
.cours-tuteur-encart-heading {
font-size: 1rem;
}
}
/* ==================================================================== */
/* 08-cours-layout.css */
/* ==================================================================== */
/* === Auto-restored attribute selectors (anti-faux-positif PurgeCSS) === */
.mascottes-avatar[data-m="alan"] .m-eyes {
transform-box: fill-box;
transform-origin: center;
animation: alan-scan 5s infinite ease-in-out;
}
.mascottes-avatar[data-m="grace"] .m-eye-right {
animation: grace-wink 6s infinite ease-in-out;
}
/* ==================================================================== */
/* 08-cours-layout.css */
/* ==================================================================== */
/* =================================================================
COURS (lesson pages)
================================================================= */
/* Sidebar */
.cours-sidebar {
position: sticky; top: 56px; height: calc(100vh - 56px);
overflow-y: auto; padding: 32px 24px;
background: var(--bg-card); border-right: 1px solid var(--border-dark);
}
.cours-sidebar-title {
font-family: var(--font-display); font-size: 14px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--text-primary);
margin-bottom: 8px;
}
.cours-sidebar-level {
font-family: var(--font-display); font-size: 10px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; padding: 3px 8px;
display: inline-block; margin-bottom: 24px;
border-radius: 2px;
}
.cours-sidebar-level.free { background: rgba(88,214,141,0.15); color: var(--green); }
.cours-sidebar-level.coupon { background: rgba(255,206,0,0.12); color: var(--yellow); }
.cours-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.cours-sidebar-link {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; border-radius: 4px;
font-size: 13px; color: var(--text-secondary);
transition: all 0.2s; text-decoration: none;
}
.cours-sidebar-link:hover {
background: var(--bg-elevated); color: var(--text-primary);
}
.cours-sidebar-link.active {
background: rgba(96,191,245,0.12); color: var(--sky);
border-left: 3px solid var(--sky);
padding-left: 9px;
border-radius: 0 6px 6px 0;
}
.cours-sidebar-link.visited {
color: var(--text-primary);
}
.cours-sidebar-dot {
width: 8px; height: 8px; border-radius: 50%;
border: 2px solid var(--border-dark); flex-shrink: 0;
transition: all 0.2s;
}
.cours-sidebar-link.active .cours-sidebar-dot {
background: var(--sky); border-color: var(--sky);
}
.cours-sidebar-back {
display: flex; align-items: center; gap: 8px;
margin-top: 24px; padding-top: 16px;
border-top: 1px solid var(--border-dark);
font-family: var(--font-display); font-size: 11px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text-tertiary);
text-decoration: none; transition: color 0.2s;
}
.cours-sidebar-back:hover { color: var(--sky); }
/* Main content */
/* Constrain reading width on step content, not on conclusion grids */
.cours-step {
max-width: 780px;
}
/* Content blocks */
/* Content blocks: transparent by default, card only for short blocks */
/* Card style only for the Objectif step (short content) */
.cours-step[data-step="1"] .cours-block {
background: var(--bg-card);
border: 1px solid var(--border-dark);
border-radius: 8px;
padding: 28px 32px;
}
.cours-block-label {
font-family: var(--font-display); font-size: 10px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 0.12em; margin-bottom: 16px;
padding-bottom: 8px; border-bottom: 1px solid var(--border-dark);
}
/* Icônes SVG sur les labels via data-icon */
.cours-step h3 {
font-family: var(--font-display); font-size: 20px;
font-weight: 700; color: var(--text-primary);
margin-top: 48px; margin-bottom: 16px;
padding-left: 16px; padding-top: 32px;
border-left: 3px solid var(--course-color, var(--sky));
border-top: 1px solid var(--border-dark);
}
.cours-step h3:first-of-type {
margin-top: 0; padding-top: 0; border-top: none;
}
/* Definition list (key concepts with visual weight) */
.cours-def {
display: flex; gap: 16px; padding: 20px;
background: var(--bg-card); border: 1px solid var(--border-dark);
border-radius: 6px; transition: border-color 0.2s;
}
.cours-def:hover { border-color: var(--text-tertiary); }
/* Prompt example block */
/* Exercise block */
/* Key points card */
/* Quiz / self-check */
.cours-quiz { margin: 16px 0; }
/* Items QCM/TF/quiz libre : carte sans bordure, fond doux.
Le visuel des items QCM vient de leur design interne (pastille
question + cards options), pas d'un cadre supplémentaire. */
.cours-quiz-item {
border: 0;
border-radius: 8px;
margin-bottom: 18px;
overflow: hidden;
background: var(--bg-card);
padding: 4px 0;
}
/* Pas de fond pour les items typés QCM/TF : le fond du container
ajouterait du bruit au-dessus de la pill question qui a déjà
son propre background gradient. */
.cours-quiz-item[data-type="qcm"],
.cours-quiz-item[data-type="tf"] {
background: transparent;
padding: 0;
margin-bottom: 28px;
}
.cours-quiz-question {
padding: 16px 20px;
font-size: 14px; font-weight: 600; color: var(--text-primary);
}
/* =================================================================
STEP NAVIGATION (paginated modules)
================================================================= */
.cours-step { display: none; }
.cours-step.active { display: block; animation: stepFadeIn 0.35s ease-out; }
@keyframes stepFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.cours-step-nav {
display: flex; align-items: center; justify-content: space-between;
padding: 24px 0; margin-top: 40px;
border-top: 1px solid var(--border-dark);
}
.cours-step-indicator {
display: flex; align-items: center; gap: 6px;
padding: 8px 16px;
background: var(--bg-elevated);
border-radius: 20px;
border: 1px solid var(--border-dark);
}
.cours-step-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--border-dark);
transition: all 0.3s var(--ease);
}
.cours-step-dot.done {
background: var(--green);
}
.cours-step-dot.current {
background: var(--sky);
box-shadow: 0 0 6px rgba(96,191,245,0.4);
}
.cours-step-btn {
padding: 12px 28px; border-radius: 8px;
font-family: var(--font-display); font-size: 13px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; cursor: pointer;
transition: all 0.2s; border: none;
}
.cours-step-btn.prev {
background: transparent; color: var(--text-secondary);
border: 1px solid var(--border-dark);
}
.cours-step-btn.prev:hover {
border-color: var(--text-secondary); color: var(--text-primary);
transform: translateX(-2px);
}
.cours-step-btn.next {
background: var(--sky); color: var(--black);
box-shadow: 0 2px 8px rgba(96,191,245,0.25);
}
.cours-step-btn.next::after {
content: ' \2192';
display: inline-block;
transition: transform 0.2s var(--ease);
}
.cours-step-btn.next:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(96,191,245,0.35);
}
.cours-step-btn.next:hover::after {
transform: translateX(4px);
}
.cours-step-btn[style*="display:none"],
.cours-step-btn[style*="display: none"] { display: none; }
/* Step progress bar (top of page) */
.cours-progress-bar {
position: fixed; top: 55px; left: 0; right: 0;
height: 3px; z-index: 99; background: var(--border-dark);
}
.cours-progress-fill {
height: 100%; background: linear-gradient(90deg, var(--blue), var(--sky));
transition: width 0.3s var(--ease); width: 0;
}
/* Sidebar: intra-module sections (nested under active module) */
.cours-sidebar-sections {
margin: 4px 0 8px; padding: 4px 0 4px 24px;
display: flex; flex-direction: column; gap: 0;
border-left: 1px solid var(--border-dark);
margin-left: 16px;
}
.cours-sidebar-section {
font-size: 10px; color: var(--text-tertiary);
padding: 4px 8px; text-decoration: none;
transition: all 0.15s; cursor: pointer;
display: block; border-radius: 3px;
}
.cours-sidebar-section:hover { color: var(--text-secondary); }
.cours-sidebar-section.active {
color: var(--sky); border-left-color: var(--sky);
}
/* =================================================================
SIDEBAR PROGRESS BAR
================================================================= */
.cours-sidebar-progress { margin-bottom: 16px; }
.cours-sidebar-progress-label {
font-family: var(--font-display); font-size: 11px;
font-weight: 600; color: var(--text-secondary);
margin-bottom: 6px;
}
.cours-sidebar-progress-bar {
height: 4px; background: var(--border-dark);
border-radius: 2px; overflow: hidden;
}
.cours-sidebar-progress-fill {
height: 100%; background: var(--sky);
border-radius: 2px; transition: width 0.4s var(--ease);
}
/* Enriched dots (3 states) */
.cours-sidebar-link.visited .cours-sidebar-dot {
background: transparent; border-color: var(--green);
position: relative;
}
.cours-sidebar-link.visited .cours-sidebar-dot::after {
content: ''; position: absolute;
top: 0px; left: 1.5px; width: 3px; height: 5px;
border: solid var(--green); border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
/* Transition banner */
.cours-transition-banner {
padding: 12px 20px; margin-bottom: 24px;
background: rgba(88,214,141,0.08);
border: 1px solid rgba(88,214,141,0.2);
border-radius: 6px;
font-family: var(--font-display); font-size: 13px;
font-weight: 600; color: var(--green);
transition: opacity 0.4s;
}
.cours-transition-banner.fade { opacity: 0; }
/* =================================================================
COURS V2 - Flow Prendre / Essayer / Reposer
================================================================= */
/* ----- Charpente ----- */
.cours {
max-width: 680px;
margin: 0 auto;
padding: var(--space-xl) var(--space-lg) var(--space-xxl);
font: var(--type-body);
color: var(--text-secondary);
}
.cours-head {
margin-bottom: var(--space-xl);
}
.cours-eyebrow {
display: flex;
align-items: center;
gap: var(--space-sm);
font: var(--type-caption);
color: var(--text-tertiary);
margin-bottom: var(--space-sm);
}
.cours-title {
font: var(--type-title);
color: var(--text-primary);
margin-bottom: var(--space-sm);
letter-spacing: -0.01em;
}
.cours-meta {
font: var(--type-caption);
color: var(--text-tertiary);
}
/* ----- Acts (Prendre / Essayer / Reposer) ----- */
.cours-act {
margin-bottom: var(--space-xxl);
position: relative;
}
.cours-act:last-of-type {
margin-bottom: var(--space-xl);
}
/* =================================================================
COURS V2 - Menu déroulant nav inter-modules
================================================================= */
.cours-module-nav {
position: relative;
display: inline-block;
}
.cours-module-nav-trigger {
background: none;
border: none;
padding: var(--space-xs) var(--space-sm);
font: var(--type-caption);
color: var(--text-tertiary);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
min-height: 44px;
border-radius: var(--radius-sm);
transition: color 0.2s;
}
.cours-module-nav-trigger:hover {
color: var(--text-secondary);
}
.cours-module-nav-trigger:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.cours-module-nav-trigger[aria-expanded="true"] .cours-module-nav-chevron {
transform: rotate(180deg);
}
.cours-module-nav-chevron {
display: inline-block;
width: 12px;
height: 12px;
margin-left: 2px;
transition: transform 0.2s;
}
.cours-module-nav-chevron::before {
content: '';
display: block;
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px);
}
.cours-module-nav-panel {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 280px;
max-width: 360px;
max-height: 80vh;
overflow-y: auto;
background: var(--bg-card);
border: 1px solid var(--border-dark);
border-radius: var(--radius-md);
box-shadow: var(--elev-floating);
padding: var(--space-xs) 0;
margin: 0;
list-style: none;
z-index: 100;
display: none;
}
.cours-module-nav[data-open="true"] .cours-module-nav-panel {
display: block;
}
.cours-module-nav-item {
display: block;
}
.cours-module-nav-item + .cours-module-nav-item {
border-top: 1px solid var(--border-dark);
}
.cours-module-nav-link {
display: flex;
align-items: baseline;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
font: var(--type-body);
color: var(--text-secondary);
text-decoration: none;
min-height: 44px;
transition: background 0.15s;
}
.cours-module-nav-link:hover {
background: var(--bg-elevated);
}
.cours-module-nav-link:focus-visible {
outline: none;
background: var(--bg-elevated);
box-shadow: inset 0 0 0 2px var(--accent-primary);
}
.cours-module-nav-link .cours-module-nav-mark {
display: inline-block;
width: 14px;
flex-shrink: 0;
color: var(--text-tertiary);
font-size: 0.875rem;
}
.cours-module-nav-link .cours-module-nav-suffix {
margin-left: auto;
font: var(--type-caption);
color: var(--text-tertiary);
}
.cours-module-nav-link[aria-current="page"] {
color: var(--text-primary);
font-weight: 600;
cursor: default;
}
.cours-module-nav-link[aria-current="page"]:hover {
background: transparent;
}
/* Mobile : bottom sheet */
@media (max-width: 640px) {
.cours-module-nav[data-open="true"]::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
}
.cours-module-nav-panel {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
width: 100%;
max-height: 60vh;
border-radius: var(--radius-md) var(--radius-md) 0 0;
border-bottom: none;
padding: var(--space-md) 0;
}
.cours-module-nav-link {
padding: var(--space-md);
min-height: 56px;
}
}
/* =================================================================
COURS V2 - Désactivation des éléments legacy quand
================================================================= */
body[data-flow="v2"] .cours-sidebar,
body[data-flow="v2"] .cours-progress-bar {
display: none;
}
body[data-flow="v2"] .cours-step {
display: block;
max-width: none;
}
/* =================================================================
COURS V2 - Sidebar de progression (décision Sprint 2 §V)
================================================================= */
/* Wrapper deux colonnes desktop */
.cours-layout-v2 {
display: flex;
align-items: flex-start;
gap: 0;
padding-top: 56px; /* hauteur nav */
}
/* Sidebar */
.cours-sidebar-v2 {
flex: 0 0 248px;
width: 248px;
position: sticky;
top: 56px;
align-self: flex-start;
max-height: calc(100vh - 56px);
overflow-y: auto;
border-right: 1px solid var(--border-dark);
background: var(--bg);
z-index: 10;
}
.cours-sidebar-v2-inner {
padding: var(--space-lg) var(--space-md) var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.cours-sidebar-v2-head {
display: flex;
flex-direction: column;
gap: 2px;
}
.cours-sidebar-v2-eyebrow {
font: var(--type-caption);
color: var(--text-tertiary);
margin: 0;
text-transform: none;
letter-spacing: 0;
}
.cours-sidebar-v2-title {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
}
/* Progression */
.cours-sidebar-v2-progress {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.cours-sidebar-v2-progress-bar {
height: 3px;
background: var(--bg-elevated);
border-radius: 2px;
overflow: hidden;
}
.cours-sidebar-v2-progress-fill {
height: 100%;
background: var(--text-tertiary);
transition: width 0.3s ease;
}
.cours-sidebar-v2-progress-label {
font: var(--type-caption);
color: var(--text-tertiary);
margin: 0;
}
/* Liste des modules */
.cours-sidebar-v2-nav {
display: block;
}
.cours-sidebar-v2-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.cours-sidebar-v2-item {
display: block;
}
.cours-sidebar-v2-link {
display: grid;
grid-template-columns: 18px auto 1fr;
align-items: baseline;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
font: var(--type-caption);
color: var(--text-secondary);
text-decoration: none;
border-radius: var(--radius-sm);
min-height: 36px;
line-height: 1.4;
transition: background 0.15s, color 0.15s;
}
.cours-sidebar-v2-link:hover {
background: var(--bg-elevated);
color: var(--text-primary);
}
.cours-sidebar-v2-link:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.cours-sidebar-v2-link.is-current {
color: var(--text-primary);
font-weight: 600;
background: var(--bg-elevated);
}
.cours-sidebar-v2-link.is-done {
color: var(--text-secondary);
}
.cours-sidebar-v2-link.is-untouched {
color: var(--text-tertiary);
}
.cours-sidebar-v2-num {
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: 0.75rem;
}
.cours-sidebar-v2-link.is-current .cours-sidebar-v2-num {
color: var(--text-primary);
}
.cours-sidebar-v2-label {
overflow-wrap: anywhere;
}
/* Pastille d'état */
.cours-sidebar-v2-mark {
width: 14px;
height: 14px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
line-height: 1;
border: 1px solid var(--text-tertiary);
background: transparent;
color: transparent;
flex-shrink: 0;
align-self: center;
}
.cours-sidebar-v2-mark.is-done {
border-color: var(--accent-success);
background: var(--accent-success);
color: var(--bg);
}
.cours-sidebar-v2-mark.is-current {
border-color: var(--accent-primary);
background: var(--accent-primary);
}
.cours-sidebar-v2-mark.is-untouched {
border-color: var(--text-tertiary);
background: transparent;
}
.cours-sidebar-v2-back {
font: var(--type-caption);
color: var(--text-tertiary);
text-decoration: none;
padding: var(--space-xs) var(--space-sm);
min-height: 36px;
display: inline-flex;
align-items: center;
transition: color 0.15s;
}
.cours-sidebar-v2-back:hover {
color: var(--text-primary);
}
.cours-sidebar-v2-back:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* Colonne principale dans le layout V2 */
.cours-layout-v2 > .cours {
flex: 1 1 auto;
min-width: 0;
max-width: 720px;
margin: 0 auto;
}
/* Burger dédié du cours (mobile uniquement) */
.cours-sidebar-v2-toggle {
display: none;
background: none;
border: 1px solid var(--border-dark);
border-radius: var(--radius-sm);
width: 40px;
height: 40px;
padding: 8px;
cursor: pointer;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
margin-right: var(--space-sm);
}
.cours-sidebar-v2-toggle span {
display: block;
height: 2px;
background: var(--text-primary);
border-radius: 1px;
}
.cours-sidebar-v2-toggle:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* Bouton fermeture de la sidebar (mobile) */
.cours-sidebar-v2-close {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
background: none;
border: none;
font-size: 24px;
line-height: 1;
color: var(--text-secondary);
cursor: pointer;
padding: 4px 10px;
display: none;
}
/* Eyebrow en flex pour aligner burger + menu déroulant */
body[data-flow="v2"] .cours-eyebrow {
align-items: center;
}
/* Mobile : sidebar cachée par défaut, ouverte en bottom sheet via toggle */
@media (max-width: 1023px) {
.cours-layout-v2 {
display: block;
padding-top: 56px;
}
.cours-sidebar-v2-toggle {
display: inline-flex;
}
.cours-sidebar-v2 {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: auto;
width: 100%;
max-width: 100%;
max-height: 72vh;
border-right: none;
border-top: 1px solid var(--border-dark);
border-radius: var(--radius-md) var(--radius-md) 0 0;
transform: translateY(100%);
transition: transform 0.25s ease;
z-index: 500;
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
}
.cours-sidebar-v2[data-open="true"] {
transform: translateY(0);
}
.cours-sidebar-v2-close {
display: block;
}
.cours-layout-v2 > .cours {
max-width: 100%;
}
/* Overlay quand sidebar mobile ouverte */
body[data-sidebar-open="true"]::after {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 499;
}
}
/* Sur les pages V2 avec sidebar : neutralise la legacy .cours-sidebar layout */
body[data-flow="v2"] .cours-layout-v2 .cours-sidebar {
display: none;
}
/* ==================================================================== */
/* 09-cours-blocs.css */
/* ==================================================================== */
/* === Auto-restored attribute selectors (anti-faux-positif PurgeCSS) === */
.cours-step[data-step="1"] .cours-block {
background: var(--bg-card);
border: 1px solid var(--border-dark);
border-radius: 8px;
padding: 28px 32px;
}
.cours-block-label[data-icon]::before {
content: '';
display: inline-block;
width: 18px; height: 18px;
margin-right: 8px; vertical-align: -3px;
background-size: 18px 18px;
background-repeat: no-repeat;
}
.cours-block-label[data-icon="target"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2360BFF5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}
.cours-block-label[data-icon="lightbulb"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2360BFF5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
}
.cours-block-label[data-icon="magnifier"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2360BFF5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
.cours-block-label[data-icon="clipboard"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2360BFF5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
}
.cours-quiz-item[data-type="qcm"],
.cours-quiz-item[data-type="tf"] {
background: transparent;
padding: 0;
margin-bottom: 28px;
}
.cours-module-nav[data-open="true"] .cours-module-nav-panel {
display: block;
}
@media (max-width: 640px) {
.cours-module-nav[data-open="true"]::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
}
}
body[data-flow="v2"] .cours-layout {
display: block;
padding-top: 56px;
}
body[data-flow="v2"] .cours-sidebar,
body[data-flow="v2"] .cours-breadcrumb,
body[data-flow="v2"] .cours-module-num,
body[data-flow="v2"] .cours-module-title,
body[data-flow="v2"] .cours-module-time,
body[data-flow="v2"] .cours-progress-bar {
display: none;
}
body[data-flow="v2"] .cours-main {
padding: 0;
max-width: none;
}
body[data-flow="v2"] .cours-step {
display: block;
max-width: none;
}
body[data-flow="v2"] .cours-eyebrow {
align-items: center;
}
@media (max-width: 1023px) {
.cours-sidebar-v2[data-open="true"] {
transform: translateY(0);
}
}
@media (max-width: 1023px) {
body[data-sidebar-open="true"]::after {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 499;
}
}
body[data-flow="v2"] .cours-layout-v2 .cours-sidebar {
display: none;
}
/* ==================================================================== */
/* 09-cours-blocs.css */
/* ==================================================================== */
/* =================================================================
NAV DOTS VERTICALE (ancres de navigation sur le côté droit)
================================================================= */
.cours-dots-nav {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 15;
display: flex;
flex-direction: column;
gap: 16px;
}
.cours-dot {
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--text-tertiary);
background: transparent;
display: inline-block;
text-decoration: none;
transition: transform 0.18s, border-color 0.18s, background 0.18s;
}
.cours-dot:hover,
.cours-dot:focus-visible {
border-color: var(--text-primary);
transform: scale(1.2);
outline: none;
}
.cours-dot.is-active {
transform: scale(1.25);
}
.cours-dot.is-active[data-phase="prendre"] {
background: var(--blue);
border-color: var(--blue);
}
.cours-dot.is-active[data-phase="essayer"] {
background: var(--sky);
border-color: var(--sky);
}
.cours-dot.is-active[data-phase="reposer"] {
background: var(--caramel);
border-color: var(--caramel);
}
/* Tooltip label à gauche du dot, au hover/focus */
.cours-dot-label {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(4px);
padding: 5px 10px;
background: var(--text-primary);
color: var(--bg);
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s, transform 0.18s;
}
.cours-dot:hover .cours-dot-label,
.cours-dot:focus-visible .cours-dot-label {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* Scroll offset pour que les ancres n'arrivent pas collées à la nav principale */
.cours-act[id] {
scroll-margin-top: 80px;
}
@media (max-width: 1100px) {
.cours-dots-nav { display: none; }
}
/* Badge inline de phase en tête de chaque acte.
Labels "Apprendre / Pratiquer / Retenir" (plus parlants pour
l'apprenant que les noms internes prendre/essayer/reposer).
Carré brand injecté en SVG background pour garder border-radius.
La mini-nav dots verticale (.cours-dots-nav) complète en fixed. */
.cours-act[data-act] {
padding-top: 4px;
}
.cours-act[data-act]::before {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 22px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-secondary);
line-height: 1;
}
.cours-act[data-act="prendre"]::before {
content: "Apprendre";
background-image: url("data:image/svg+xml;utf8,");
background-size: 13px 13px;
background-position: 0 center;
background-repeat: no-repeat;
padding-left: 23px;
}
.cours-act[data-act="essayer"]::before {
content: "Pratiquer";
background-image: url("data:image/svg+xml;utf8,");
background-size: 13px 13px;
background-position: 0 center;
background-repeat: no-repeat;
padding-left: 23px;
}
.cours-act[data-act="reposer"]::before {
content: "Retenir";
background-image: url("data:image/svg+xml;utf8,");
background-size: 13px 13px;
background-position: 0 center;
background-repeat: no-repeat;
padding-left: 23px;
}
.cours-act > p,
.cours-act > h2 {
max-width: 65ch;
}
.cours-act > p {
margin-bottom: var(--space-md);
}
.cours-act > h2 {
font: var(--type-section);
color: var(--text-primary);
margin-bottom: var(--space-md);
}
/* ----- Lede : question d'ouverture ----- */
.cours-lede {
font: var(--type-lede);
color: var(--text-primary);
margin-bottom: var(--space-lg);
}
/* ----- Pivot : aside court dans Prendre ----- */
.cours-pivot {
background: var(--bg-elevated);
border-left: 2px solid var(--border-dark);
padding: var(--space-md) var(--space-lg);
margin: var(--space-xl) 0;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.cours-pivot p {
margin: 0;
color: var(--text-secondary);
}
.cours-pivot strong {
color: var(--text-primary);
}
/* ----- Citation de prompt (mono) ----- */
.cours-cite {
display: block;
background: var(--bg-elevated);
font: var(--type-mono);
color: var(--text-primary);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-sm);
margin: var(--space-md) 0;
white-space: pre-wrap;
overflow-x: auto;
}
/* ----- Préfixes in-flow : Astuce / Piège / Imaginons -----
Couleur portée sur le qui ouvre la phrase.
Voir addendum §1 : pas de pictos, pas de cadres, juste typo + couleur muted. */
.cours-prefix-tip {
color: var(--accent-primary-muted);
}
.cours-prefix-trap {
color: var(--accent-warning-muted);
}
/* Imaginons : italique gras, pas de couleur d'accent.
La phrase qui suit est intégralement en italique côté HTML (...). */
.cours-prefix-example {
font-style: italic;
color: var(--text-primary);
}
/* ----- Bloc Essayer : sandbox conteneur (statique en Sprint 1) ----- */
.cours-try {
background: var(--bg-card);
border-radius: var(--radius-md);
padding: var(--space-xl) var(--space-lg);
margin: 0 0 var(--space-xxl);
}
/* Premier enfant d'une section : resserrer le padding-top du
container pour ne pas doubler l'espace avec le badge ::before. */
.cours-act[data-act] > .cours-try:first-of-type {
padding-top: var(--space-lg);
}
.cours-try h2 {
font: var(--type-section);
color: var(--text-primary);
margin-bottom: var(--space-md);
}
/* H2 de tête d'exercices : version serrée, letter-spacing tight,
point final signature Adaprompt. */
.cours-try-heading {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 12px;
}
.cours-try-instruction {
font: var(--type-lede);
color: var(--text-primary);
margin-bottom: var(--space-md);
}
.cours-try-criterion {
color: var(--text-secondary);
margin-bottom: var(--space-lg);
}
.cours-try-criterion strong {
color: var(--text-primary);
}
.cours-try-input {
width: 100%;
background: var(--bg);
color: var(--text-primary);
border: 1px solid var(--border-dark);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
padding: var(--space-md);
resize: vertical;
min-height: 9rem;
outline: none;
transition: border-color 0.2s;
}
.cours-try-input:focus {
border-color: var(--accent-primary);
box-shadow: var(--focus-ring);
}
.cours-try-input::placeholder {
color: var(--text-tertiary);
}
.cours-try-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
margin-top: var(--space-md);
}
.cours-try-status {
font: var(--type-caption);
color: var(--text-tertiary);
flex: 1;
}
.cours-try-btn {
background: var(--accent-primary);
color: var(--bg);
border: none;
padding: 12px 28px;
border-radius: var(--radius-sm);
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
min-height: 44px;
transition: opacity 0.2s;
}
.cours-try-btn:hover:not(:disabled) {
opacity: 0.9;
}
.cours-try-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cours-try-btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.cours-try-response {
margin-top: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid var(--border-dark);
color: var(--text-secondary);
}
.cours-try-response:empty {
display: none;
}
/* ----- Reposer ----- */
.cours-rest {
border-top: 1px solid var(--border-dark);
padding-top: var(--space-xl);
}
.cours-rest h2 {
font: var(--type-section);
color: var(--text-primary);
margin-bottom: var(--space-md);
}
.cours-rest p {
margin-bottom: var(--space-md);
color: var(--text-secondary);
}
.cours-transfer {
margin-top: var(--space-lg);
}
.cours-transfer strong {
color: var(--text-primary);
}
/* ----- Tableau simplifié V2 (sans hover, sans zebra) -----
Déprefixé 2026-04-24 (avant préfixé `.cours ` pour spécificité).
Source unique pour .cours-table* dans le site. */
.cours-table {
width: 100%;
border-collapse: collapse;
margin: var(--space-md) 0;
font-size: 0.9375rem;
}
.cours-table th {
background: transparent;
color: var(--text-primary);
font-family: var(--font-display);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
font-size: 0.875rem;
padding: var(--space-sm) var(--space-md);
text-align: left;
border-bottom: 1px solid var(--border-dark);
}
.cours-table td {
padding: var(--space-md);
border-bottom: 1px solid var(--border-dark);
color: var(--text-secondary);
line-height: 1.6;
vertical-align: top;
}
.cours-table tr:hover td {
background: transparent;
}
/* ----- Navigation bas de module (cards prev/next V2) ----- */
.cours-nav-bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--border-dark);
}
.cours-nav-bottom-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 18px;
background: var(--bg-card);
border: 1px solid transparent;
border-radius: 10px;
text-decoration: none;
color: var(--text-primary);
transition: background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
min-height: 84px;
}
.cours-nav-bottom-card--prev {
text-align: left;
}
.cours-nav-bottom-card--next,
.cours-nav-bottom-card--resume {
text-align: right;
background: rgba(96,191,245,0.06);
border-color: rgba(96,191,245,0.25);
}
.cours-nav-bottom-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(0,0,0,0.06);
border-color: var(--sky);
}
.cours-nav-bottom-card--next:hover,
.cours-nav-bottom-card--resume:hover {
background: rgba(96,191,245,0.10);
}
.cours-nav-bottom-card:focus-visible {
outline: 2px solid var(--sky);
outline-offset: 2px;
}
.cours-nav-bottom-direction {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-secondary);
}
.cours-nav-bottom-card--next .cours-nav-bottom-direction,
.cours-nav-bottom-card--resume .cours-nav-bottom-direction {
color: var(--sky);
}
.cours-nav-bottom-num {
font-family: var(--font-display);
font-size: 11px;
font-weight: 800;
color: var(--text-tertiary);
letter-spacing: 0.06em;
margin-top: 2px;
}
.cours-nav-bottom-title {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
color: var(--text-primary);
letter-spacing: -0.01em;
margin-top: 2px;
}
.cours-nav-bottom-sub {
font: 400 0.85rem/1.4 var(--font-body);
color: var(--text-secondary);
margin-top: 4px;
}
@media (max-width: 640px) {
.cours-nav-bottom {
grid-template-columns: 1fr;
gap: 10px;
}
/* Sur mobile, inverser l'ordre : next en haut (action prioritaire) */
.cours-nav-bottom-card--next,
.cours-nav-bottom-card--resume {
order: -1;
}
}
/* ----- Eléments italiques in-flow (Imaginons : phrase entière en italique) ----- */
.cours-act em,
.cours-rest em {
color: var(--text-secondary);
}
/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
.cours-try-input,
.cours-try-btn,
.cours-try-response {
transition: none;
}
}
/* ----- Responsive ----- */
@media (max-width: 1024px) {
.cours {
max-width: 100%;
}
}
@media (max-width: 640px) {
.cours {
padding: var(--space-lg) var(--space-md) var(--space-xl);
}
.cours-act {
margin-bottom: var(--space-xl);
}
.cours-try {
padding: var(--space-lg) var(--space-md);
margin: var(--space-xl) 0;
}
.cours-try-bar {
flex-direction: column;
align-items: stretch;
}
.cours-try-btn {
width: 100%;
}
.cours-try-status {
text-align: center;
}
}
/* =================================================================
BLOCS PÉDAGOGIQUES (module gold standard — comprendre/m1)
================================================================= */
/* ----- Définition : encart marqué avec pastille « Déf » sky ----- */
/* ----- Bloc multi-définitions (regroupe plusieurs termes) ----- */
.cours-definitions {
position: relative;
margin: 24px 0;
padding: 16px 22px 20px 80px;
background: linear-gradient(135deg,
rgba(96,191,245,0.10) 0%,
rgba(46,99,164,0.04) 100%);
border-left: 4px solid var(--sky);
border-radius: 0 10px 10px 0;
}
.cours-definitions::before {
content: "DÉF";
position: absolute;
left: 18px;
top: 18px;
width: 46px;
height: 34px;
background: var(--sky);
color: #fff;
border-radius: 6px;
font-family: var(--font-display);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.08em;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(96,191,245,0.25);
}
.cours-definitions-label {
margin: 0 0 10px;
font-family: var(--font-display);
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-secondary);
}
.cours-definitions-list {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.cours-definitions-item {
display: block;
}
.cours-definitions-item dt {
display: inline-block;
font-family: var(--font-display);
font-weight: 800;
color: #fff;
background: var(--sky);
font-size: 1em;
letter-spacing: -0.01em;
padding: 0.02em 0.3em 0.08em;
border-radius: 4px;
line-height: 1.1;
}
.cours-definitions-item dt::after {
content: "";
margin-right: 6px;
}
.cours-definitions-item dd {
display: inline;
margin: 0;
font: 400 1rem/1.6 var(--font-body);
color: var(--text-primary);
}
/* ----- Astuce : encart sky clair avec SVG ampoule.
Le SVG ampoule est en background-image sur le conteneur pour
liberer ::before qui porte le label "Astuce" (label EN TETE). */
.cours-tip {
position: relative;
margin: 18px 0;
padding: 14px 18px 14px 52px;
background-color: rgba(96,191,245,0.06);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 16px 14px;
background-size: 22px 22px;
border-left: 3px solid var(--sky);
border-radius: 0 6px 6px 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-secondary);
}
.cours-tip::before {
content: "Astuce";
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--sky);
margin-bottom: 6px;
}
.cours-tip p { margin: 0; }
/* ----- Piège : encart warning avec SVG alerte (même logique) ----- */
.cours-trap {
position: relative;
margin: 18px 0;
padding: 14px 18px 14px 52px;
background-color: rgba(215,0,0,0.05);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 16px 14px;
background-size: 22px 22px;
border-left: 3px solid var(--red);
border-radius: 0 6px 6px 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-primary);
}
.cours-trap::before {
content: "Piège classique";
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--red);
margin-bottom: 6px;
}
.cours-trap p { margin: 0; }
/* ----- Exemple / mise en situation : encart caramel avec icône
guillemets ouvrants, label EXEMPLE en tête. Même grammaire
visuelle que .cours-tip et .cours-trap. */
.cours-example-inline {
display: block;
position: relative;
margin: 18px 0;
padding: 14px 18px 14px 52px;
background-color: rgba(175,101,40,0.06);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 14px 12px;
background-size: 26px 26px;
border-left: 3px solid var(--caramel);
border-radius: 0 6px 6px 0;
font-size: 0.96rem;
line-height: 1.65;
color: var(--text-primary);
}
.cours-example-inline::before {
content: "Exemple";
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--caramel);
margin-bottom: 6px;
}
.cours-example-inline em {
font-style: italic;
font-weight: 500;
color: var(--text-primary);
}
/* ----- Exposants sourcing et définitions tooltip ----- */
/* Chiffre en exposant pour référence biblio, clic scroll vers ancre */
sup.cours-ref {
font-family: var(--font-display);
font-size: 0.7em;
font-weight: 700;
color: var(--sky);
margin-left: 1px;
cursor: pointer;
text-decoration: none;
}
sup.cours-ref:hover { color: var(--blue); }
/* ? en exposant pour définition, tooltip au survol (pur CSS).
Version légère : juste un ? bold, taille du texte, couleur sky
discrète. Pas de cercle, pas de background. Override complet
des styles legacy .cours-def (list-item with border/padding). */
sup.cours-def {
display: inline;
position: relative;
/* Override legacy .cours-def (definition list item) */
padding: 0;
margin: 0 0 0 1px;
background: transparent;
border: 0;
border-radius: 0;
gap: 0;
/* Style léger : exposant mathématique, plus petit que le texte */
font-family: inherit;
font-weight: 800;
font-size: 0.7em;
line-height: 0;
color: var(--sky);
cursor: help;
vertical-align: super;
top: 0;
transition: color 0.15s;
}
sup.cours-def::before { content: "?"; }
sup.cours-def:hover,
sup.cours-def:focus {
color: var(--blue);
outline: none;
}
sup.cours-def[data-def]::after {
content: attr(data-def);
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
min-width: 200px;
max-width: 280px;
padding: 10px 12px;
background: var(--text-primary);
color: var(--bg);
font-family: var(--font-body);
font-weight: 400;
font-size: 12px;
line-height: 1.5;
letter-spacing: 0;
text-transform: none;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s;
z-index: 100;
text-align: left;
font-style: normal;
}
sup.cours-def[data-def]::before {
content: "?";
}
sup.cours-def[data-def]:hover::after,
sup.cours-def[data-def]:focus::after {
opacity: 1;
}
/* ----- Grille des 4 limites : 4 cards au lieu d'un paragraphe dense ----- */
.cours-limits-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin: 22px 0;
}
.cours-limit-card {
padding: 16px 18px;
background: var(--bg-card);
border-radius: 8px;
border-top: 3px solid var(--limit-accent, var(--sky));
transition: transform 0.2s, box-shadow 0.2s;
}
.cours-limit-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.cours-limit-card[data-limit="hallucinations"] { --limit-accent: var(--red); }
.cours-limit-card[data-limit="context"] { --limit-accent: var(--yellow); }
.cours-limit-card[data-limit="knowledge"] { --limit-accent: var(--caramel); }
.cours-limit-card[data-limit="reasoning"] { --limit-accent: var(--blue); }
.cours-limit-card h4 {
margin: 0 0 6px;
font: 700 1rem/1.3 var(--font-display);
color: var(--text-primary);
letter-spacing: -0.005em;
}
.cours-limit-card p {
margin: 0;
font-size: 0.9rem;
line-height: 1.55;
color: var(--text-secondary);
}
@media (max-width: 640px) {
.cours-limits-grid { grid-template-columns: 1fr; }
}
/* ----- Tableau en cards : version lisible du cours-table ----- */
.cours-table-cards {
display: flex;
flex-direction: column;
gap: 10px;
margin: 22px 0;
}
.cours-table-cards-item {
display: grid;
grid-template-columns: minmax(140px, 1fr) 2fr 2fr;
gap: 16px;
padding: 14px 18px;
background: var(--bg-card);
border-radius: 6px;
border-left: 3px solid var(--tcc-accent, var(--sky));
align-items: start;
}
.cours-table-cards-item[data-accent="red"] { --tcc-accent: var(--red); }
.cours-table-cards-item[data-accent="yellow"] { --tcc-accent: var(--yellow); }
.cours-table-cards-item[data-accent="caramel"] { --tcc-accent: var(--caramel); }
.cours-table-cards-item[data-accent="blue"] { --tcc-accent: var(--blue); }
.cours-table-cards-label {
font: 700 0.9rem/1.3 var(--font-display);
color: var(--text-primary);
letter-spacing: -0.005em;
}
.cours-table-cards-impact,
.cours-table-cards-action {
font: 400 0.9rem/1.5 var(--font-body);
color: var(--text-secondary);
}
.cours-table-cards-action {
font-weight: 500;
color: var(--text-primary);
}
.cours-table-cards-head {
display: grid;
grid-template-columns: minmax(140px, 1fr) 2fr 2fr;
gap: 16px;
padding: 0 18px 6px;
font: 700 0.72rem/1 var(--font-display);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-tertiary);
}
@media (max-width: 700px) {
.cours-table-cards-head { display: none; }
.cours-table-cards-item {
grid-template-columns: 1fr;
gap: 6px;
}
.cours-table-cards-label {
font-size: 0.98rem;
padding-bottom: 4px;
border-bottom: 1px solid var(--border-dark);
margin-bottom: 4px;
}
}
/* ----- Séparateur card entre items V/F (plus visible que line fine) ----- */
.cours-quiz-item[data-type="tf"] + .cours-quiz-item,
.cours-quiz-item + .cours-quiz-item[data-type="tf"] {
margin-top: 28px;
position: relative;
}
.cours-quiz-item[data-type="tf"] + .cours-quiz-item::before,
.cours-quiz-item + .cours-quiz-item[data-type="tf"]::before {
content: "";
position: absolute;
top: -14px; left: 20px; right: 20px;
height: 2px;
background: linear-gradient(to right,
var(--sky) 0 20%, var(--blue) 20% 40%,
var(--caramel) 40% 60%, var(--yellow) 60% 80%,
var(--red) 80% 100%);
opacity: 0.25;
}
/* ----- Skip-link universel pour accessibilité ----- */
.skip-link {
position: absolute;
left: -9999px;
top: 8px;
z-index: 1000;
}
.skip-link:focus {
left: 8px;
padding: 8px 14px;
background: var(--text-primary);
color: var(--bg);
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
text-decoration: none;
border-radius: 4px;
outline: 2px solid var(--sky);
}
/* ----- Figure (illustration SVG inline) ----- */
.cours-figure {
margin: 26px 0;
padding: 18px;
background: var(--bg-card);
border-radius: 10px;
text-align: center;
}
.cours-figure-svg {
width: 100%;
max-width: 560px;
height: auto;
display: block;
margin: 0 auto;
}
.cours-figure-caption {
margin-top: 10px;
font: italic 400 0.85rem/1.5 var(--font-body);
color: var(--text-tertiary);
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
/* ----- Scénarios numérotés (QCM avec cas à apparier) ----- */
.cours-scenarios {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin: 2px 20px 4px;
}
.cours-scenarios .cours-scenario {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 12px;
margin: 0;
background: var(--bg-card);
border: 0;
border-left: 3px solid var(--text-tertiary);
border-radius: 6px;
position: static;
}
.cours-scenarios .cours-scenario-num {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--sky);
color: #fff;
font-family: var(--font-display);
font-weight: 800;
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.cours-scenarios .cours-scenario p {
margin: 0;
font-size: 0.85rem;
line-height: 1.4;
color: var(--text-primary);
font-style: italic;
}
.cours-scenarios-prompt {
margin: 16px 20px 10px;
font-weight: 600;
color: var(--text-primary);
}
@media (max-width: 640px) {
.cours-scenarios { grid-template-columns: 1fr; }
}
/* ----- Badges d'appariement dans les options QCM ----- */
/* Remplace le texte brut "1=fenêtre de contexte, 2=hallucination..." par
une série de petites pastilles numérotées suivies du libellé, chacune
séparée par un gap. Plus lisible, écho visuel aux scénarios numérotés. */
.cours-scenario-match {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 2px 10px 2px 0;
white-space: nowrap;
}
.cours-scenario-match-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--bg-elevated);
border: 1px solid var(--border-dark);
color: var(--text-primary);
font-family: var(--font-display);
font-weight: 800;
font-size: 10px;
line-height: 1;
flex-shrink: 0;
}
.cours-scenario-match-label {
font-size: 0.9rem;
color: var(--text-primary);
}
/* Dans une option QCM correcte/wrong, les pastilles prennent l'accent */
.cours-qcm-option.correct .cours-scenario-match-num {
background: var(--green);
border-color: var(--green);
color: #fff;
}
.cours-qcm-option.wrong .cours-scenario-match-num {
background: var(--red);
border-color: var(--red);
color: #fff;
}
/* ----- Bibliographie fin de module ----- */
.cours-biblio {
margin: 32px 0 0;
padding: 16px 20px;
background: var(--bg-card);
border-radius: 6px;
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-secondary);
}
.cours-biblio-heading {
font: 700 11px/1 var(--font-display);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-secondary);
margin: 0 0 10px;
}
.cours-biblio ol {
margin: 0;
padding-left: 24px;
counter-reset: biblio;
list-style: none;
}
.cours-biblio ol li {
counter-increment: biblio;
margin-bottom: 6px;
position: relative;
}
.cours-biblio ol li::before {
content: counter(biblio);
position: absolute;
left: -22px;
top: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.8rem;
color: var(--sky);
}
.cours-biblio a {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ==================================================================== */
/* 10-cours-quiz.css */
/* ==================================================================== */
/* === Auto-restored attribute selectors (anti-faux-positif PurgeCSS) === */
.cours-dot.is-active[data-phase="prendre"] {
background: var(--blue);
border-color: var(--blue);
}
.cours-dot.is-active[data-phase="essayer"] {
background: var(--sky);
border-color: var(--sky);
}
.cours-dot.is-active[data-phase="reposer"] {
background: var(--caramel);
border-color: var(--caramel);
}
.cours-act[data-act] {
padding-top: 4px;
}
.cours-act[data-act]::before {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 22px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-secondary);
line-height: 1;
}
.cours-act[data-act="prendre"]::before {
content: "Apprendre";
background-image: url("data:image/svg+xml;utf8,");
background-size: 13px 13px;
background-position: 0 center;
background-repeat: no-repeat;
padding-left: 23px;
}
.cours-act[data-act="essayer"]::before {
content: "Pratiquer";
background-image: url("data:image/svg+xml;utf8,");
background-size: 13px 13px;
background-position: 0 center;
background-repeat: no-repeat;
padding-left: 23px;
}
.cours-act[data-act="reposer"]::before {
content: "Retenir";
background-image: url("data:image/svg+xml;utf8,");
background-size: 13px 13px;
background-position: 0 center;
background-repeat: no-repeat;
padding-left: 23px;
}
.cours-act[data-act] > .cours-try:first-of-type {
padding-top: var(--space-lg);
}
sup.cours-def[data-def]::after {
content: attr(data-def);
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
min-width: 200px;
max-width: 280px;
padding: 10px 12px;
background: var(--text-primary);
color: var(--bg);
font-family: var(--font-body);
font-weight: 400;
font-size: 12px;
line-height: 1.5;
letter-spacing: 0;
text-transform: none;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s;
z-index: 100;
text-align: left;
font-style: normal;
}
sup.cours-def[data-def]::before {
content: "?";
}
sup.cours-def[data-def]:hover::after,
sup.cours-def[data-def]:focus::after {
opacity: 1;
}
.cours-limit-card[data-limit="hallucinations"] { --limit-accent: var(--red); }
.cours-limit-card[data-limit="context"] { --limit-accent: var(--yellow); }
.cours-limit-card[data-limit="knowledge"] { --limit-accent: var(--caramel); }
.cours-limit-card[data-limit="reasoning"] { --limit-accent: var(--blue); }
.cours-table-cards-item[data-accent="red"] { --tcc-accent: var(--red); }
.cours-table-cards-item[data-accent="yellow"] { --tcc-accent: var(--yellow); }
.cours-table-cards-item[data-accent="caramel"] { --tcc-accent: var(--caramel); }
.cours-table-cards-item[data-accent="blue"] { --tcc-accent: var(--blue); }
.cours-quiz-item[data-type="tf"] + .cours-quiz-item,
.cours-quiz-item + .cours-quiz-item[data-type="tf"] {
margin-top: 28px;
position: relative;
}
.cours-quiz-item[data-type="tf"] + .cours-quiz-item::before,
.cours-quiz-item + .cours-quiz-item[data-type="tf"]::before {
content: "";
position: absolute;
top: -14px; left: 20px; right: 20px;
height: 2px;
background: linear-gradient(to right,
var(--sky) 0 20%, var(--blue) 20% 40%,
var(--caramel) 40% 60%, var(--yellow) 60% 80%,
var(--red) 80% 100%);
opacity: 0.25;
}
/* ==================================================================== */
/* 10-cours-quiz.css */
/* ==================================================================== */
/* =================================================================
QCM / T/F : habillage graphique de la question
================================================================= */
.cours-quiz-item[data-type="qcm"] .cours-quiz-question,
.cours-quiz-item[data-type="tf"] .cours-quiz-question {
position: relative;
margin: 6px 20px 18px;
padding: 20px 22px 20px 72px;
background: linear-gradient(135deg,
rgba(96,191,245,0.12) 0%,
rgba(46,99,164,0.04) 100%);
border-left: 4px solid var(--sky);
border-radius: 0 10px 10px 0;
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.55;
color: var(--text-primary);
letter-spacing: -0.005em;
}
.cours-quiz-item[data-type="qcm"] .cours-quiz-question::before,
.cours-quiz-item[data-type="tf"] .cours-quiz-question::before {
content: "?";
position: absolute;
left: 22px; top: 18px;
width: 36px; height: 36px;
background: var(--sky);
color: #fff;
border-radius: 8px;
font-family: var(--font-display);
font-weight: 800;
font-size: 20px;
letter-spacing: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(96,191,245,0.3);
}
.cours-quiz-item[data-type="qcm"] .cours-quiz-question p,
.cours-quiz-item[data-type="tf"] .cours-quiz-question p {
margin: 0;
}
.cours-quiz-item[data-type="qcm"] .cours-quiz-question strong,
.cours-quiz-item[data-type="tf"] .cours-quiz-question strong {
font-weight: 700;
color: var(--blue);
}
/* ============================================================
: summary "Repères" élégant
Chevron custom + typo display + accent discret.
============================================================ */
.cours-criteria {
margin: 8px 0 14px;
padding: 0;
font-size: 14px;
line-height: 1.6;
}
.cours-criteria > summary {
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 10px;
border: 1px solid var(--border-dark);
border-radius: 999px;
background: var(--bg);
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.cours-criteria > summary::-webkit-details-marker {
display: none;
}
.cours-criteria > summary::before {
content: "";
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform 0.2s;
}
.cours-criteria[open] > summary::before {
transform: rotate(-180deg);
}
.cours-criteria > summary:hover,
.cours-criteria[open] > summary {
border-color: var(--sky);
color: var(--sky);
background: var(--bg-card);
}
.cours-criteria > p,
.cours-criteria > ul {
margin: 10px 0 0;
padding: 12px 14px 12px 16px;
background: var(--bg-card);
border-left: 2px solid var(--sky);
border-radius: 0 4px 4px 0;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.65;
}
.cours-criteria > ul {
list-style: none;
}
.cours-criteria > ul li {
position: relative;
padding-left: 14px;
margin-bottom: 4px;
}
.cours-criteria > ul li::before {
content: "";
position: absolute;
left: 0; top: 8px;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--sky);
}
.cours-quiz-input {
margin: 0 20px 12px; width: calc(100% - 40px);
background: var(--bg); color: var(--text-primary);
border: 1px solid var(--border-dark); border-radius: 4px;
font-family: var(--font-body); font-size: 14px;
line-height: 1.6; resize: vertical; min-height: 60px;
outline: none; transition: border-color 0.2s;
}
.cours-quiz-input::placeholder { color: var(--text-tertiary); }
.cours-quiz-input:focus { border-color: var(--sky); }
.cours-quiz-compare {
margin: 0 20px 16px; padding: 10px 20px;
background: var(--bg-elevated); color: var(--text-secondary);
border: 1px solid var(--border-dark); border-radius: 4px;
font-family: var(--font-display); font-size: 12px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; cursor: pointer;
transition: all 0.2s;
}
.cours-quiz-compare:hover {
background: var(--sky); color: var(--black);
border-color: var(--sky);
}
.cours-quiz-compare:disabled {
opacity: 0.3; cursor: not-allowed;
}
.cours-quiz-answer {
display: none; margin: 0 20px 16px; padding: 16px;
font-size: 14px; line-height: 1.7; color: var(--text-secondary);
background: rgba(96,191,245,0.05); border: 1px solid rgba(96,191,245,0.15);
border-radius: 4px;
}
.cours-quiz-answer-label {
font-family: var(--font-display); font-size: 10px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--sky);
margin-bottom: 8px;
}
.cours-quiz-item.revealed .cours-quiz-answer { display: block; }
.cours-quiz-item.revealed .cours-quiz-compare { display: none; }
.cours-quiz-item.revealed .cours-quiz-input {
border-color: var(--sky); background: var(--bg-elevated);
}
/* =================================================================
QUIZ V2 enrichi : marker visuel (numéro + icône SVG) + bloc
================================================================= */
/* Aside exemple isolé */
/* Input / reveal réalignés sans padding interne du parent */
/* Séparateur 5-couleurs entre items (signature brand) */
/* Responsive */
/* =================================================================
QCM — V2 « sobre ludique »
================================================================= */
.cours-qcm-options {
padding: 0 20px 4px;
display: flex; flex-direction: column; gap: 10px;
counter-reset: qcm-letter;
}
.cours-qcm-option {
display: flex; align-items: center; gap: 16px;
padding: 14px 18px;
border: 1.5px solid var(--border-dark);
border-radius: 8px;
cursor: pointer;
font-size: 0.9375rem;
transition: border-color 0.18s, background 0.18s, transform 0.15s, box-shadow 0.18s;
font-size: 14px; line-height: 1.5;
color: var(--text-primary);
background: var(--bg);
counter-increment: qcm-letter;
user-select: none;
}
.cours-qcm-option:hover {
border-color: var(--sky);
background: var(--bg-elevated);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(96,191,245,0.12);
}
.cours-qcm-option:focus-visible {
outline: 2px solid var(--sky);
outline-offset: 2px;
}
/* Radio « repurposed » en carre lettre A/B/C/D via counter. Le HTML
expose , on le styled comme pill. */
.cours-qcm-radio {
width: 36px; height: 36px;
border-radius: 7px;
background: var(--bg-card);
border: 1.5px solid var(--border-dark);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-weight: 800; font-size: 15px;
color: var(--text-primary);
letter-spacing: 0.01em;
transition: all 0.18s;
}
.cours-qcm-radio::before {
content: counter(qcm-letter, upper-alpha);
}
.cours-qcm-option:hover .cours-qcm-radio {
border-color: var(--sky);
color: var(--sky);
}
.cours-qcm-option.selected .cours-qcm-radio {
background: var(--sky);
border-color: var(--sky);
color: #fff;
transform: scale(1.04);
}
.cours-qcm-option.selected {
border-color: var(--sky);
}
/* Correct : card vert clair, pill verte avec checkmark SVG qui
remplace la lettre. Animation subtile d'apparition (scale). */
.cours-qcm-option.correct {
border-color: var(--green);
background: rgba(88,214,141,0.10);
}
.cours-qcm-option.correct .cours-qcm-radio {
background: var(--green);
border-color: var(--green);
color: #fff;
animation: cours-qcm-pop 0.25s ease-out;
}
.cours-qcm-option.correct .cours-qcm-radio::before {
content: "";
width: 14px; height: 8px;
border-left: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
transform: rotate(-45deg) translate(1px, -2px);
}
/* Wrong : card rouge clair, pill rouge avec X qui remplace la lettre */
.cours-qcm-option.wrong {
border-color: var(--red);
background: rgba(215,0,0,0.06);
}
.cours-qcm-option.wrong .cours-qcm-radio {
background: var(--red);
border-color: var(--red);
color: #fff;
animation: cours-qcm-pop 0.25s ease-out;
}
.cours-qcm-option.wrong .cours-qcm-radio::before {
content: "";
width: 12px; height: 12px;
background:
linear-gradient(45deg, transparent 0 44%, #fff 44% 56%, transparent 56% 100%),
linear-gradient(-45deg, transparent 0 44%, #fff 44% 56%, transparent 56% 100%);
}
@keyframes cours-qcm-pop {
0% { transform: scale(1); }
50% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.cours-qcm-option.disabled {
pointer-events: none;
opacity: 0.45;
transform: none;
box-shadow: none;
}
.cours-qcm-option.correct.disabled { opacity: 1; }
.cours-qcm-option.answered,
.cours-quiz-item.answered .cours-qcm-option {
pointer-events: none;
cursor: default;
}
.cours-quiz-item.answered .cours-qcm-option:hover {
transform: none; box-shadow: none;
}
/* Feedback qui se révèle après réponse : slide-down + accent couleur
selon le verdict. Vert si la reponse selectionnee etait correcte,
rouge sinon. Icône de statut dans la pastille circulaire gauche. */
.cours-qcm-feedback {
margin: 16px 20px 4px;
padding: 16px 18px 16px 52px;
font-size: 14px; line-height: 1.65;
color: var(--text-primary);
background: var(--bg-card);
border-left: 3px solid var(--sky);
border-radius: 0 6px 6px 0;
display: none;
position: relative;
animation: cours-qcm-feedback-in 0.35s ease-out;
}
.cours-qcm-feedback::before {
content: "i";
position: absolute;
left: 16px; top: 16px;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--sky);
color: #fff;
font-family: var(--font-display);
font-weight: 800; font-size: 13px; line-height: 1;
display: flex; align-items: center; justify-content: center;
font-style: italic;
}
.cours-quiz-item.answered .cours-qcm-feedback { display: block; }
/* Verdict success : la reponse cochee portait data-correct="true" */
.cours-quiz-item.answered:has(.cours-qcm-option.selected.correct) .cours-qcm-feedback {
border-left-color: var(--green);
background: rgba(88,214,141,0.06);
}
.cours-quiz-item.answered:has(.cours-qcm-option.selected.correct) .cours-qcm-feedback::before {
content: "";
background: var(--green);
width: 22px; height: 22px;
}
.cours-quiz-item.answered:has(.cours-qcm-option.selected.correct) .cours-qcm-feedback::after {
content: "";
position: absolute;
left: 21px; top: 23px;
width: 10px; height: 5px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
}
/* Verdict wrong : la reponse cochee portait data-correct="false" */
.cours-quiz-item.answered:has(.cours-qcm-option.selected.wrong) .cours-qcm-feedback {
border-left-color: var(--red);
background: rgba(215,0,0,0.04);
}
.cours-quiz-item.answered:has(.cours-qcm-option.selected.wrong) .cours-qcm-feedback::before {
content: "";
background: var(--red);
}
.cours-quiz-item.answered:has(.cours-qcm-option.selected.wrong) .cours-qcm-feedback::after {
content: "";
position: absolute;
left: 19px; top: 19px;
width: 16px; height: 16px;
background:
linear-gradient(45deg, transparent 0 44%, #fff 44% 56%, transparent 56% 100%),
linear-gradient(-45deg, transparent 0 44%, #fff 44% 56%, transparent 56% 100%);
}
@keyframes cours-qcm-feedback-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Vrai/Faux — meme logique visuelle que QCM, 2 gros boutons cote a cote */
.cours-tf-options {
padding: 0 20px 4px;
display: flex; gap: 12px;
}
.cours-tf-btn {
flex: 1; padding: 18px;
text-align: center;
border: 1.5px solid var(--border-dark);
border-radius: 8px;
cursor: pointer;
transition: border-color 0.18s, background 0.18s, transform 0.15s, box-shadow 0.18s, color 0.18s;
font-family: var(--font-display);
font-size: 15px; font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-primary);
background: var(--bg);
user-select: none;
}
.cours-tf-btn:hover {
border-color: var(--sky);
background: var(--bg-elevated);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(96,191,245,0.12);
}
.cours-tf-btn:focus-visible {
outline: 2px solid var(--sky);
outline-offset: 2px;
}
.cours-tf-btn.selected {
border-color: var(--sky);
background: var(--sky);
color: #fff;
}
.cours-tf-btn.correct {
border-color: var(--green);
background: var(--green);
color: #fff;
}
.cours-tf-btn.wrong {
border-color: var(--red);
background: var(--red);
color: #fff;
}
.cours-tf-btn.disabled {
pointer-events: none;
opacity: 0.45;
transform: none;
box-shadow: none;
}
.cours-tf-btn.correct.disabled { opacity: 1; }
.cours-tf-feedback {
padding: 0 20px 16px; font-size: 13px; line-height: 1.7;
color: var(--text-secondary); display: none;
}
.cours-quiz-item.answered .cours-tf-feedback { display: block; }
/* Tip / Astuce box */
.cours-tip {
background: rgba(96,191,245,0.10); border: 1px solid rgba(96,191,245,0.25);
border-left: 4px solid var(--sky); border-radius: 6px;
padding: 20px 24px; margin: 20px 0;
}
.cours-tip p { font-size: 14px; line-height: 1.7; color: var(--text-secondary); margin: 0; }
/* Trap / Piège box */
.cours-trap {
background: rgba(215,0,0,0.08); border: 1px solid rgba(215,0,0,0.2);
border-left: 4px solid var(--red); border-radius: 6px;
padding: 20px 24px; margin: 20px 0;
}
.cours-trap p { font-size: 14px; line-height: 1.7; color: var(--text-secondary); margin: 0; }
/* Mini-challenge */
/* Styles .cours-table (ancienne V1 marquée avec uppercase header) retirés
2026-04-24 : jamais utilisés hors des cours, remplacés par la V2
simplifiée (désormais sans préfixe, plus bas). */
/* Quote / Citation */
/* Scenario / Mise en situation */
.cours-scenario {
background: rgba(175,101,40,0.06);
border: 1px solid rgba(175,101,40,0.18);
border-left: 4px solid var(--caramel);
border-radius: 8px; padding: 24px 28px; margin: 28px 0;
position: relative;
}
.cours-scenario p { font-size: 14px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 8px; }
.cours-scenario p:last-child { margin-bottom: 0; }
/* Navigation prev/next */
/* Course landing / teaser */
/* Module list on landing */
/* Gate banner */
/* =================================================================
QUIZ SCORING
================================================================= */
.cours-quiz-result {
margin-top: 24px; padding: 24px;
border-radius: 6px; text-align: center;
display: none;
}
.cours-quiz-result.visible { display: block; }
.cours-quiz-result.success {
background: rgba(88,214,141,0.08);
border: 1px solid rgba(88,214,141,0.3);
}
.cours-quiz-result.partial {
background: rgba(255,206,0,0.08);
border: 1px solid rgba(255,206,0,0.3);
}
.cours-quiz-result-score {
font-family: var(--font-display); font-size: 28px;
font-weight: 700; color: var(--text-primary);
margin-bottom: 4px;
}
.cours-quiz-result-msg {
font-size: 14px; color: var(--text-secondary);
margin-bottom: 16px;
}
.cours-quiz-retry {
padding: 10px 24px; background: transparent;
border: 1px solid var(--border-dark); border-radius: 4px;
font-family: var(--font-display); font-size: 12px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text-secondary);
cursor: pointer; transition: all 0.2s;
}
.cours-quiz-retry:hover {
border-color: var(--sky); color: var(--sky);
}
/* ==================================================================== */
/* 11-cours-tuteur.css */
/* ==================================================================== */
/* === Auto-restored attribute selectors (anti-faux-positif PurgeCSS) === */
.cours-quiz-item[data-type="qcm"] .cours-quiz-question,
.cours-quiz-item[data-type="tf"] .cours-quiz-question {
position: relative;
margin: 6px 20px 18px;
padding: 20px 22px 20px 72px;
background: linear-gradient(135deg,
rgba(96,191,245,0.12) 0%,
rgba(46,99,164,0.04) 100%);
border-left: 4px solid var(--sky);
border-radius: 0 10px 10px 0;
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.55;
color: var(--text-primary);
letter-spacing: -0.005em;
}
.cours-quiz-item[data-type="qcm"] .cours-quiz-question::before,
.cours-quiz-item[data-type="tf"] .cours-quiz-question::before {
content: "?";
position: absolute;
left: 22px; top: 18px;
width: 36px; height: 36px;
background: var(--sky);
color: #fff;
border-radius: 8px;
font-family: var(--font-display);
font-weight: 800;
font-size: 20px;
letter-spacing: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(96,191,245,0.3);
}
.cours-quiz-item[data-type="qcm"] .cours-quiz-question p,
.cours-quiz-item[data-type="tf"] .cours-quiz-question p {
margin: 0;
}
.cours-quiz-item[data-type="qcm"] .cours-quiz-question strong,
.cours-quiz-item[data-type="tf"] .cours-quiz-question strong {
font-weight: 700;
color: var(--blue);
}
.cours-quiz-item[data-quiz-num] {
position: relative;
padding: 4px 0 0 84px;
border: none;
background: transparent;
border-radius: 0;
margin-bottom: 36px;
overflow: visible;
}
.cours-quiz-item[data-quiz-num] .cours-quiz-question {
padding: 0;
font-size: 15px;
font-weight: 500;
line-height: 1.6;
}
.cours-quiz-item[data-quiz-num] .cours-quiz-question p {
margin: 0;
}
.cours-quiz-item[data-quiz-color="sky"] { --quiz-accent: var(--sky); }
.cours-quiz-item[data-quiz-color="blue"] { --quiz-accent: var(--blue); }
.cours-quiz-item[data-quiz-color="caramel"] { --quiz-accent: var(--caramel); }
.cours-quiz-item[data-quiz-color="yellow"] { --quiz-accent: var(--yellow); }
.cours-quiz-item[data-quiz-color="red"] { --quiz-accent: var(--red); }
.cours-quiz-item[data-quiz-num] .cours-quiz-input {
margin: 14px 0 0; width: 100%;
}
.cours-quiz-item[data-quiz-num] .cours-quiz-answer,
.cours-quiz-item[data-quiz-num] .cours-quiz-compare {
margin: 12px 0 0;
}
.cours-quiz-item[data-quiz-num]:not(:last-child)::after {
content: "";
display: block;
margin: 32px 0 0;
height: 2px;
background: linear-gradient(
to right,
var(--sky) 0 20%,
var(--blue) 20% 40%,
var(--caramel) 40% 60%,
var(--yellow) 60% 80%,
var(--red) 80% 100%
);
opacity: 0.25;
}
@media (max-width: 600px) {
.cours-quiz-item[data-quiz-num] { padding-left: 52px; }
}
/* ==================================================================== */
/* 11-cours-tuteur.css */
/* ==================================================================== */
/* =================================================================
SANDBOX IA
================================================================= */
.cours-sandbox {
background: var(--bg-elevated);
border: 1px solid var(--border-dark);
border-left: 3px solid var(--sky);
border-radius: 6px;
padding: 24px;
margin: 32px 0;
}
.cours-sandbox-label {
font-family: var(--font-display);
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--sky); margin-bottom: 10px;
}
.cours-sandbox-desc {
font-size: 14px; line-height: 1.6;
color: var(--text-secondary); margin: 0 0 16px;
}
.cours-sandbox-input {
display: block;
width: 100%; background: var(--bg);
color: var(--text-primary);
border: 1px solid var(--border-dark);
border-radius: 4px;
font-family: var(--font-mono); font-size: 13px;
line-height: 1.6; padding: 16px;
resize: vertical; min-height: 180px; height: 180px;
outline: none; transition: border-color 0.2s;
box-sizing: border-box;
}
.cours-sandbox-input::placeholder {
color: var(--text-tertiary); font-family: var(--font-body);
}
.cours-sandbox-input:focus { border-color: var(--sky); }
.cours-sandbox-bar {
display: flex; align-items: center;
justify-content: space-between;
margin-top: 12px; gap: 12px;
}
.cours-sandbox-counter {
font-family: var(--font-display);
font-size: 12px; color: var(--text-tertiary);
}
.cours-sandbox-counter.warn { color: var(--yellow); }
.cours-sandbox-counter.exhausted { color: var(--red); }
.cours-sandbox-btn {
background: var(--sky); color: var(--black);
border: none; padding: 10px 28px;
font-family: var(--font-display);
font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
cursor: pointer; transition: all 0.2s;
border-radius: 4px; flex-shrink: 0;
}
.cours-sandbox-btn:hover { opacity: 0.85; }
.cours-sandbox-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.cours-sandbox-response {
margin-top: 16px; display: none;
}
.cours-sandbox-response.visible { display: block; }
.cours-sandbox-response-label {
font-family: var(--font-display);
font-size: 9px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--sky); margin-bottom: 8px;
}
.cours-sandbox-response-text {
background: var(--bg-elevated);
border-left: 3px solid var(--sky);
border-radius: 4px; padding: 16px 20px;
font-size: 14px; line-height: 1.7;
color: var(--text-reading); white-space: pre-wrap;
}
.cours-sandbox-response-error {
background: rgba(215,0,0,0.06);
border-left: 3px solid var(--red);
border-radius: 4px; padding: 16px 20px;
font-size: 14px; color: var(--text-secondary);
}
/* =================================================================
COURS V2 - Formulaire feedback fin de cours (métrique B monitoring)
================================================================= */
.cours-feedback {
margin: var(--space-xl) 0 0;
padding: var(--space-lg) 0 0;
border-top: 1px solid var(--border-dark);
}
.cours-feedback-title {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-md);
}
.cours-feedback-group {
margin-bottom: var(--space-lg);
}
.cours-feedback-question {
font: var(--type-body);
color: var(--text-secondary);
margin: 0 0 var(--space-sm);
line-height: 1.5;
}
.cours-feedback-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cours-feedback-chip {
display: inline-block;
padding: 6px 14px;
font: var(--type-caption);
color: var(--text-secondary);
background: var(--bg-elevated);
border: 1px solid var(--border-dark);
border-radius: 20px;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
user-select: none;
}
.cours-feedback-chip:hover {
background: var(--bg);
border-color: var(--text-tertiary);
}
.cours-feedback-chip input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.cours-feedback-chip.selected {
background: var(--text-primary);
color: var(--bg);
border-color: var(--text-primary);
}
.cours-feedback-submit {
display: inline-block;
padding: 10px 24px;
font: var(--type-caption);
font-weight: 600;
color: var(--bg);
background: var(--text-secondary);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.15s, opacity 0.15s;
}
.cours-feedback-submit:hover {
background: var(--text-primary);
}
.cours-feedback-submit:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cours-feedback-confirm {
font: var(--type-caption);
color: var(--text-tertiary);
margin: var(--space-sm) 0 0;
display: none;
}
.cours-feedback[data-submitted="true"] .cours-feedback-form {
display: none;
}
.cours-feedback[data-submitted="true"] .cours-feedback-confirm {
display: block;
}
/* =================================================================
TUTEUR WIDGET
================================================================= */
.tuteur-fab {
position: fixed; bottom: 24px; right: 24px;
width: 56px; height: 56px;
background: transparent; color: var(--text-primary);
display: flex; align-items: center; justify-content: center;
cursor: pointer; z-index: 1000;
filter: drop-shadow(0 6px 16px rgba(0,0,0,0.12));
transition: transform 0.2s;
}
.tuteur-fab:hover { transform: scale(1.08); }
.tuteur-fab svg { width: 56px; height: 56px; display: block; }
.tuteur-fab-eye {
transform-origin: center;
transform-box: fill-box;
animation: ada-blink 8s infinite ease-in-out;
}
.tuteur-fab-eye-right { animation-delay: 0.04s; }
@media (prefers-reduced-motion: reduce) {
.tuteur-fab-eye { animation: none; }
}
.tuteur-fab[aria-expanded="true"] { display: none; }
.tuteur-panel {
position: fixed; bottom: 24px; right: 24px;
/* Strict alignement sur .alan-widget-window : memes dimensions par defaut
(380x500) et meme mode large (600 / min 700). Cohérence pixel-perfect
entre les deux widgets de tuteur. */
width: 380px; height: 500px;
max-height: calc(100vh - 48px);
background: var(--bg); border: 1px solid var(--border-dark);
border-radius: var(--radius-md);
box-shadow: var(--elev-floating);
display: flex; flex-direction: column;
z-index: 1001;
opacity: 0; pointer-events: none; transform: translateY(16px);
transition: opacity 0.2s ease, transform 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.tuteur-panel[aria-hidden="false"] {
opacity: 1; pointer-events: all; transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.tuteur-panel { transition: opacity 0.15s ease; transform: none; }
.tuteur-panel[aria-hidden="false"] { transform: none; }
}
/* Mode agrandi : aligne sur le pattern Alan (data-size large). */
.tuteur-panel[data-size="large"] {
width: min(600px, calc(100vw - 48px));
height: min(700px, calc(100vh - 48px));
}
.tuteur-header-expand {
background: none; border: none; padding: 4px 6px;
color: var(--text-tertiary); cursor: pointer;
font-family: inherit; font-size: 16px; line-height: 1;
border-radius: 4px;
transition: color 0.15s ease;
}
.tuteur-header-expand:hover { color: var(--text-secondary); }
.tuteur-header-expand:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
/* Jauge session dans le header de la bulle flottante */
.tuteur-header-gauge {
position: relative;
background: none; border: none; padding: 0;
width: 24px; height: 24px;
cursor: pointer; flex-shrink: 0;
color: var(--accent-primary);
}
.tuteur-header-gauge svg { display: block; }
.tuteur-header-gauge-arc { transition: stroke-dashoffset 0.35s ease, stroke 0.35s ease; }
.tuteur-header-popover {
position: absolute; top: calc(100% + 8px); right: 60px;
padding: 8px 12px;
background: var(--bg);
border: 1px solid var(--border-dark);
border-radius: 6px;
box-shadow: var(--elev-floating);
font-size: 12px; color: var(--text-secondary);
white-space: nowrap;
z-index: 10;
}
.tuteur-header {
padding: 12px 16px; border-bottom: 1px solid var(--border-dark);
display: flex; align-items: center; gap: 10px;
flex-shrink: 0;
}
.tuteur-header-title { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.tuteur-header-context {
font-size: 12px; color: var(--text-tertiary); flex: 1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tuteur-header-new {
font-size: 11px; color: var(--text-tertiary); background: none; border: none;
cursor: pointer; text-decoration: underline; padding: 0;
border-radius: 4px;
transition: color 0.15s ease;
}
.tuteur-header-new:hover { color: var(--text-secondary); }
.tuteur-header-new:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
.tuteur-header-close {
background: none; border: none; font-size: 22px;
cursor: pointer; color: var(--text-tertiary);
padding: 0 4px; line-height: 1; border-radius: 4px;
transition: color 0.15s ease;
}
.tuteur-header-close:hover { color: var(--text-primary); }
.tuteur-header-close:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
.tuteur-messages {
flex: 1; overflow-y: auto; padding: 16px;
display: flex; flex-direction: column; gap: 12px;
scrollbar-width: thin;
}
.tuteur-msg {
max-width: 85%;
display: flex; flex-direction: column; gap: 4px;
}
.tuteur-msg p {
margin: 0;
font-size: 14px; line-height: 1.6;
padding: 10px 14px; border-radius: 12px;
word-wrap: break-word; overflow-wrap: anywhere;
}
.tuteur-msg.user { align-self: flex-end; }
.tuteur-msg.user p {
background: color-mix(in srgb, var(--sky) 18%, var(--bg-elevated));
color: var(--text-primary);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
.tuteur-msg.user p {
background: var(--bg-elevated);
border: 1px solid var(--sky);
}
}
.tuteur-msg.assistant p {
background: color-mix(in srgb, var(--sky) 8%, var(--bg-elevated));
color: var(--text-primary);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
.tuteur-msg.assistant p {
background: var(--bg-elevated);
border-left: 3px solid var(--sky);
}
}
.tuteur-msg.error p {
background: rgba(215,0,0,0.06); color: var(--text-secondary);
font-size: 13px;
border-left: 3px solid var(--red);
border-radius: 4px;
}
/* ----- Avatars Ada (tasks/tuteur-avatar-ada.md) ----- */
.tuteur-header-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; flex-shrink: 0;
color: var(--text-primary);
}
.tuteur-header-avatar svg { display: block; }
.tuteur-msg-avatar {
display: inline-flex; align-items: flex-start; justify-content: center;
width: 32px; height: 32px; flex-shrink: 0;
margin-top: 2px;
color: var(--text-primary);
}
.tuteur-msg-avatar svg { display: block; }
/* Messages assistant : avatar a gauche, bulle a droite */
.tuteur-msg.assistant {
display: flex; gap: 8px; align-items: flex-start;
max-width: 92%;
}
.tuteur-msg.assistant p { flex: 1; min-width: 0; }
/* ----- Popover d'onboarding premiere visite ----- */
.tuteur-intro {
position: fixed; bottom: 96px; right: 24px;
max-width: 320px; padding: 20px;
background: var(--bg); color: var(--text-primary);
border: 1px solid var(--border-dark);
border-radius: var(--radius-md);
box-shadow: var(--elev-floating);
z-index: 1002;
animation: tuteurIntroIn 0.35s ease-out;
}
.tuteur-intro-arrow {
position: absolute; bottom: -8px; right: 28px;
width: 16px; height: 16px;
background: var(--bg);
border-right: 1px solid var(--border-dark);
border-bottom: 1px solid var(--border-dark);
transform: rotate(45deg);
}
.tuteur-intro-title {
margin: 0 0 8px; font-weight: 600; font-size: 14px;
color: var(--text-primary);
}
.tuteur-intro-text {
margin: 0 0 14px; font-size: 13px; line-height: 1.5;
color: var(--text-secondary);
}
.tuteur-intro-ok {
padding: 6px 14px; background: var(--accent-primary); color: var(--bg);
border: none; border-radius: var(--radius-sm);
font-size: 12px; font-weight: 600; cursor: pointer;
font-family: inherit;
}
.tuteur-intro-fade { opacity: 0; transition: opacity 0.3s; }
@keyframes tuteurIntroIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 639px) {
.tuteur-intro {
right: 16px; left: 16px; max-width: none;
bottom: 96px;
}
}
/* ----- Suggestions d'amorce (affichees uniquement a l'accueil) ----- */
.tuteur-suggestions {
display: flex; flex-direction: column; gap: 6px;
margin: 4px 0 0 40px; /* aligne avec la bulle assistant (avatar 32 + gap 8) */
}
.tuteur-suggestion {
text-align: left; font-size: 13px; line-height: 1.5;
padding: 8px 12px; border: 1px solid var(--border-dark);
border-radius: 10px; background: var(--bg);
color: var(--text-secondary); cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
font-family: inherit;
}
.tuteur-suggestion:hover {
background: var(--bg-elevated); color: var(--text-primary);
border-color: var(--text-tertiary);
}
.tuteur-dots span {
animation: tuteurDot 1.2s infinite;
opacity: 0.3;
font-size: 18px;
letter-spacing: 2px;
}
.tuteur-dots span:nth-child(2) { animation-delay: 0.2s; }
.tuteur-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes tuteurDot {
0%, 60%, 100% { opacity: 0.3; }
30% { opacity: 1; }
}
.tuteur-input-bar {
padding: 12px; border-top: 1px solid var(--border-dark);
display: flex; gap: 8px; align-items: flex-end;
}
.tuteur-input {
flex: 1; resize: none; border: 1px solid var(--border-dark);
border-radius: var(--radius-sm); padding: 8px 12px;
font-size: 14px; font-family: var(--font-body);
background: var(--bg); color: var(--text-primary);
outline: none;
}
.tuteur-input:focus { border-color: var(--accent-primary); }
.tuteur-send {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: var(--accent-primary);
color: var(--bg);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease, transform 0.15s ease;
}
.tuteur-send svg { display: block; }
.tuteur-send:hover:not(:disabled) { background: var(--accent-primary-muted, var(--accent-primary)); transform: translateY(-1px); }
.tuteur-send:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.tuteur-send:disabled { opacity: 0.4; cursor: not-allowed; }
/* Gauge dans le header (deplace depuis input-bar). Pastille ronde */
.tuteur-header-gauge {
background: transparent;
border: none;
padding: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent-primary);
border-radius: 50%;
transition: background 0.15s ease;
}
.tuteur-header-gauge:hover { background: color-mix(in srgb, var(--accent-primary) 12%, transparent); }
.tuteur-header-gauge:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.tuteur-header-gauge svg { display: block; }
/* Tuteur - Mobile */
@media (max-width: 639px) {
.tuteur-panel {
width: 100%; height: 100%; bottom: 0; right: 0;
border-radius: 0;
}
}
/* =================================================================
COURS TRY ADA (Ada in-bloc, moments sandbox scaffoldes)
================================================================= */
.cours-try-ada {
position: relative;
background: var(--bg-elevated);
border: 1px solid var(--border-dark);
border-left: 3px solid var(--accent-primary);
border-radius: var(--radius-md);
padding: var(--space-lg);
margin: var(--space-md) 0;
}
.cours-try-ada-header {
display: flex; align-items: center; gap: 8px;
margin-bottom: var(--space-md);
color: var(--text-primary);
}
.cours-try-ada-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; flex-shrink: 0;
color: var(--text-primary);
}
.cours-try-ada-avatar svg { display: block; }
.cours-try-ada-label {
font-weight: 600; font-size: 14px;
color: var(--text-primary);
flex: 1;
}
/* Jauge : positionnee dans la bar a cote du bouton d'envoi (et non dans
le header), comme Ada flottante, pour avoir le feedback pres de l'action. */
.cours-try-ada-gauge {
position: relative;
background: none; border: none; padding: 0;
width: 24px; height: 24px;
cursor: pointer; flex-shrink: 0;
color: var(--accent-primary);
transition: transform 0.15s ease;
}
.cours-try-ada-gauge:hover { transform: scale(1.08); }
.cours-try-ada-gauge:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 3px;
border-radius: 50%;
}
.cours-try-ada-gauge svg { display: block; }
.cours-try-ada-gauge-arc {
transition: stroke-dashoffset 0.35s ease, stroke 0.35s ease;
}
/* Popover : au-dessus de la jauge (ancrage bottom), fleche pointant vers le bas. */
.cours-try-ada-popover {
position: absolute;
bottom: calc(100% + 10px);
right: 0;
width: max-content; max-width: 240px;
padding: 8px 12px;
background: var(--bg);
border: 1px solid var(--border-dark);
border-radius: 6px;
box-shadow: var(--elev-floating);
font-size: 12px; line-height: 1.5;
color: var(--text-secondary);
white-space: nowrap;
z-index: 10;
}
.cours-try-ada-popover::before {
content: ""; position: absolute;
bottom: -6px; right: 8px;
width: 10px; height: 10px;
background: var(--bg);
border-right: 1px solid var(--border-dark);
border-bottom: 1px solid var(--border-dark);
transform: rotate(45deg);
}
.cours-try-ada-input {
width: 100%; min-height: 120px;
background: var(--bg);
color: var(--text-primary);
border: 1px solid var(--border-dark);
border-radius: var(--radius-sm);
padding: 12px 14px;
font-family: var(--font-body); font-size: 14px;
line-height: 1.6;
resize: vertical; outline: none;
box-sizing: border-box;
transition: border-color 0.15s;
}
.cours-try-ada-input:focus { border-color: var(--accent-primary); }
.cours-try-ada-input:disabled {
background: var(--bg-elevated);
cursor: not-allowed;
color: var(--text-tertiary);
}
.cours-try-ada-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-top: var(--space-sm);
flex-wrap: wrap;
}
.cours-try-ada-hint {
font-size: 12px; color: var(--text-tertiary);
}
/* Groupe droite : jauge (feedback) + bouton envoyer, comme Ada flottante. */
.cours-try-ada-actions {
display: flex;
align-items: center;
gap: 12px;
position: relative;
flex-shrink: 0;
}
.cours-try-ada-submit {
padding: 10px 20px;
background: var(--accent-primary); color: var(--bg);
border: none; border-radius: var(--radius-sm);
font-family: inherit; font-size: 13px; font-weight: 600;
cursor: pointer; transition: opacity 0.15s, transform 0.15s;
}
.cours-try-ada-submit:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); }
.cours-try-ada-submit:disabled {
opacity: 0.4; cursor: not-allowed;
}
/* Variante Alan : bouton + jauge en caramel pour coherence de persona. */
.cours-try-ada--alan .cours-try-ada-submit {
background: var(--caramel);
color: var(--bg);
}
.cours-try-ada--alan .cours-try-ada-gauge {
color: var(--caramel);
}
.cours-try-ada--alan .cours-try-ada-input:focus {
border-color: var(--caramel);
}
.cours-try-ada--alan .cours-try-ada-msg--user p {
background: var(--caramel);
}
.cours-try-ada--alan .cours-try-ada-msg--closure p {
border-left-color: var(--caramel);
}
.cours-try-ada-response {
margin-bottom: var(--space-md);
display: flex; flex-direction: column; gap: 12px;
max-height: 280px;
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
}
.cours-try-ada-response:empty { margin-bottom: 0; max-height: 0; overflow: hidden; }
.cours-try-ada-msg p {
margin: 0;
padding: 12px 16px;
border-radius: 10px;
font-size: 14px; line-height: 1.6;
white-space: pre-wrap;
}
.cours-try-ada-msg--user p {
background: var(--accent-primary); color: var(--bg);
align-self: flex-end;
max-width: 85%; margin-left: auto;
}
.cours-try-ada-msg--assistant p {
background: var(--bg); color: var(--text-primary);
border: 1px solid var(--border-dark);
max-width: 92%;
}
.cours-try-ada-msg--error p {
background: rgba(215,0,0,0.06); color: var(--text-secondary);
font-size: 13px;
}
.cours-try-ada-msg--closure p {
background: var(--bg); color: var(--text-primary);
border: 1px solid var(--border-dark);
border-left: 3px solid var(--accent-primary);
font-style: italic;
}
.cours-try-ada-dots span {
display: inline-block; animation: tryAdaDot 1.2s infinite;
}
.cours-try-ada-dots span:nth-child(2) { animation-delay: 0.2s; }
.cours-try-ada-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes tryAdaDot {
0%, 60%, 100% { opacity: 0.3; }
30% { opacity: 1; }
}
/* Etat read-only : plafond de tours atteint */
.cours-try-ada[data-locked="true"] {
border-left-color: var(--text-tertiary);
}
.cours-try-ada[data-locked="true"] .cours-try-ada-label {
color: var(--text-tertiary);
}
/* =================================================================
VARIANTE TUTEUR ALAN (sandbox Claude Code)
================================================================= */
.cours-try-ada--alan {
border-left-color: var(--caramel);
}
.cours-try-ada--alan[data-locked="true"] {
border-left-color: var(--text-tertiary);
}
/* Brief scaffolding : callout en tete du widget, coussin caramel. */
.cours-try-ada-brief {
padding: 14px 16px;
margin-bottom: var(--space-md);
background: rgba(175, 101, 40, 0.07);
border-radius: var(--radius-sm);
border-bottom: 1px dashed var(--border-dark);
}
.cours-try-ada-brief-heading {
margin: 0 0 8px;
font: 600 1rem/1.35 var(--font-display);
letter-spacing: -0.01em;
color: var(--text-primary);
}
.cours-try-ada-brief p,
.cours-try-ada-brief ul {
margin: 0 0 10px;
font: 400 0.95rem/1.6 var(--font-body);
color: var(--text-secondary);
}
.cours-try-ada-brief ul {
padding-left: 20px;
}
.cours-try-ada-brief li {
margin-bottom: 4px;
}
.cours-try-ada-brief p:last-child,
.cours-try-ada-brief ul:last-child {
margin-bottom: 0;
}
.cours-try-ada-brief code {
font: 400 0.88em/1 var(--font-mono);
background: rgba(175, 101, 40, 0.12);
padding: 1px 5px;
border-radius: 3px;
}
/* =================================================================
FEEDBACK GRACE (alpha/beta)
================================================================= */
.feedback-fab {
position: fixed;
left: 24px;
bottom: 72px;
z-index: 1500;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px 10px 12px;
background: var(--bg);
color: var(--text-primary);
border: 2px solid var(--yellow);
border-radius: 999px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.feedback-fab:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.feedback-fab:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 3px;
}
.feedback-fab svg { display: block; color: var(--text-primary); }
.feedback-fab-label { white-space: nowrap; }
@media (max-width: 640px) {
.feedback-fab {
left: 16px;
bottom: 16px;
padding: 10px;
}
.feedback-fab-label { display: none; }
}
/* Lien footer discret, toujours present. */
.feedback-footer-link {
/* hérite de .footer-link */
}
/* Modale */
.feedback-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 2000;
animation: feedbackFadeIn 0.18s ease-out;
}
.feedback-modal {
background: var(--bg);
color: var(--text-primary);
border: 1px solid var(--border-dark);
border-radius: var(--radius-md);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
width: 100%;
max-width: 480px;
padding: 24px 24px 20px;
font-family: var(--font-body);
animation: feedbackSlideIn 0.22s ease-out;
}
.feedback-modal-head {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 14px;
align-items: start;
margin-bottom: 18px;
}
.feedback-modal-avatar {
display: inline-flex;
align-items: center;
color: var(--text-primary);
}
.feedback-modal-avatar svg { display: block; }
.feedback-modal-title {
margin: 0 0 4px;
font: 600 1.15rem/1.3 var(--font-display);
letter-spacing: -0.01em;
color: var(--text-primary);
}
.feedback-modal-lead {
margin: 0;
font-size: 0.9rem;
line-height: 1.45;
color: var(--text-secondary);
}
.feedback-modal-close {
background: none;
border: none;
font-size: 24px;
line-height: 1;
padding: 0 4px;
cursor: pointer;
color: var(--text-tertiary);
transition: color 0.15s;
align-self: start;
}
.feedback-modal-close:hover { color: var(--text-primary); }
.feedback-modal-input {
width: 100%;
min-height: 120px;
box-sizing: border-box;
background: var(--bg);
color: var(--text-primary);
border: 1px solid var(--border-dark);
border-radius: var(--radius-sm);
padding: 12px 14px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.55;
resize: vertical;
outline: none;
transition: border-color 0.15s;
}
.feedback-modal-input:focus { border-color: var(--yellow); }
.feedback-modal-input:disabled {
background: var(--bg-elevated);
color: var(--text-tertiary);
cursor: not-allowed;
}
/* Intro Grace : coussin jaune en tete de modale, premier tour de parole. */
.feedback-modal-intro {
margin: 0 0 14px;
padding: 12px 14px;
background: rgba(255, 206, 0, 0.12);
border-left: 3px solid var(--yellow);
border-radius: var(--radius-sm);
}
.feedback-modal-intro p {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-secondary);
}
/* Consent : checkbox obligatoire, submit desactive tant qu'elle n'est pas
cochee. Pattern identique pour le formulaire de contact (voir plus bas). */
.feedback-modal-consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 14px;
cursor: pointer;
user-select: none;
}
.feedback-modal-consent-checkbox {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--yellow);
cursor: pointer;
}
.feedback-modal-consent-text {
font-size: 12px;
line-height: 1.5;
color: var(--text-tertiary);
}
.feedback-modal-consent-text a {
color: var(--text-secondary);
text-decoration: underline;
}
.feedback-modal-consent-text a:hover { color: var(--text-primary); }
.feedback-modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
align-items: center;
}
.feedback-modal-cancel {
background: none;
border: none;
padding: 8px 14px;
font: 500 13px/1 var(--font-body);
color: var(--text-secondary);
cursor: pointer;
border-radius: var(--radius-sm);
transition: color 0.15s;
}
.feedback-modal-cancel:hover { color: var(--text-primary); }
.feedback-modal-submit {
padding: 10px 20px;
background: var(--yellow);
color: var(--black);
border: none;
border-radius: var(--radius-sm);
font: 600 13px/1 var(--font-body);
cursor: pointer;
transition: opacity 0.15s, transform 0.15s;
}
.feedback-modal-submit:hover:not(:disabled) {
opacity: 0.92;
transform: translateY(-1px);
}
.feedback-modal-submit:disabled,
.feedback-modal-cancel:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.feedback-modal-status {
margin: 12px 0 0;
font-size: 13px;
line-height: 1.4;
min-height: 1.4em;
color: var(--text-secondary);
}
.feedback-modal-status--ok { color: var(--green); }
.feedback-modal-status--err { color: var(--red); }
@keyframes feedbackFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes feedbackSlideIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.feedback-modal-overlay,
.feedback-modal { animation: none; }
.feedback-fab { transition: none; }
}
/* ==================================================================== */
/* 12-cours-certif.css */
/* ==================================================================== */
/* === Auto-restored attribute selectors (anti-faux-positif PurgeCSS) === */
.cours-feedback[data-submitted="true"] .cours-feedback-form {
display: none;
}
.cours-feedback[data-submitted="true"] .cours-feedback-confirm {
display: block;
}
.tuteur-panel[data-size="large"] {
width: min(600px, calc(100vw - 48px));
height: min(700px, calc(100vh - 48px));
}
.cours-try-ada[data-locked="true"] {
border-left-color: var(--text-tertiary);
}
.cours-try-ada[data-locked="true"] .cours-try-ada-label {
color: var(--text-tertiary);
}
.cours-try-ada--alan[data-locked="true"] {
border-left-color: var(--text-tertiary);
}
/* =============================================================
ESCALADE PEDAGOGIQUE (chantier alpha 2026-04-30)
- Footer permanent du panel Ada (lien discret)
- Nudge inline contextuel (declenche par signal Ada / mots-cles
frustration / seuil de tours)
- Modale d'escalade (formulaire, recontact optionnel)
- Toggle recontact dans la modale Grace (feedback)
============================================================= */
/* --- Footer du panel Ada : lien permanent --- */
.tuteur-footer {
border-top: 1px solid var(--border-light, #e5e7eb);
padding: 8px 16px;
text-align: center;
background: var(--bg-secondary, #fafafa);
flex-shrink: 0;
}
.tuteur-footer-link {
font-size: 12px;
color: var(--text-tertiary, #6b7280);
text-decoration: none;
letter-spacing: 0.01em;
transition: color 0.15s ease;
}
.tuteur-footer-link:hover,
.tuteur-footer-link:focus-visible {
color: var(--text-primary, #111);
text-decoration: underline;
text-underline-offset: 3px;
}
/* --- Nudge inline dans le flux de messages --- */
.tuteur-nudge {
margin: 12px 0 4px;
padding: 10px 14px;
background: color-mix(in srgb, var(--sky) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--sky) 50%, transparent);
border-radius: 10px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 13px;
line-height: 1.4;
animation: tuteur-nudge-fade 280ms ease-out;
}
@keyframes tuteur-nudge-fade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.tuteur-nudge-text {
flex: 1 1 auto;
color: var(--text-primary, #111);
}
.tuteur-nudge-action {
flex-shrink: 0;
background: var(--text-primary, #111);
color: var(--bg-primary, #fff);
border: none;
padding: 6px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: opacity 0.15s ease;
}
.tuteur-nudge-action:hover,
.tuteur-nudge-action:focus-visible {
opacity: 0.85;
}
/* --- Modale d'escalade (overlay + modale centree) --- */
.tuteur-escalate-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 16px;
animation: tuteur-escalate-overlay-in 180ms ease-out;
}
@keyframes tuteur-escalate-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
.tuteur-escalate-modal {
background: var(--bg-primary, #fff);
border-radius: 16px;
width: min(520px, 100%);
max-height: calc(100vh - 32px);
overflow-y: auto;
padding: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
position: relative;
animation: tuteur-escalate-modal-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes tuteur-escalate-modal-in {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.tuteur-escalate-head {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.tuteur-escalate-avatar {
flex-shrink: 0;
display: inline-flex;
}
.tuteur-escalate-avatar svg {
width: 40px;
height: 40px;
color: var(--text-primary, #111);
}
.tuteur-escalate-head > div {
flex: 1 1 auto;
min-width: 0;
}
.tuteur-escalate-title {
margin: 0 0 4px;
font-size: 17px;
font-weight: 600;
color: var(--text-primary, #111);
line-height: 1.3;
}
.tuteur-escalate-lead {
margin: 0;
font-size: 13px;
color: var(--text-secondary, #4b5563);
line-height: 1.4;
}
.tuteur-escalate-close {
flex-shrink: 0;
background: transparent;
border: none;
font-size: 24px;
line-height: 1;
color: var(--text-tertiary, #6b7280);
cursor: pointer;
padding: 0 4px;
margin-top: -2px;
}
.tuteur-escalate-close:hover {
color: var(--text-primary, #111);
}
.tuteur-escalate-message-label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--text-primary, #111);
margin-bottom: 6px;
}
.tuteur-escalate-message {
width: 100%;
border: 1px solid var(--border-dark, #d1d5db);
border-radius: 8px;
padding: 10px 12px;
font: inherit;
font-size: 14px;
line-height: 1.5;
resize: vertical;
min-height: 90px;
margin-bottom: 12px;
background: var(--bg-primary, #fff);
color: var(--text-primary, #111);
box-sizing: border-box;
}
.tuteur-escalate-message:focus {
outline: none;
border-color: var(--sky);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 30%, transparent);
}
.tuteur-escalate-exchange {
display: block;
margin: 0 0 12px;
padding: 10px 12px;
background: var(--bg-secondary, #fafafa);
border: 1px solid var(--border-light, #e5e7eb);
border-radius: 8px;
font-size: 13px;
cursor: pointer;
user-select: none;
}
.tuteur-escalate-exchange-cb {
margin-right: 8px;
vertical-align: middle;
}
.tuteur-escalate-exchange-text {
vertical-align: middle;
color: var(--text-primary, #111);
}
.tuteur-escalate-exchange-details {
margin-top: 8px;
font-size: 12px;
color: var(--text-secondary, #4b5563);
cursor: default;
}
.tuteur-escalate-exchange-details summary {
cursor: pointer;
color: var(--text-tertiary, #6b7280);
font-size: 12px;
list-style: none;
outline: none;
}
.tuteur-escalate-exchange-details summary::-webkit-details-marker { display: none; }
.tuteur-escalate-exchange-details summary::before {
content: "\25B8 ";
display: inline-block;
margin-right: 4px;
transition: transform 150ms ease;
}
.tuteur-escalate-exchange-details[open] summary::before {
transform: rotate(90deg);
}
.tuteur-escalate-exchange-details p {
margin: 6px 0;
padding: 6px 8px;
background: var(--bg-primary, #fff);
border-radius: 6px;
white-space: pre-wrap;
word-break: break-word;
}
.tuteur-escalate-toggle {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
padding: 8px 0;
font-size: 13px;
color: var(--text-primary, #111);
cursor: pointer;
user-select: none;
}
.tuteur-escalate-toggle input[type="checkbox"] {
margin: 0;
flex-shrink: 0;
}
.tuteur-escalate-contact-fields {
margin: 0 0 12px;
padding: 12px;
background: var(--bg-secondary, #fafafa);
border: 1px solid var(--border-light, #e5e7eb);
border-radius: 8px;
}
.tuteur-escalate-field-label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--text-primary, #111);
margin: 8px 0 4px;
}
.tuteur-escalate-field-label:first-child { margin-top: 0; }
.tuteur-escalate-email,
.tuteur-escalate-name {
width: 100%;
border: 1px solid var(--border-dark, #d1d5db);
border-radius: 6px;
padding: 8px 10px;
font: inherit;
font-size: 13px;
background: var(--bg-primary, #fff);
color: var(--text-primary, #111);
box-sizing: border-box;
}
.tuteur-escalate-email:focus,
.tuteur-escalate-name:focus {
outline: none;
border-color: var(--sky);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--sky) 30%, transparent);
}
.tuteur-escalate-consent {
display: flex;
gap: 8px;
margin: 12px 0 0;
font-size: 12px;
line-height: 1.4;
color: var(--text-secondary, #4b5563);
cursor: pointer;
user-select: none;
}
.tuteur-escalate-consent input[type="checkbox"] {
margin: 2px 0 0;
flex-shrink: 0;
}
.tuteur-escalate-consent a {
color: var(--text-primary, #111);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Honeypot : cache hors flux pour bots, invisible aux utilisateurs */
.tuteur-escalate-hp,
.feedback-modal-hp {
position: absolute !important;
left: -9999px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.tuteur-escalate-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 16px;
}
.tuteur-escalate-cancel,
.tuteur-escalate-submit {
border: 1px solid var(--border-dark, #d1d5db);
border-radius: 999px;
padding: 8px 18px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: opacity 0.15s ease, background 0.15s ease;
}
.tuteur-escalate-cancel {
background: transparent;
color: var(--text-secondary, #4b5563);
}
.tuteur-escalate-cancel:hover {
background: var(--bg-secondary, #fafafa);
}
.tuteur-escalate-submit {
background: var(--text-primary, #111);
color: var(--bg-primary, #fff);
border-color: var(--text-primary, #111);
}
.tuteur-escalate-submit:hover:not(:disabled) {
opacity: 0.85;
}
.tuteur-escalate-submit:disabled,
.tuteur-escalate-cancel:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.tuteur-escalate-status {
margin: 12px 0 0;
font-size: 12px;
min-height: 18px;
color: var(--text-secondary, #4b5563);
}
.tuteur-escalate-status--ok { color: var(--accent-primary, #16a34a); }
.tuteur-escalate-status--err { color: var(--accent-danger, #dc2626); }
/* --- Toggle recontact dans la modale Grace (feedback) --- */
.feedback-modal-recontact-toggle {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
padding: 8px 0;
font-size: 13px;
color: var(--text-primary, #111);
cursor: pointer;
user-select: none;
}
.feedback-modal-recontact-toggle input[type="checkbox"] {
margin: 0;
flex-shrink: 0;
}
.feedback-modal-recontact-fields {
margin: 0 0 12px;
padding: 12px;
background: var(--bg-secondary, #fafafa);
border: 1px solid var(--border-light, #e5e7eb);
border-radius: 8px;
}
.feedback-modal-field-label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--text-primary, #111);
margin: 8px 0 4px;
}
.feedback-modal-field-label:first-child { margin-top: 0; }
.feedback-modal-email,
.feedback-modal-name {
width: 100%;
border: 1px solid var(--border-dark, #d1d5db);
border-radius: 6px;
padding: 8px 10px;
font: inherit;
font-size: 13px;
background: var(--bg-primary, #fff);
color: var(--text-primary, #111);
box-sizing: border-box;
}
.feedback-modal-email:focus,
.feedback-modal-name:focus {
outline: none;
border-color: var(--yellow);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--yellow) 30%, transparent);
}
.feedback-modal-recontact-consent {
display: flex;
gap: 8px;
margin: 12px 0 0;
font-size: 12px;
line-height: 1.4;
color: var(--text-secondary, #4b5563);
cursor: pointer;
user-select: none;
}
.feedback-modal-recontact-consent input[type="checkbox"] {
margin: 2px 0 0;
flex-shrink: 0;
}
.feedback-modal-recontact-consent a {
color: var(--text-primary, #111);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Mobile : modale escalade plus serree */
@media (max-width: 600px) {
.tuteur-escalate-modal {
padding: 18px;
border-radius: 12px;
}
.tuteur-escalate-title { font-size: 16px; }
.tuteur-escalate-actions { flex-direction: column-reverse; }
.tuteur-escalate-cancel,
.tuteur-escalate-submit { width: 100%; }
}
/* ==================================================================== */
/* 12-cours-certif.css */
/* ==================================================================== */
/* =================================================================
COMPOSANTS MANQUANTS (audit UX 2026-04-19)
================================================================= */
/* Valable au : encart de fraicheur de donnee (tarifs, versions, URLs).
Repere par .claude-code/* principalement. Jaune pour ne pas rentrer
en concurrence avec Alan (caramel) ou Marvin (green). */
.valable-au {
background: rgba(255, 206, 0, 0.08);
border-left: 3px solid var(--yellow);
padding: var(--space-sm) var(--space-md);
margin: var(--space-md) 0;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font: var(--type-caption);
color: var(--text-secondary);
}
.valable-au strong {
color: var(--text-primary);
font-weight: 600;
}
/* Fiches reflexes (resume.php) : 4 fiches depliees en grille 2x2.
Une fiche = un module du cours, accent couleur distinct par module.
Reutilise le composant .cours-fiche existant (deja stylé pour le PDF
cache). On surcharge --fiche-color via [data-fiche="N"] pour donner
a chaque fiche son rythme chromatique sans toucher au PDF. */
.cours-fiches-display {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin: 20px 0 24px;
}
.cours-fiches-display .cours-fiche {
margin: 0;
transition: transform 0.2s, box-shadow 0.2s;
}
.cours-fiches-display .cours-fiche:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
@media (max-width: 768px) {
.cours-fiches-display { grid-template-columns: 1fr; gap: 14px; }
}
/* Accent couleur par fiche : on derive --fiche-color, qui est ensuite
consomme par le header et les puces. Le module 1 utilise sky (couleur
du cours comprendre), les suivants varient pour creer du rythme. */
.cours-fiche[data-fiche="1"] { --fiche-color: var(--sky); }
.cours-fiche[data-fiche="2"] { --fiche-color: var(--caramel); }
.cours-fiche[data-fiche="3"] { --fiche-color: var(--yellow); }
.cours-fiche[data-fiche="4"] { --fiche-color: var(--green); }
.cours-fiche[data-fiche] .cours-fiche-header {
background: var(--fiche-color);
position: relative;
}
.cours-fiche[data-fiche] .cours-fiche-header::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: linear-gradient(90deg,
var(--sky) 0% 20%,
var(--blue) 20% 40%,
var(--caramel) 40% 60%,
var(--yellow) 60% 80%,
var(--red) 80% 100%);
}
.cours-fiche[data-fiche] .cours-fiche-body li::before {
background: var(--fiche-color);
}
/* Variante de la derniere section (titre + p) en bas de fiche : c'est
le "reflexe" actionnable, on le sort visuellement avec un fond doux
et un border-top colore plutot que la simple separation par dividers. */
.cours-fiches-display .cours-fiche-body > h4:last-of-type {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--border-dark);
color: var(--fiche-color, var(--text-primary));
font-size: 11px;
letter-spacing: 0.06em;
}
.cours-fiches-display .cours-fiche-body > p:last-child {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
line-height: 1.6;
}
/* Variantes de hierarchie pour les blocs cours-rest.
--primary : acte principal de la page (certificat sur resume.php).
--secondary : h2 redescendu en type-lede, moins proeminent.
Par defaut, un cours-rest nu garde son style existant. */
.cours-rest--primary {
border-left: 3px solid var(--green);
background: rgba(88, 214, 141, 0.04);
padding: var(--space-lg);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.cours-rest--primary h2 {
color: var(--text-primary);
}
.cours-rest--secondary h2 {
font: var(--type-lede);
color: var(--text-primary);
letter-spacing: -0.005em;
}
/* Politique de confidentialite : sous-sections h3 (2.1, 2.2, etc.)
Sans cette regle, le browser default cassait la grille typo. */
.legal-page h3 {
font: 600 0.9375rem/1.4 var(--font-display);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-primary);
margin: 20px 0 8px;
}
/* Note de pied dans les resume.php (lien rendu.be, teach, etc.) */
.cours-footer-note {
font-size: 13px;
line-height: 1.7;
color: var(--text-tertiary);
margin-top: 32px;
}
.cours-footer-note a {
color: var(--text-secondary);
text-decoration: underline;
text-underline-offset: 2px;
}
.cours-footer-note a:hover { color: var(--text-primary); }
/* CTA "module suivant" dans resume.php. Remplace le style inline sur
. */
.cours-next-cta {
margin-top: var(--space-lg);
}
/* ==================================================================== */
/* 02-buttons.css */
/* ==================================================================== */
/* =================================================================
CONCLUSION - BRAVO BANNER
================================================================= */
/* =================================================================
CONCLUSION - CERT HERO
================================================================= */
.cours-cert-hero {
margin-bottom: 40px; padding: 40px;
border: 1px solid var(--border-dark);
border-radius: 8px; background: var(--bg-card);
display: none;
}
.cours-cert-hero.visible { display: block; }
.cours-cert-hero-inner {
display: grid; grid-template-columns: 260px 1fr;
gap: 40px; align-items: center;
}
/* Certificate preview (CSS miniature) */
/* =================================================================
APERCU CERTIFICAT (miroir du PDF genere par cours.js)
================================================================= */
.cours-cert-preview { aspect-ratio: 297 / 210; width: 100%; max-width: 260px; }
.cours-cert-preview-frame {
width: 100%; height: 100%;
background: #FFFFFF;
border: 1px solid var(--border-dark, #E5E7EB);
border-radius: 4px;
padding: 12px 14px 8px;
display: flex; flex-direction: column;
align-items: center;
justify-content: flex-start;
position: relative;
gap: 2px;
}
.cours-cert-preview-eyebrow {
display: flex; align-items: center; gap: 5px;
font-family: var(--font-display);
font-size: 5.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary, #424A53);
margin-bottom: 4px;
}
.cours-cert-preview-squares {
display: inline-flex; gap: 1.5px; align-items: center;
}
.cours-cert-preview-squares > span {
width: 5px; height: 5px; border-radius: 1px;
display: inline-block;
}
.cours-cert-preview-heading {
font-family: var(--font-display);
font-size: 6px; font-weight: 700;
color: var(--text-secondary, #424A53);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 3px;
}
.cours-cert-preview-name {
font-family: var(--font-display);
font-size: 15px; font-weight: 800;
color: var(--text-primary, #1F2328);
letter-spacing: -0.02em;
line-height: 1;
margin-top: 5px;
transition: color 0.2s; min-height: 1em;
text-align: center;
}
.cours-cert-preview-completed {
font-family: var(--font-body);
font-size: 6px;
color: var(--text-secondary, #6D7580);
margin-top: 3px;
}
.cours-cert-preview-course {
display: inline-block;
background: var(--sky);
color: #fff;
font-family: var(--font-display);
font-size: 8px; font-weight: 700;
padding: 2px 6px;
border-radius: 2px;
margin-top: 3px;
}
.cours-cert-preview-wordmark {
display: flex; align-items: center; gap: 4px;
font-family: var(--font-display);
font-size: 7.5px; font-weight: 700;
color: var(--text-primary, #1F2328);
text-transform: uppercase;
letter-spacing: 0.02em;
margin-top: auto;
padding-top: 4px;
}
.cours-cert-preview-wordmark .cours-cert-preview-squares > span {
width: 3.5px; height: 3.5px; border-radius: 0.7px;
}
.cours-cert-preview-credit {
font-family: var(--font-body);
font-size: 5px;
color: var(--text-tertiary, #B0B0A8);
margin-top: 1px;
}
.cours-cert-title {
font-family: var(--font-display); font-size: 20px;
font-weight: 700; color: var(--text-primary);
margin-bottom: 8px; text-transform: uppercase;
}
.cours-cert-desc {
font-size: 14px; line-height: 1.7;
color: var(--text-secondary); margin-bottom: 20px;
}
.cours-cert-actions {
display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px;
}
/* =================================================================
CONCLUSION - FICHES SECTION
================================================================= */
.cours-fiches-section {
margin-bottom: 40px; padding: 24px 32px;
border: 1px solid var(--border-dark);
border-radius: 8px; background: var(--bg-card);
}
.cours-fiches-desc {
font-size: 14px; color: var(--text-secondary); line-height: 1.6;
}
/* =================================================================
CONCLUSION - CTA NEXT LEVEL
================================================================= */
.cours-next-level {
margin: 40px 0; padding: 28px;
background: linear-gradient(135deg, rgba(96,191,245,0.08), rgba(46,99,164,0.08));
border: 1px solid rgba(96,191,245,0.25); border-radius: 8px;
}
.cours-next-level-label {
font-family: var(--font-display); font-size: 10px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 0.12em; color: var(--sky); margin-bottom: 8px;
}
.cours-next-level-title {
font-family: var(--font-display); font-size: 18px;
font-weight: 700; color: var(--text-primary);
text-transform: uppercase; margin-bottom: 8px;
}
.cours-next-level-desc {
font-size: 15px; line-height: 1.7;
color: var(--text-secondary); margin-bottom: 20px;
}
/* Sidebar cert teaser */
.cours-sidebar-cert-teaser {
margin-top: 12px; padding: 10px 12px;
font-size: 11px; color: var(--text-tertiary);
border-top: 1px solid var(--border-dark);
display: flex; align-items: center; gap: 6px;
}
.cours-sidebar-cert-icon { font-size: 14px; color: var(--sky); }
/* =================================================================
CONCLUSION + FICHE RÉFLEXE
================================================================= */
.cours-fiche {
background: var(--bg-card); border: 1px solid var(--border-dark);
border-radius: 8px; overflow: hidden; margin: 24px 0;
}
.cours-fiche-header {
padding: 20px 24px;
background: var(--course-color, var(--sky));
display: flex; align-items: center; justify-content: space-between;
}
.cours-fiche-title {
font-family: var(--font-display); font-size: 16px;
font-weight: 700; color: var(--black); text-transform: uppercase;
letter-spacing: 0.02em;
}
.cours-fiche-badge {
font-family: var(--font-display); font-size: 9px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; padding: 3px 10px;
background: rgba(0,0,0,0.15); color: var(--black);
border-radius: 2px;
}
.cours-fiche-body {
padding: 24px;
}
.cours-fiche-body h4 {
font-family: var(--font-display); font-size: 13px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--text-primary);
margin: 0 0 10px;
}
.cours-fiche-body h4:not(:first-child) {
margin-top: 20px; padding-top: 16px;
border-top: 1px solid var(--border-dark);
}
.cours-fiche-body p {
font-size: 13px; line-height: 1.7; color: var(--text-secondary);
margin: 0 0 6px;
}
.cours-fiche-body ul {
margin: 0 0 8px; padding-left: 0;
}
.cours-fiche-body li {
font-size: 13px; line-height: 1.7; color: var(--text-secondary);
margin-bottom: 4px; padding-left: 16px; position: relative;
}
.cours-fiche-body li::before {
content: ''; position: absolute; left: 0; top: 9px;
width: 5px; height: 5px; border-radius: 50%;
background: var(--course-color, var(--sky));
}
/* Print styles for fiche export - DA Rendu.be (offwhite, bordure noire, coloré) */
@media print {
/* Hide everything except fiches */
body { background: white !important; }
body > *:not(.cours-layout) { display: none !important; }
.cours-sidebar { display: none !important; }
.cours-step, .cours-step-nav, .cours-progress-bar,
.cours-quiz-result { display: none !important; }
/* Fiches visible and styled DA Rendu.be */
.cours-fiche {
display: block !important; visibility: visible !important;
background: #F8F6F1 !important; color: #000 !important;
border: 2px solid #000 !important; border-radius: 0 !important;
margin: 0 0 20px !important; overflow: hidden;
page-break-inside: avoid; break-inside: avoid;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cours-fiche * { visibility: visible !important; }
/* Color bar at top of each fiche (DA Rendu signature) */
.cours-fiche::before {
content: '';
display: block; height: 6px;
background: linear-gradient(90deg,
#60BFF5 0% 20%, #2E63A4 20% 40%, #AF6528 40% 60%,
#FFCE00 60% 80%, #D70000 80% 100%) !important;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* Header with course color */
.cours-fiche-header {
-webkit-print-color-adjust: exact; print-color-adjust: exact;
border-bottom: 2px solid #000 !important;
}
.cours-fiche-title {
color: #000 !important; font-size: 14px !important;
}
.cours-fiche-badge {
background: rgba(0,0,0,0.1) !important; color: #000 !important;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* Body */
.cours-fiche-body {
background: #F8F6F1 !important; padding: 20px 24px !important;
}
.cours-fiche-body h4 {
color: #000 !important; font-size: 12px !important;
}
.cours-fiche-body h4:not(:first-child) {
border-top: 1px solid #ddd !important;
}
.cours-fiche-body p, .cours-fiche-body li {
color: #333 !important; font-size: 12px !important;
}
.cours-fiche-body li::before {
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* Download button becomes a Rendu footer in print */
/* Hide the original button text */
/* Page layout */
}
/* =================================================================
CERTIFICAT
================================================================= */
.cours-certificat-input {
flex: 1; min-width: 200px; padding: 12px 16px;
background: var(--bg); color: var(--text-primary);
border: 1px solid var(--border-dark); border-radius: 4px;
font-family: var(--font-body); font-size: 14px;
outline: none; transition: border-color 0.2s;
}
.cours-certificat-input::placeholder { color: var(--text-tertiary); }
.cours-certificat-input:focus { border-color: var(--sky); }
/* ==================================================================== */
/* 13-pages-utilitaires.css */
/* ==================================================================== */
/* === Auto-restored attribute selectors (anti-faux-positif PurgeCSS) === */
.cours-fiche[data-fiche="1"] { --fiche-color: var(--sky); }
.cours-fiche[data-fiche="2"] { --fiche-color: var(--caramel); }
.cours-fiche[data-fiche="3"] { --fiche-color: var(--yellow); }
.cours-fiche[data-fiche="4"] { --fiche-color: var(--green); }
.cours-fiche[data-fiche] .cours-fiche-header {
background: var(--fiche-color);
position: relative;
}
.cours-fiche[data-fiche] .cours-fiche-header::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: linear-gradient(90deg,
var(--sky) 0% 20%,
var(--blue) 20% 40%,
var(--caramel) 40% 60%,
var(--yellow) 60% 80%,
var(--red) 80% 100%);
}
.cours-fiche[data-fiche] .cours-fiche-body li::before {
background: var(--fiche-color);
}
/* ==================================================================== */
/* 13-pages-utilitaires.css */
/* ==================================================================== */
/* =================================================================
ACCES (coupon page)
================================================================= */
.acces-section {
min-height: 100vh; display: flex; align-items: center;
justify-content: center; padding: 100px 40px 60px;
}
.acces-box {
max-width: 480px; width: 100%; text-align: center;
}
.acces-icon {
font-size: 48px; margin-bottom: 24px; opacity: 0.6;
}
.acces-box h1 {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 40px); font-weight: 700;
color: var(--text-primary); text-transform: uppercase;
letter-spacing: -0.01em; margin-bottom: 12px;
}
.acces-sub {
font-size: 15px; color: var(--text-secondary);
line-height: 1.7; margin-bottom: 36px;
}
.acces-input-wrap {
display: flex; gap: 0; border-radius: 6px; overflow: hidden;
border: 1px solid var(--border-dark);
}
.acces-input {
flex: 1; padding: 16px 20px;
background: var(--bg-card); color: var(--text-primary);
border: none; font-family: var(--font-mono); font-size: 18px;
letter-spacing: 0.08em; text-transform: uppercase;
outline: none;
}
.acces-input::placeholder {
color: var(--text-tertiary); text-transform: uppercase;
}
.acces-input:focus {
background: var(--bg-elevated);
}
.acces-submit {
padding: 16px 28px; background: var(--sky); color: var(--black);
border: none; font-family: var(--font-display); font-size: 14px;
font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
cursor: pointer; transition: background 0.2s; flex-shrink: 0;
}
.acces-submit:hover { background: var(--white); }
.acces-feedback {
margin-top: 16px; font-family: var(--font-display);
font-size: 13px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.04em; min-height: 20px;
}
.acces-feedback.success { color: var(--green); }
.acces-feedback.error { color: var(--red); }
.acces-help {
margin-top: 48px; padding-top: 24px;
border-top: 1px solid var(--border-dark);
}
.acces-help p {
font-size: 13px; color: var(--text-tertiary); line-height: 1.7;
}
.acces-help a {
color: var(--sky); text-decoration: underline;
text-underline-offset: 2px;
}
.acces-help a:hover { color: var(--white); }
/* =================================================================
COOKIE BANNER (RGPD : refus aussi visible que l'acceptation)
================================================================= */
.cookie-banner {
position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 200;
max-width: 880px; margin: 0 auto;
background: var(--bg-elevated);
border: 1px solid var(--sky);
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,0.35);
padding: 18px 22px;
display: none;
}
.cookie-banner.visible { display: block; }
.cookie-inner {
display: grid;
grid-template-columns: 64px 1fr auto;
align-items: center;
gap: 20px;
}
.cookie-illus {
width: 64px; height: 64px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.cookie-illus svg { width: 100%; height: 100%; display: block; }
.cookie-body { min-width: 0; }
.cookie-title {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-primary);
margin: 0 0 4px 0;
}
.cookie-text {
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
max-width: none;
}
.cookie-text a { color: var(--sky); text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border-dark);
padding: 9px 18px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
transition: border-color 0.2s, color 0.2s, background 0.2s;
border-radius: 6px;
min-width: 96px;
}
.cookie-btn:hover { border-color: var(--sky); color: var(--sky); }
.cookie-btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
@media (max-width: 720px) {
.cookie-banner {
bottom: 0; left: 0; right: 0;
border-radius: 12px 12px 0 0;
padding: 14px 16px 16px;
max-width: none; margin: 0;
}
.cookie-inner {
grid-template-columns: 48px 1fr;
grid-template-areas:
"illus body"
"actions actions";
gap: 12px 14px;
}
.cookie-illus { grid-area: illus; width: 48px; height: 48px; }
.cookie-body { grid-area: body; }
.cookie-actions { grid-area: actions; gap: 10px; }
.cookie-actions .cookie-btn { flex: 1; min-width: 0; }
}
/* =================================================================
LEGAL PAGES
================================================================= */
.legal-page { padding: 120px 40px 80px; max-width: 760px; margin: 0 auto; }
.legal-page h1 {
font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px);
font-weight: 700; text-transform: uppercase; line-height: 1.1;
color: var(--text-primary); margin-bottom: 16px;
}
.legal-page h2 {
font-family: var(--font-display); font-size: 18px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-primary);
margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--border-dark);
}
.legal-page h2:first-of-type { border-top: none; padding-top: 0; }
.legal-page p { font-size: 14px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 12px; }
.legal-page a { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }
.legal-page a:hover { color: var(--white); }
.legal-page strong { color: var(--text-primary); }
.legal-page ul { margin: 8px 0 12px; padding-left: 0; }
.legal-page li {
font-size: 14px; line-height: 1.8; color: var(--text-secondary);
margin-bottom: 4px; padding-left: 20px; position: relative;
}
.legal-page li::before {
content: ''; position: absolute; left: 0; top: 11px;
width: 6px; height: 6px; border-radius: 50%; background: var(--sky);
}
/* ==================================================================== */
/* 14-responsive-global.css */
/* ==================================================================== */
/* ==================================================================== */
/* 14-responsive-global.css */
/* ==================================================================== */
/* =================================================================
COURS RESPONSIVE
================================================================= */
@media (max-width: 900px) {
.cours-sidebar {
position: static; height: auto;
border-right: none; border-bottom: 1px solid var(--border-dark);
padding: 20px;
}
.cours-sidebar-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
.cours-sidebar-link { padding: 8px 10px; font-size: 12px; }
.cours-sidebar-sections { display: none; }
.cours-certificat-input { min-width: auto; width: 100%; }
}
/* =================================================================
RESPONSIVE
================================================================= */
@media (max-width: 900px) {
.nav-links { display: none; }
.nav-burger { display: flex; }
.nav-links.open {
display: flex; flex-direction: column;
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: var(--bg);
padding: 80px 40px 40px;
gap: 20px; z-index: 105;
}
.nav-links.open .nav-link { font-size: 22px; color: var(--text-primary); }
.nav-links.open .btn-p { text-align: center; font-size: 14px; padding: 16px 32px; }
.approche-grid { grid-template-columns: 1fr; padding-inline: 40px; }
.hero h1 { font-size: clamp(32px, 8vw, 50px); }
.footer-inner { justify-content: center; text-align: center; }
.form-row { grid-template-columns: 1fr; }
.contact-inner { padding: 28px 20px; }
.cookie-inner { flex-direction: column; text-align: center; }
.cookie-actions { justify-content: center; }
.parcours-step { border-right: none; border-bottom: 1px solid var(--border-dark); }
.parcours-step:last-child { border-bottom: none; }
}
@media (max-width: 520px) {
.container { padding-inline: 20px; }
.nav-inner { padding: 12px 20px; }
.hero { padding: 90px 20px 40px; }
.contact-section { padding: 60px 20px 60px; }
.approche-grid { padding-inline: 20px; }
}
/* =================================================================
LANDING REFONTE - RESPONSIVE
================================================================= */
/* Tablet : 1024px et moins */
@media (max-width: 1024px) {
.walkthrough-panel-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.walkthrough-bundle {
position: static;
}
.bundle-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Mobile M : 768px et moins */
@media (max-width: 768px) {
.bundles { padding: 60px 0; }
.walkthrough-personas {
grid-template-columns: 1fr;
gap: 10px;
}
.walkthrough-panel {
padding: 24px 20px;
}
.walkthrough-step {
grid-template-columns: auto 1fr;
gap: 12px;
padding: 12px 14px;
}
.walkthrough-step-num {
font-size: 18px;
min-width: 28px;
}
/* Arbre : label en tete, noeuds en colonne */
.bundle-grid {
grid-template-columns: 1fr;
}
.bundle-card {
padding: 24px 20px;
}
}
/* Mobile S : 512px et moins */
@media (max-width: 512px) {
.bundles { padding: 48px 0; }
.walkthrough-panel { padding: 20px 16px; }
.walkthrough-bundle { padding: 20px 18px; }
.walkthrough-bundle-price-new { font-size: 24px; }
.bundle-card-price-new { font-size: 24px; }
.bundle-card-flag { top: 10px; right: 10px; }
}
/* Reduced motion : desactive les transitions walkthrough */
@media (prefers-reduced-motion: reduce) {
.walkthrough-panel,
.walkthrough-persona,
.bundle-card {
transition: none;
}
.walkthrough-panel {
opacity: 1;
transform: none;
}
}
/* ============ PAGE PARCOURS (SEO) ============ */
.parcours-page { padding-top: 80px; }
.parcours-hero {
padding: 60px 0 40px;
border-bottom: 1px solid var(--border-dark);
}
.parcours-breadcrumb {
font-size: 13px;
color: var(--text-tertiary);
margin-bottom: 24px;
}
.parcours-breadcrumb a {
color: var(--text-tertiary);
text-decoration: none;
}
.parcours-breadcrumb a:hover { color: var(--blue); }
.parcours-hero h1 {
font-family: var(--font-display);
font-size: clamp(34px, 4.8vw, 58px);
font-weight: 800;
line-height: 1.05;
margin: 0 0 24px;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: -0.025em;
}
.parcours-hero h1 .hl {
display: inline-block;
background: var(--blue);
color: #fff;
padding: 0.02em 0.2em 0.08em;
border-radius: 4px;
line-height: 1;
}
.parcours-hero .lead {
font-size: 19px;
line-height: 1.55;
color: var(--text-secondary);
max-width: 720px;
margin: 0 0 32px;
}
.parcours-toc {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.parcours-toc li { margin: 0; }
.parcours-toc a {
display: inline-flex;
align-items: center;
padding: 8px 14px;
background: var(--bg-card);
border: 1px solid var(--border-dark);
border-radius: 999px;
font-size: 13px;
color: var(--text-secondary);
text-decoration: none;
transition: border-color 0.15s, color 0.15s;
}
.parcours-toc a:hover {
border-color: var(--blue);
color: var(--blue);
}
.parcours-section {
padding: 72px 0;
border-bottom: 1px solid var(--border-dark);
}
.parcours-section-head {
max-width: 780px;
margin: 0 auto 48px;
text-align: center;
}
.parcours-section-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 12px;
}
.parcours-section-head h2 {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
margin: 0 0 12px;
color: var(--text-primary);
}
.parcours-section-sub {
font-size: 17px;
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
}
.parcours-section-body {
max-width: 780px;
margin: 0 auto;
}
.parcours-section-body > p {
font-size: 16px;
line-height: 1.7;
color: var(--text-secondary);
margin: 0 0 16px;
}
.parcours-section-kicker {
font-weight: 600;
color: var(--text-primary);
margin: 28px 0 16px !important;
font-size: 15px !important;
}
.parcours-sequence {
list-style: none;
padding: 0;
margin: 0 0 40px;
display: flex;
flex-direction: column;
gap: 16px;
}
.parcours-step {
display: grid;
grid-template-columns: 56px 1fr;
gap: 18px;
padding: 20px;
background: var(--bg-card);
border: 1px solid var(--border-dark);
border-radius: 12px;
border-left: 4px solid var(--blue);
}
.parcours-step[data-color="sky"] { border-left-color: var(--sky); }
.parcours-step[data-color="yellow"] { border-left-color: var(--yellow); }
.parcours-step[data-color="green"] { border-left-color: var(--green); }
.parcours-step[data-color="blue"] { border-left-color: var(--blue); }
.parcours-step[data-color="caramel"] { border-left-color: var(--caramel); }
.parcours-step[data-color="red"] { border-left-color: var(--red); }
.parcours-step-num {
font-family: var(--font-display);
font-size: 30px;
font-weight: 800;
color: var(--text-tertiary);
align-self: start;
}
.parcours-step-body h3 {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
margin: 0 0 4px;
}
.parcours-step-body h3 a {
color: var(--text-primary);
text-decoration: none;
}
.parcours-step-body h3 a:hover { color: var(--blue); }
.parcours-step-meta {
display: inline-block;
font-size: 12px;
color: var(--text-tertiary);
margin-bottom: 8px;
}
.parcours-step-body p {
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
}
.parcours-bundle {
background: var(--bg-card);
border: 2px solid var(--caramel);
border-radius: 16px;
padding: 28px;
margin-top: 32px;
}
.parcours-bundle-tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--caramel);
margin-bottom: 8px;
}
.parcours-bundle h3 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
margin: 0 0 12px;
color: var(--text-primary);
}
.parcours-bundle p {
font-size: 15px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 20px;
}
.parcours-bundle-ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.parcours-faq {
padding: 72px 0;
background: var(--bg-alt, #fafafa);
}
.parcours-faq h2 {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
margin: 8px 0 32px;
color: var(--text-primary);
}
.parcours-faq-item {
background: var(--bg-card);
border: 1px solid var(--border-dark);
border-radius: 10px;
padding: 18px 22px;
margin-bottom: 10px;
}
.parcours-faq-item summary {
font-weight: 600;
font-size: 16px;
color: var(--text-primary);
cursor: pointer;
list-style: none;
position: relative;
padding-right: 28px;
}
.parcours-faq-item summary::-webkit-details-marker { display: none; }
.parcours-faq-item summary::after {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
font-weight: 400;
color: var(--text-tertiary);
transition: transform 0.15s;
}
.parcours-faq-item[open] summary::after {
content: "−";
}
.parcours-faq-item p {
margin: 14px 0 0;
font-size: 15px;
line-height: 1.6;
color: var(--text-secondary);
}
.parcours-faq-item a { color: var(--blue); }
.parcours-cta {
padding: 80px 0;
text-align: center;
}
.parcours-cta h2 {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
margin: 0 0 12px;
}
.parcours-cta p {
font-size: 17px;
color: var(--text-secondary);
max-width: 560px;
margin: 0 auto 28px;
line-height: 1.55;
}
.parcours-cta-buttons {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.parcours-section { padding: 48px 0; }
.parcours-hero { padding: 40px 0 28px; }
.parcours-step { grid-template-columns: 40px 1fr; gap: 12px; padding: 16px; }
.parcours-step-num { font-size: 22px; }
.parcours-bundle { padding: 20px; }
}
/* ============ CATALOGUE SIMPLE (grille 4x2) ============ */
.catalogue-simple {
padding: 72px 0;
border-top: 1px solid var(--border-dark);
background: var(--bg-card);
}
.catalogue-simple-intro { margin-bottom: 40px; text-align: center; }
.catalogue-simple-intro h2 {
font-family: var(--font-display);
font-size: clamp(32px, 4.5vw, 52px);
font-weight: 800;
line-height: 1.05;
margin: 8px 0 12px;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: -0.02em;
}
.catalogue-simple-intro .sub {
font-size: 16px;
color: var(--text-secondary);
max-width: 540px;
margin: 0 auto;
}
.catalogue-simple-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
max-width: 1100px;
margin: 0 auto;
}
.catalogue-card {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 16px 12px;
background: var(--bg);
border: 1px solid var(--border-dark);
border-radius: 8px;
color: var(--text-primary);
text-decoration: none;
transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
min-height: 200px;
}
.catalogue-card:hover {
transform: translateY(-2px);
border-color: var(--text-tertiary);
box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.catalogue-card:focus-visible {
outline: 3px solid var(--sky);
outline-offset: 2px;
}
.catalogue-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
.catalogue-card-num {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--text-tertiary);
}
.catalogue-card-tag {
font-family: var(--font-display);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-secondary);
background: var(--bg-card);
border: 1px solid var(--border-dark);
padding: 3px 7px;
border-radius: 3px;
white-space: nowrap;
}
.catalogue-card--free .catalogue-card-tag {
color: #2D8B57;
border-color: rgba(88,214,141,0.35);
background: rgba(88,214,141,0.1);
}
.catalogue-card--premium .catalogue-card-tag {
color: var(--caramel);
border-color: rgba(175,101,40,0.35);
background: rgba(175,101,40,0.1);
}
.catalogue-card-title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.catalogue-card-pitch {
font-size: 13px;
line-height: 1.4;
color: var(--text-secondary);
margin-top: 2px;
}
.catalogue-card-meta {
font-size: 11px;
line-height: 1.4;
color: var(--text-tertiary);
letter-spacing: 0.02em;
margin-top: 2px;
}
.catalogue-card-foot {
margin-top: auto;
padding-top: 10px;
border-top: 1px solid var(--border-dark);
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.catalogue-card-price {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
}
.catalogue-card--free .catalogue-card-price { color: #2D8B57; }
.catalogue-card--premium .catalogue-card-price { color: var(--caramel); }
.catalogue-card-cta {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--blue);
white-space: nowrap;
transition: transform 0.15s;
}
.catalogue-card:hover .catalogue-card-cta { transform: translateX(3px); }
.catalogue-card-badge {
position: absolute;
top: -8px;
right: 14px;
background: var(--caramel);
color: #fff;
font-family: var(--font-display);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 3px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.catalogue-card--featured { border-color: var(--caramel); }
.catalogue-card--featured:not(.catalogue-card--premium) .catalogue-card-badge {
background: var(--blue);
}
.catalogue-simple-legend {
margin-top: 32px;
font-size: 13px;
color: var(--text-tertiary);
text-align: center;
line-height: 1.6;
}
.catalogue-simple-legend a {
color: var(--blue);
text-decoration: none;
font-weight: 600;
}
.catalogue-simple-legend a:hover { text-decoration: underline; }
@media (max-width: 1024px) {
.catalogue-simple-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
.catalogue-simple { padding: 56px 0; }
.catalogue-simple-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.catalogue-card { min-height: 180px; padding: 14px 14px 12px; }
.catalogue-card-title { font-size: 14px; }
.catalogue-card-pitch { font-size: 12px; }
}
@media (max-width: 480px) {
.catalogue-simple-grid { grid-template-columns: 1fr; }
}
/* ============ Bundle card note (Team aligné avec les autres) ============ */
.bundle-card-note {
font-size: 11px;
line-height: 1.4;
color: var(--text-tertiary);
margin: 0;
font-style: italic;
}
/* ============ COURS LANDING (rework 2026-04) ============ */
/* Refonte des 8 pages cours//index.html. Grille 2 colonnes
desktop avec carte sticky a droite. Empilement simple sous 1024px. */
.cours-landing-page { background: var(--bg); color: var(--text-primary); }
.cours-landing-hero {
padding: 64px 0 48px;
border-bottom: 1px solid var(--border);
}
.cours-landing-hero .container { max-width: 1200px; }
.cours-landing-breadcrumb {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 20px;
}
.cours-landing-breadcrumb a {
color: var(--text-tertiary);
text-decoration: none;
transition: color 0.2s;
}
.cours-landing-breadcrumb a:hover { color: var(--text-primary); }
.cours-landing-breadcrumb span[aria-hidden] { margin: 0 8px; }
.cours-landing-hero-grid {
display: grid;
grid-template-columns: minmax(0, 65%) minmax(0, 35%);
gap: 48px;
align-items: start;
}
.cours-landing-hero-left { min-width: 0; }
.cours-landing-tagchip {
display: inline-block;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--bg-card);
color: var(--text-secondary);
border-radius: var(--radius-full);
margin-bottom: 20px;
}
.cours-landing-h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(36px, 5vw, 60px);
line-height: 1.05;
text-transform: uppercase;
color: var(--text-primary);
margin: 0 0 16px;
}
.cours-landing-h1 .hl {
background: var(--course-accent, var(--sky));
color: var(--black);
padding: 0 0.2em;
}
.cours-landing-pitch {
font-size: 18px;
line-height: 1.5;
color: var(--text-secondary);
margin: 0 0 24px;
max-width: 600px;
}
.cours-landing-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
.cours-landing-meta-pill {
display: inline-flex;
align-items: center;
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-full);
}
.cours-landing-price {
display: flex;
align-items: baseline;
gap: 12px;
margin: 24px 0 28px;
}
.cours-landing-price-main {
font-family: var(--font-display);
font-weight: 700;
font-size: 40px;
line-height: 1;
color: var(--text-primary);
}
.cours-landing-price-sub {
font-size: 13px;
color: var(--text-tertiary);
}
.cours-landing-hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.cours-landing-hero-ctas .btn-p {
background: var(--course-accent, var(--sky));
border-color: var(--course-accent, var(--sky));
}
.cours-landing-hero-ctas .btn-p:hover { box-shadow: 4px 4px 0 var(--course-accent, var(--sky)); }
/* Carte sticky */
.cours-landing-sticky {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 16px;
}
.cours-landing-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
}
.cours-landing-card-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-tertiary);
margin: 0 0 14px;
}
.cours-landing-card-modules {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.cours-landing-card-modules li {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 13px;
line-height: 1.4;
color: var(--text-secondary);
}
.cours-landing-card-modules li .num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-tertiary);
min-width: 22px;
}
.cours-landing-card-modules li.locked .lock {
margin-left: auto;
font-size: 11px;
color: var(--text-tertiary);
}
.cours-landing-card-modules li.preview .lock {
margin-left: auto;
font-size: 11px;
color: var(--course-accent, var(--sky));
font-weight: 600;
}
.cours-landing-card-bundle {
border-top: 3px solid var(--caramel);
}
.cours-landing-card-bundle-hook {
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
margin: 0 0 12px;
}
.cours-landing-card-bundle-price {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 12px;
}
.cours-landing-card-bundle-price .new {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
}
.cours-landing-card-bundle-price .save {
font-size: 11px;
font-weight: 700;
color: var(--green);
letter-spacing: 0.05em;
}
.cours-landing-card-bundle .btn-s { width: 100%; justify-content: center; padding: 10px 16px; font-size: 12px; }
.cours-landing-card-reassurance ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.cours-landing-card-reassurance li {
font-size: 12px;
color: var(--text-secondary);
padding-left: 18px;
position: relative;
}
.cours-landing-card-reassurance li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 8px;
height: 8px;
background: var(--green);
border-radius: 50%;
}
/* Sections narratives */
.cours-landing-section {
padding: 56px 0;
border-bottom: 1px solid var(--border);
}
.cours-landing-section .container { max-width: 920px; }
.cours-landing-section h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 28px;
line-height: 1.2;
color: var(--text-primary);
text-transform: uppercase;
margin: 0 0 20px;
}
.cours-landing-section p {
font-size: 16px;
line-height: 1.7;
color: var(--text-secondary);
margin: 0 0 14px;
max-width: 760px;
}
.cours-landing-section ul.cours-landing-bullets {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.cours-landing-section ul.cours-landing-bullets li {
font-size: 15px;
line-height: 1.6;
color: var(--text-secondary);
padding-left: 24px;
position: relative;
}
.cours-landing-section ul.cours-landing-bullets li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 10px;
height: 2px;
background: var(--course-accent, var(--sky));
}
.cours-landing-programme {
list-style: none;
margin: 24px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--border);
}
.cours-landing-programme li {
display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--border);
align-items: baseline;
}
.cours-landing-programme-num {
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-tertiary);
}
.cours-landing-programme-title {
font-weight: 600;
font-size: 15px;
color: var(--text-primary);
margin: 0 0 4px;
}
.cours-landing-programme-desc {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
/* Aperçu module 1 */
.cours-landing-preview {
background: var(--bg-card);
}
.cours-landing-preview-frame {
max-width: 820px;
margin: 0 auto;
padding: 24px;
border-left: 3px solid var(--course-accent, var(--sky));
background: var(--bg);
border-radius: var(--radius-md);
}
.cours-landing-preview-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--course-accent, var(--sky));
margin-bottom: 10px;
}
.cours-landing-preview p {
font-size: 16px;
line-height: 1.75;
color: var(--text-reading, var(--text-secondary));
margin: 0 0 14px;
}
.cours-landing-preview-cta {
margin-top: 24px;
text-align: center;
}
/* Bloc Ada */
.cours-landing-ada {
background: var(--bg-card);
border-left: 3px solid var(--yellow);
padding: 24px;
border-radius: var(--radius-md);
max-width: 760px;
}
.cours-landing-ada h3 {
font-family: var(--font-display);
font-size: 18px;
text-transform: uppercase;
margin: 0 0 10px;
color: var(--text-primary);
}
.cours-landing-ada p {
font-size: 14px;
line-height: 1.65;
margin: 0 0 8px;
}
/* FAQ */
.cours-landing-faq .container { max-width: 820px; }
.cours-landing-faq-list { margin-top: 24px; }
.cours-landing-faq-item {
border-top: 1px solid var(--border);
padding: 16px 0;
}
.cours-landing-faq-item:last-child { border-bottom: 1px solid var(--border); }
.cours-landing-faq-item summary {
cursor: pointer;
font-weight: 600;
font-size: 15px;
color: var(--text-primary);
list-style: none;
position: relative;
padding-right: 32px;
}
.cours-landing-faq-item summary::-webkit-details-marker { display: none; }
.cours-landing-faq-item summary::after {
content: "+";
position: absolute;
right: 0;
top: -2px;
font-size: 22px;
line-height: 1;
color: var(--text-tertiary);
transition: transform 0.2s;
}
.cours-landing-faq-item[open] summary::after { content: "\2212"; }
.cours-landing-faq-item p {
margin: 12px 0 0;
font-size: 14px;
line-height: 1.65;
color: var(--text-secondary);
}
/* Cross-sell bundle */
.cours-landing-crosssell { background: var(--bg-card); }
.cours-landing-crosssell .container { max-width: 1100px; }
.cours-landing-crosssell-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 24px;
}
/* Autres cours */
.cours-landing-related .container { max-width: 1100px; }
.cours-landing-related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin-top: 24px;
}
/* Responsive */
@media (max-width: 1024px) {
.cours-landing-hero-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.cours-landing-sticky { position: static; }
}
@media (max-width: 768px) {
.cours-landing-hero { padding: 40px 0 32px; }
.cours-landing-section { padding: 40px 0; }
.cours-landing-h1 { font-size: clamp(30px, 8vw, 44px); }
.cours-landing-price-main { font-size: 32px; }
.cours-landing-hero-ctas { flex-direction: column; align-items: stretch; }
.cours-landing-hero-ctas .btn-p,
.cours-landing-hero-ctas .btn-s { width: 100%; justify-content: center; text-align: center; }
}
/* ============ LANDING ADA SECTION ============ */
@keyframes ada-blink {
0%, 92%, 100% { transform: scaleY(1); }
94%, 97% { transform: scaleY(0.08); }
}
/* =================================================================
MOBILE HARDENING (audit 2026-04-19, ne touche PAS au desktop)
================================================================= */
/* --- Garde globale : jamais de scroll horizontal par l'inattendu. --- */
@media (max-width: 640px) {
html, body { overflow-x: hidden; }
/* ----- NAV : logo compact, burger accessible ----- */
.nav-inner { padding: 10px 14px; }
.nav-logo { font-size: 16px; gap: 4px; flex-shrink: 1; min-width: 0; }
.nav-logo .badge { font-size: 9px; padding: 2px 6px; white-space: nowrap; }
/* ----- HERO (landing) ----- */
.hero { padding: 80px 16px 32px; }
.hero h1 { font-size: 1.9rem; line-height: 1.15; letter-spacing: -0.015em; }
.hero p { font-size: 1rem; line-height: 1.5; }
/* CTAs hero : full-width stackes pour coherence visuelle. */
.hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
.hero-ctas .btn-p,
.hero-ctas .btn-s {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
font-size: 12px;
padding: 14px 20px;
white-space: normal;
}
/* ----- H2 de sections landing ----- */
.catalogue-simple h2,
.bundles h2 { font-size: 1.5rem; line-height: 1.25; }
/* ----- Cartes catalogue et bundles : padding mobile plus serre ----- */
.catalogue-card { padding: 12px 12px 10px; }
.catalogue-card-title { font-size: 14px; }
.bundle-card { padding: 20px 16px; }
/* ----- Ada landing section : empile propre ----- */
/* ----- FOOTER : wrap, compact, centre ----- */
.footer-inner {
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
padding: 0 16px;
}
.footer-logo { justify-content: center; flex-wrap: wrap; gap: 6px; }
.footer-links {
flex-wrap: wrap;
justify-content: center;
gap: 10px 16px;
width: 100%;
max-width: 100%;
}
.footer-link { font-size: 11px; }
/* ----- COURS V2 : titre, padding, typo ----- */
.cours { padding: 16px 14px 40px; }
main.cours { padding: 16px 14px 40px; }
.cours-title { font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.015em; }
.cours-meta { font-size: 0.82rem; }
.cours-head { margin-bottom: 20px; }
.cours-eyebrow { flex-wrap: wrap; gap: 8px; }
/* Prose cours : lisible sans trop serrer */
.cours p,
.cours li { font-size: 1rem; line-height: 1.6; }
.cours-rest-heading { font-size: 1.25rem; }
.cours-rest h2 { font-size: 1.25rem; }
/* Citations et blocs code inline : pas de debordement */
.cours pre,
.cours-cite {
overflow-x: auto;
font-size: 12px;
padding: 10px 12px;
}
/* ----- WIDGET ALAN/ADA IN-BLOC (.cours-try-ada) ----- */
.cours-try-ada { padding: 14px 12px; margin: 16px 0; }
.cours-try-ada-brief { padding: 12px 14px; }
.cours-try-ada-brief-heading { font-size: 0.95rem; }
.cours-try-ada-input { min-height: 100px; font-size: 15px; padding: 10px 12px; }
.cours-try-ada-response { max-height: 220px; }
.cours-try-ada-bar { gap: 8px; }
.cours-try-ada-hint { display: none; } /* trop bavard sur petit ecran */
.cours-try-ada-actions { gap: 10px; }
.cours-try-ada-submit { padding: 9px 14px; font-size: 12px; }
.cours-try-ada-msg p { font-size: 13px; padding: 10px 12px; }
/* ----- TUTEUR ADA PANEL FLOTTANT : plein ecran mobile ----- */
.tuteur-panel,
.tuteur-panel[data-size="large"] {
width: 100vw;
height: 100vh;
min-height: 100vh;
bottom: 0;
right: 0;
left: 0;
top: 0;
border-radius: 0;
border: none;
max-width: none;
}
.tuteur-fab { bottom: 16px; right: 16px; }
/* ----- FEEDBACK GRACE FAB : bas-gauche compact ----- */
.feedback-fab { left: 14px; bottom: 56px; padding: 10px; }
/* ----- MODALE FEEDBACK GRACE ----- */
.feedback-modal-overlay { padding: 14px; align-items: flex-end; }
.feedback-modal { max-width: 100%; padding: 18px 18px 16px; border-radius: var(--radius-md); }
.feedback-modal-title { font-size: 1.05rem; }
.feedback-modal-lead { font-size: 0.85rem; }
.feedback-modal-input { min-height: 100px; font-size: 15px; }
/* ----- SECTIONS landing : moins de padding vertical ----- */
section.bundles,
section.catalogue-simple { padding: 48px 0; }
/* ----- Encarts tuteur (Alan/Marvin) ----- */
.cours-tuteur-encart { gap: 10px; padding: 12px 14px; }
.cours-tuteur-encart-heading { font-size: 0.98rem; }
.cours-tuteur-encart-body p,
.cours-tuteur-encart-body ul { font-size: 0.92rem; }
}
/* === Auto-restored attribute selectors (anti-faux-positif PurgeCSS) === */
.parcours-step[data-color="sky"] { border-left-color: var(--sky); }
.parcours-step[data-color="yellow"] { border-left-color: var(--yellow); }
.parcours-step[data-color="green"] { border-left-color: var(--green); }
.parcours-step[data-color="blue"] { border-left-color: var(--blue); }
.parcours-step[data-color="caramel"] { border-left-color: var(--caramel); }
.parcours-step[data-color="red"] { border-left-color: var(--red); }
@media (max-width: 640px) {
.tuteur-panel[data-size="large"] {
width: 100vw;
height: 100vh;
min-height: 100vh;
bottom: 0;
right: 0;
left: 0;
top: 0;
border-radius: 0;
border: none;
max-width: none;
}
}
/* ==================================================================== */
/* 15-onboarding-alpha.css */
/* ==================================================================== */
/* =================================================================
ONBOARDING ALPHA GRACE
Variante Grace du composant Adaprompt.spotlight() (3 scenes home)
+ animation de reveil FAB + popup mode "juste prix" Grace
+ offset CSS pour ancres #alpha (scroll-padding)
================================================================= */
/* ----- 1. Variante Grace de la popup spotlight ----- */
/* Garde fond --bg + bordure neutre (decisions design : reskin complet refuse,
3 touches jaunes ciblees : avatar deja jaune, lisere gauche, bouton OK). */
.tuteur-spotlight-tip--grace {
border-left: 4px solid var(--yellow);
}
/* Variante centree (fallback mobile + scenes onboarding) :
centree via CSS pur (inset + transform) pour ne pas se faire ecraser par
l'animation tip-in qui pose son propre transform. Largeur compacte par defaut
pour rester en ligne avec les scenes onboarding existantes. */
.tuteur-spotlight-tip--centered {
max-width: min(360px, calc(100vw - 32px));
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: 520px) {
.tuteur-spotlight-tip--centered {
max-width: calc(100vw - 24px);
}
}
/* Variante changelog : modale plus large pour accueillir 3-5 bullets aerees.
Activee via la classe additionnelle --changelog (passee par feedback-thanks.js
au-dessus de --grace + --centered). N'affecte ni l'onboarding ni les autres
scenes spotlight. */
.tuteur-spotlight-tip--changelog {
max-width: min(520px, calc(100vw - 32px));
width: min(520px, calc(100vw - 32px));
padding: 22px 24px;
max-height: calc(100vh - 32px);
overflow-y: auto;
}
@media (max-width: 520px) {
.tuteur-spotlight-tip--changelog {
max-width: calc(100vw - 24px);
width: calc(100vw - 24px);
padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
}
}
.tuteur-spotlight-tip--changelog ul {
margin: 6px 0 16px !important;
padding-left: 24px !important;
font-size: 14px;
line-height: 1.55;
list-style: disc outside !important;
}
.tuteur-spotlight-tip--changelog ul li {
margin-bottom: 10px;
padding-left: 4px;
display: list-item !important;
list-style: disc outside !important;
}
.tuteur-spotlight-tip--changelog ul li::marker {
color: var(--yellow);
font-size: 1.1em;
}
.tuteur-spotlight-tip--changelog ul li:last-child {
margin-bottom: 0;
}
.tuteur-spotlight-tip--changelog a {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 2px;
}
.tuteur-spotlight-tip--changelog a:hover,
.tuteur-spotlight-tip--changelog a:focus-visible {
color: var(--caramel);
}
.tuteur-spotlight-tip-meta {
margin: 0 0 10px;
font-size: 12px;
color: var(--text-tertiary);
letter-spacing: 0.02em;
}
/* Actions row (changelog + futurs spotlights a double CTA).
Secondaire a gauche en link-style, primaire a droite en CTA plein. Le
margin-right:auto pousse le primaire a droite quand un secondaire existe. */
.tuteur-spotlight-tip-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-top: 4px;
}
.tuteur-spotlight-tip-secondary {
background: transparent;
border: none;
color: var(--text-secondary);
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
padding: 8px 6px;
margin-right: auto;
}
.tuteur-spotlight-tip-secondary:hover,
.tuteur-spotlight-tip-secondary:focus-visible {
color: var(--text-primary);
outline: none;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 520px) {
.tuteur-spotlight-tip-actions {
flex-direction: column-reverse;
align-items: stretch;
gap: 6px;
}
.tuteur-spotlight-tip-actions .tuteur-spotlight-tip-ok {
width: 100%;
padding: 12px 14px;
}
.tuteur-spotlight-tip-secondary {
width: 100%;
margin-right: 0;
text-align: center;
padding: 10px 6px;
}
}
.tuteur-spotlight-tip--grace .tuteur-spotlight-tip-name {
color: #B8860B;
}
[data-theme="dark"] .tuteur-spotlight-tip--grace .tuteur-spotlight-tip-name {
color: var(--yellow);
}
.tuteur-spotlight-tip--grace .tuteur-spotlight-tip-ok {
background: var(--yellow);
color: var(--black);
}
.tuteur-spotlight-tip--grace .tuteur-spotlight-tip-ok:hover {
opacity: 0.9;
}
/* Avatar Grace deja jaune (currentColor) -> rien a forcer ici. */
/* ----- 2. Reveil FAB Grace (animation fin de cours) ----- */
@keyframes grace-wakeup {
0% { transform: translateX(0) scale(1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
10% { transform: translateX(-2px) scale(1.04); }
20% { transform: translateX(2px) scale(1.04); }
30% { transform: translateX(0) scale(1.04); box-shadow: 0 0 0 6px rgba(255, 206, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.18); }
100% { transform: translateX(0) scale(1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
}
.feedback-fab.is-waking {
animation: grace-wakeup 2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
.feedback-fab.is-waking { animation: none; }
}
/* ----- 3. Popup mode "juste prix" ----- */
.feedback-modal-overlay--price .feedback-modal--price {
border-left: 4px solid var(--yellow);
}
.feedback-modal-price-label {
display: block;
margin: 0 0 8px;
font-size: 0.95rem;
font-weight: 500;
color: var(--text-primary);
line-height: 1.4;
}
.feedback-modal-price-input {
width: 100%;
box-sizing: border-box;
background: var(--bg);
color: var(--text-primary);
border: 1px solid var(--border-dark);
border-radius: var(--radius-sm);
padding: 12px 14px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.55;
outline: none;
transition: border-color 0.15s;
-moz-appearance: textfield;
}
.feedback-modal-price-input:focus { border-color: var(--yellow); }
.feedback-modal-price-input:disabled {
background: var(--bg-elevated);
color: var(--text-tertiary);
cursor: not-allowed;
}
.feedback-modal-price-input::-webkit-outer-spin-button,
.feedback-modal-price-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.feedback-modal-price-rgpd {
margin: 12px 0 14px;
font-size: 12px;
line-height: 1.5;
color: var(--text-tertiary);
}
.feedback-modal-price-rgpd a {
color: var(--text-secondary);
text-decoration: underline;
}
.feedback-modal-price-rgpd a:hover { color: var(--text-primary); }
/* Lien skip discret : aligne a droite avec le CTA, contraste WCAG AA. */
.feedback-modal-skip {
margin-right: auto;
font-size: 12px;
font-weight: 400;
color: var(--text-tertiary);
text-decoration: underline dotted;
text-underline-offset: 3px;
cursor: pointer;
padding: 6px 4px;
transition: color 0.15s, text-decoration-style 0.15s;
}
.feedback-modal-skip:hover,
.feedback-modal-skip:focus-visible {
color: var(--text-secondary);
text-decoration-style: solid;
outline: none;
}
/* ----- 4. Offset ancre pour la section #alpha de la politique ----- */
/* Le nav fixe mesure ~64-80px : sans scroll-margin, l'ancre est masquee
sous le nav. Cible large (toute ancre dans la legal-page) pour tenir
meme si la numerotation evolue. */
.legal-page :target {
scroll-margin-top: 96px;
}
:root {
scroll-padding-top: 96px;
}
/* ----- Cache tip dans la modale Grace (ajout 2026-04-29) -----
Encart discret en bas de la modale, sous la liste de nouveautes.
Rappelle le hard-refresh aux alphas pour eviter le cache navigateur
sur les nouveaux deploiements. */
.tuteur-spotlight-tip--changelog .tuteur-spotlight-tip-cache {
margin: 16px 0 0;
padding: 10px 14px;
background: var(--bg-elevated);
border: 1px dashed var(--border-dark);
border-radius: 6px;
font-size: 12px;
line-height: 1.5;
color: var(--text-tertiary);
}
/* === Auto-restored attribute selectors (anti-faux-positif PurgeCSS) === */
[data-theme="dark"] .tuteur-spotlight-tip--grace .tuteur-spotlight-tip-name {
color: var(--yellow);
}
/* ==================================================================== */
/* 16-ressources.css */
/* ==================================================================== */
/* =================================================================
RESSOURCES — index + page détail
Skills, prompts, outillage IA distribués gratuitement.
Tokens uniquement, aucun hard-code de couleur.
================================================================= */
/* =================================================================
PAGE INDEX
================================================================= */
.ressources-page {
padding: 64px 0 96px;
}
/* ----- Hero compact ----- */
.ressources-hero {
max-width: 1100px;
margin: 0 auto;
padding: 24px 40px 48px;
}
.ressources-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-secondary);
margin-bottom: 16px;
}
.ressources-hero-eyebrow .bar {
width: 32px;
height: 3px;
border-radius: 2px;
background: var(--sky);
}
.ressources-hero h1 {
font-family: var(--font-display);
font-size: clamp(32px, 5vw, 56px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0 0 16px;
}
.ressources-hero h1 .hl { color: var(--sky); }
.ressources-hero-lede {
font-size: 17px;
line-height: 1.6;
color: var(--text-secondary);
max-width: 60ch;
margin: 0;
}
/* ----- Illustration partagée (legacy : Cromagnon uniquement) -----
L'illustration est noire sur fond transparent. En light theme, naturel.
En dark theme, invert pour la rendre claire sur fond sombre. */
.ressource-illu {
width: 100%;
height: auto;
display: block;
user-select: none;
-webkit-user-drag: none;
}
[data-theme="dark"] .ressource-illu {
filter: invert(1);
}
/* ----- Illu Cromagnon : carte unique avec son identité visuelle ----- */
.ressource-card-illu {
position: absolute;
top: 24px;
right: 16px;
width: 72px;
height: 72px;
margin: 0;
pointer-events: none;
opacity: 0.55;
transition: opacity var(--speed) var(--ease);
display: flex;
align-items: center;
justify-content: center;
}
.ressource-card-illu .ressource-illu {
width: 100%;
height: 100%;
object-fit: contain;
}
.ressource-card:hover .ressource-card-illu {
opacity: 0.85;
}
.ressource-card-illu + .ressource-card-theme,
.ressource-card-illu ~ .ressource-card-title {
padding-right: 88px;
}
@media (max-width: 480px) {
.ressource-card-illu {
width: 60px;
height: 60px;
top: 20px;
right: 12px;
}
.ressource-card-illu + .ressource-card-theme,
.ressource-card-illu ~ .ressource-card-title {
padding-right: 72px;
}
}
@media (prefers-reduced-motion: reduce) {
.ressource-card-illu { transition: none; }
}
/* ----- Filtres pills (sticky) ----- */
.ressource-filters-wrap {
position: sticky;
top: 0;
z-index: 50;
background: var(--bg);
border-bottom: 1px solid var(--border-dark);
margin-bottom: 32px;
}
.ressource-filters {
max-width: 1100px;
margin: 0 auto;
padding: 16px 40px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.ressource-filters-label {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-tertiary);
margin-right: 4px;
}
.ressource-filter {
background: var(--bg-card);
color: var(--text-secondary);
border: 1px solid var(--border-dark);
border-radius: 999px;
padding: 10px 16px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: border-color 0.2s, color 0.2s, background 0.2s;
min-height: 44px;
}
.ressource-filter:hover {
border-color: var(--sky);
color: var(--text-primary);
}
.ressource-filter:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 2px;
}
.ressource-filter[aria-pressed="true"] {
background: var(--sky);
border-color: var(--sky);
color: var(--black);
}
/* Filtres colorés par catégorie quand pressés. Override le sky par défaut. */
.ressource-filter[data-filter="ecrire-reformuler"][aria-pressed="true"] { background: var(--sky); border-color: var(--sky); color: var(--black); }
.ressource-filter[data-filter="construire-prompt"][aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.ressource-filter[data-filter="travailler-document"][aria-pressed="true"] { background: var(--caramel); border-color: var(--caramel); color: var(--white); }
.ressource-filter[data-filter="metiers-secteurs"][aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.ressource-filter[data-filter="choisir-budgeter"][aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--white); }
.ressource-filter[data-filter="concevoir-former"][aria-pressed="true"] { background: var(--text-tertiary); border-color: var(--text-tertiary); color: var(--bg); }
.ressource-filter[data-filter="skills-outillage"][aria-pressed="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg); }
/* ----- Sections regroupées par catégorie (mode "Tous") ----- */
.ressource-grid-wrap {
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
.ressource-section-heading {
display: flex;
align-items: baseline;
gap: 16px;
margin: 48px 0 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-dark);
}
.ressource-section-heading:first-child {
margin-top: 0;
}
.ressource-section-heading-bar {
width: 32px;
height: 4px;
border-radius: 2px;
flex-shrink: 0;
align-self: center;
}
.ressource-section-heading h2 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-primary);
margin: 0;
flex: 1;
}
.ressource-section-heading-count {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--text-tertiary);
text-transform: uppercase;
}
/* Couleurs des barres de section par catégorie */
.ressource-section-heading[data-theme="ecrire-reformuler"] .ressource-section-heading-bar { background: var(--sky); }
.ressource-section-heading[data-theme="construire-prompt"] .ressource-section-heading-bar { background: var(--blue); }
.ressource-section-heading[data-theme="travailler-document"] .ressource-section-heading-bar { background: var(--caramel); }
.ressource-section-heading[data-theme="metiers-secteurs"] .ressource-section-heading-bar { background: var(--yellow); }
.ressource-section-heading[data-theme="choisir-budgeter"] .ressource-section-heading-bar { background: var(--red); }
.ressource-section-heading[data-theme="concevoir-former"] .ressource-section-heading-bar { background: var(--text-tertiary); }
.ressource-section-heading[data-theme="skills-outillage"] .ressource-section-heading-bar { background: var(--text-primary); }
.ressource-section-block + .ressource-section-block {
margin-top: 8px;
}
.ressource-section-block .ressource-grid {
margin-top: 0;
}
/* En mode filtre actif, les sections deviennent invisibles, grille plate */
.ressource-grid-wrap[data-mode="filtered"] .ressource-section-heading {
display: none;
}
.ressource-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
/* ----- Carte ressource ----- */
.ressource-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 28px 24px 20px;
background: var(--bg-card);
border: 1px solid var(--border-dark);
border-radius: 8px;
color: var(--text-primary);
text-decoration: none;
transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
position: relative;
min-height: 220px;
overflow: hidden;
isolation: isolate;
}
.ressource-card:hover {
transform: translateY(-2px);
border-color: var(--sky);
box-shadow: var(--elev-floating);
}
.ressource-card:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 2px;
}
/* ----- Bandeau couleur 8px en haut de carte ----- */
.ressource-card-bandeau {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8px;
background: var(--text-tertiary);
z-index: 1;
}
.ressource-card[data-theme="ecrire-reformuler"] .ressource-card-bandeau { background: var(--sky); }
.ressource-card[data-theme="construire-prompt"] .ressource-card-bandeau { background: var(--blue); }
.ressource-card[data-theme="travailler-document"] .ressource-card-bandeau { background: var(--caramel); }
.ressource-card[data-theme="metiers-secteurs"] .ressource-card-bandeau { background: var(--yellow); }
.ressource-card[data-theme="choisir-budgeter"] .ressource-card-bandeau { background: var(--red); }
.ressource-card[data-theme="concevoir-former"] .ressource-card-bandeau { background: var(--text-tertiary); }
.ressource-card[data-theme="skills-outillage"] .ressource-card-bandeau { background: var(--text-primary); }
/* ----- Lettre filigrane (placeholder picto futur) ----- */
.ressource-card-letter {
position: absolute;
top: 12px;
right: 12px;
font-family: var(--font-display);
font-size: 88px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: var(--text-primary);
opacity: 0.06;
pointer-events: none;
user-select: none;
z-index: 0;
}
[data-theme="dark"] .ressource-card-letter {
opacity: 0.08;
}
@media (max-width: 480px) {
.ressource-card-letter {
font-size: 64px;
top: 14px;
right: 10px;
}
}
/* Décale le contenu sous le bandeau */
.ressource-card > .ressource-card-theme,
.ressource-card > .ressource-card-title,
.ressource-card > .ressource-card-tagline,
.ressource-card > .ressource-card-tags,
.ressource-card > .ressource-card-foot {
position: relative;
z-index: 2;
}
.ressource-card > .ressource-card-theme {
margin-top: 4px;
}
/* Couleur du tag thème par catégorie */
.ressource-card-theme {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--sky);
}
.ressource-card[data-theme="ecrire-reformuler"] .ressource-card-theme { color: var(--sky); }
.ressource-card[data-theme="construire-prompt"] .ressource-card-theme { color: var(--blue); }
.ressource-card[data-theme="travailler-document"] .ressource-card-theme { color: var(--caramel); }
.ressource-card[data-theme="metiers-secteurs"] .ressource-card-theme { color: var(--yellow); }
.ressource-card[data-theme="choisir-budgeter"] .ressource-card-theme { color: var(--red); }
.ressource-card[data-theme="concevoir-former"] .ressource-card-theme { color: var(--text-tertiary); }
.ressource-card[data-theme="skills-outillage"] .ressource-card-theme { color: var(--text-primary); }
/* Light theme : remplacer yellow et sky par leurs équivalents accessibles */
[data-theme="light"] .ressource-card[data-theme="metiers-secteurs"] .ressource-card-theme { color: #8B6914; }
[data-theme="light"] .ressource-card[data-theme="ecrire-reformuler"] .ressource-card-theme { color: var(--blue); }
[data-theme="light"] .ressource-section-heading[data-theme="metiers-secteurs"] .ressource-section-heading-bar { background: #B8860B; }
[data-theme="light"] .ressource-card[data-theme="metiers-secteurs"] .ressource-card-bandeau { background: #B8860B; }
.ressource-card-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: -0.01em;
margin: 0;
}
.ressource-card-tagline {
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
flex: 1;
}
.ressource-card-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ressource-card-tag {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 3px 10px;
border: 1px solid var(--border-dark);
border-radius: 999px;
color: var(--text-tertiary);
}
.ressource-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 4px;
padding-top: 12px;
border-top: 1px solid var(--border-dark);
}
/* ----- Badge format en pied de carte ----- */
.ressource-card-format {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 5px 10px;
border: 1px solid var(--border-dark);
border-radius: 999px;
color: var(--text-secondary);
background: var(--bg-elevated);
white-space: nowrap;
}
.ressource-card-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sky);
}
.ressource-card[data-theme="ecrire-reformuler"] .ressource-card-cta { color: var(--sky); }
.ressource-card[data-theme="construire-prompt"] .ressource-card-cta { color: var(--blue); }
.ressource-card[data-theme="travailler-document"] .ressource-card-cta { color: var(--caramel); }
.ressource-card[data-theme="metiers-secteurs"] .ressource-card-cta { color: var(--yellow); }
.ressource-card[data-theme="choisir-budgeter"] .ressource-card-cta { color: var(--red); }
.ressource-card[data-theme="concevoir-former"] .ressource-card-cta { color: var(--text-secondary); }
.ressource-card[data-theme="skills-outillage"] .ressource-card-cta { color: var(--text-primary); }
[data-theme="light"] .ressource-card[data-theme="metiers-secteurs"] .ressource-card-cta { color: #8B6914; }
[data-theme="light"] .ressource-card[data-theme="ecrire-reformuler"] .ressource-card-cta { color: var(--blue); }
.ressource-card-cta .arrow {
display: inline-block;
transition: transform 0.2s var(--ease);
}
.ressource-card:hover .ressource-card-cta .arrow {
transform: translateX(4px);
}
/* État vide quand un filtre ne pickle rien */
.ressource-empty {
padding: 64px 24px;
text-align: center;
color: var(--text-tertiary);
font-size: 14px;
border: 1px dashed var(--border-dark);
border-radius: 8px;
display: none;
}
/* =================================================================
PAGE DÉTAIL RESSOURCE
================================================================= */
.ressource-detail {
padding: 40px 0 96px;
}
.ressource-detail .container {
max-width: 800px;
}
/* ----- Breadcrumb ----- */
.ressource-breadcrumb {
font-size: 12px;
color: var(--text-tertiary);
margin-bottom: 24px;
font-family: var(--font-display);
letter-spacing: 0.04em;
}
.ressource-breadcrumb a {
color: var(--text-secondary);
}
.ressource-breadcrumb a:hover { color: var(--sky); }
.ressource-breadcrumb [aria-current="page"] {
color: var(--text-primary);
}
/* ----- Hero ressource ----- */
.ressource-detail-hero {
margin-bottom: 64px;
padding-bottom: 40px;
border-bottom: 1px solid var(--border-dark);
display: grid;
grid-template-columns: 1fr 240px;
gap: 40px;
align-items: center;
}
.ressource-detail-hero-text {
min-width: 0;
}
.ressource-detail-hero-illu {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 720px) {
.ressource-detail-hero {
grid-template-columns: 1fr;
gap: 24px;
}
.ressource-detail-hero-illu {
order: -1;
max-width: 180px;
margin: 0 auto;
}
}
.ressource-detail-badge {
display: inline-block;
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--sky);
background: color-mix(in srgb, var(--sky) 12%, transparent);
padding: 6px 12px;
border-radius: 999px;
margin-bottom: 20px;
}
.ressource-detail-hero h1 {
font-family: var(--font-display);
font-size: clamp(36px, 6vw, 64px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0 0 16px;
}
.ressource-detail-tagline {
font-size: 19px;
line-height: 1.6;
color: var(--text-secondary);
max-width: 60ch;
margin: 0 0 28px;
}
.ressource-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
}
.ressource-detail-meta span {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 6px 12px;
border: 1px solid var(--border-dark);
border-radius: 999px;
color: var(--text-tertiary);
}
.ressource-detail-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* ----- Sections de contenu ----- */
.ressource-section {
margin-bottom: 56px;
}
.ressource-section h2 {
font-family: var(--font-display);
font-size: clamp(22px, 3vw, 30px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0 0 20px;
}
.ressource-section h3 {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-primary);
margin: 24px 0 12px;
}
.ressource-section p {
font-size: 16px;
line-height: 1.7;
color: var(--text-secondary);
margin: 0 0 16px;
}
.ressource-section ul {
list-style: none;
margin: 0 0 16px;
padding: 0;
}
.ressource-section ul li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
}
.ressource-section ul li::before {
content: "";
position: absolute;
left: 0;
top: 12px;
width: 8px;
height: 2px;
background: var(--sky);
}
.ressource-section blockquote {
border-left: 3px solid var(--sky);
padding: 12px 0 12px 20px;
margin: 16px 0;
color: var(--text-secondary);
font-style: normal;
font-size: 15px;
line-height: 1.7;
}
/* ----- Tabs niveaux ----- */
.ressource-niveaux-tabs {
display: flex;
gap: 4px;
padding: 4px;
background: var(--bg-card);
border: 1px solid var(--border-dark);
border-radius: 999px;
margin: 24px 0 24px;
width: fit-content;
max-width: 100%;
overflow-x: auto;
}
.ressource-niveaux-tab {
background: transparent;
border: none;
padding: 10px 20px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
cursor: pointer;
border-radius: 999px;
min-height: 44px;
white-space: nowrap;
transition: color 0.2s, background 0.2s;
}
.ressource-niveaux-tab:hover {
color: var(--text-primary);
}
.ressource-niveaux-tab:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 2px;
}
.ressource-niveaux-tab[aria-selected="true"] {
background: var(--sky);
color: var(--black);
}
.ressource-niveaux-stage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 16px;
}
.ressource-niveau-col {
background: var(--bg-card);
border: 1px solid var(--border-dark);
border-radius: 8px;
padding: 20px 24px;
}
.ressource-niveau-col h4 {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-tertiary);
margin: 0 0 12px;
}
.ressource-niveau-col blockquote {
border-left: 0;
padding: 0;
margin: 0;
font-size: 14px;
line-height: 1.65;
color: var(--text-secondary);
}
.ressource-niveau-stat {
margin-top: 12px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent-primary-muted);
display: inline-block;
padding: 4px 10px;
border: 1px solid var(--border-dark);
border-radius: 4px;
}
/* Panels JS : visibles seulement si JS actif */
.ressource-niveau-panel {
display: none;
}
.ressource-niveau-panel[data-active="true"] {
display: block;
}
/* Fallback no-JS : panels empilés */
.no-js .ressource-niveaux-tabs { display: none; }
.no-js .ressource-niveau-panel {
display: block;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-dark);
}
.no-js .ressource-niveau-panel:last-child {
border-bottom: 0;
}
/* ----- Code blocks ----- */
.ressource-code {
position: relative;
margin: 16px 0;
}
.ressource-code pre {
background: var(--bg-card);
border: 1px solid var(--border-dark);
border-radius: 8px;
padding: 20px 60px 20px 20px;
overflow-x: auto;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.65;
color: var(--text-primary);
margin: 0;
}
.ressource-code code {
font-family: var(--font-mono);
font-size: 13px;
}
.ressource-copy {
position: absolute;
top: 12px;
right: 12px;
background: var(--bg-elevated);
border: 1px solid var(--border-dark);
color: var(--text-secondary);
padding: 6px 12px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: 4px;
cursor: pointer;
min-height: 44px;
display: inline-flex;
align-items: center;
transition: border-color 0.2s, color 0.2s;
}
.ressource-copy:hover {
border-color: var(--sky);
color: var(--sky);
}
.ressource-copy:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 2px;
}
.ressource-copy[data-copied="true"] {
border-color: var(--accent-success);
color: var(--accent-success);
}
/* Toast clipboard (aria-live) */
.ressource-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--bg-elevated);
border: 1px solid var(--accent-success);
color: var(--text-primary);
padding: 12px 20px;
border-radius: 8px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
box-shadow: var(--elev-floating);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
z-index: 100;
}
.ressource-toast[data-visible="true"] {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ----- Footer ressource ----- */
.ressource-detail-foot {
margin-top: 64px;
padding-top: 32px;
border-top: 1px solid var(--border-dark);
display: grid;
gap: 12px;
font-size: 13px;
color: var(--text-tertiary);
line-height: 1.6;
}
.ressource-detail-foot strong {
color: var(--text-primary);
font-weight: 600;
}
.ressource-detail-foot a {
color: var(--text-secondary);
text-decoration: underline;
}
.ressource-detail-foot a:hover { color: var(--sky); }
/* =================================================================
RESPONSIVE
================================================================= */
@media (max-width: 720px) {
.ressources-hero { padding: 16px 24px 32px; }
.ressource-grid-wrap { padding: 0 24px; }
.ressource-filters { padding: 12px 24px; }
.ressource-detail .container { padding-inline: 24px; }
.ressource-niveaux-stage {
grid-template-columns: 1fr;
}
.ressource-detail-hero { margin-bottom: 40px; padding-bottom: 32px; }
.ressource-section { margin-bottom: 40px; }
.ressource-card { min-height: 0; }
}
/* =================================================================
REDUCED MOTION
================================================================= */
@media (prefers-reduced-motion: reduce) {
.ressource-card,
.ressource-card-cta .arrow,
.ressource-filter,
.ressource-niveaux-tab,
.ressource-toast,
.ressource-copy {
transition: none;
}
.ressource-card:hover {
transform: none;
}
.ressource-card:hover .ressource-card-cta .arrow {
transform: none;
}
}
/* =================================================================
BANDEAU RETOUR-COURS (injecté par js/ressource-page.js si ?from=...)
================================================================= */
.ressource-retour-bandeau {
margin: 0 0 24px;
}
.ressource-retour-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
text-decoration: none;
padding: 10px 14px;
border: 1px solid var(--border-dark);
border-radius: 999px;
background: var(--bg-card);
transition: border-color 0.2s, color 0.2s;
}
.ressource-retour-link:hover {
border-color: var(--sky);
color: var(--sky);
}
.ressource-retour-link:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 2px;
}
.ressource-retour-link em {
font-style: normal;
text-transform: none;
letter-spacing: 0;
font-weight: 700;
margin-left: 4px;
}
.ressource-retour-arrow {
font-size: 14px;
display: inline-block;
}
/* =================================================================
BLOC PROMPT — pages ressources individuelles
Texte du prompt en monospace, copiable, téléchargeable.
================================================================= */
.ressource-prompt-block {
position: relative;
margin: 24px 0 16px;
background: var(--bg-card);
border: 1px solid var(--border-dark);
border-left: 3px solid var(--sky);
border-radius: 8px;
padding: 24px 24px 24px 24px;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.7;
color: var(--text-primary);
white-space: pre-wrap;
word-break: normal;
overflow-x: auto;
}
.ressource-prompt-block code {
font-family: inherit;
font-size: inherit;
background: transparent;
padding: 0;
}
.ressource-prompt-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 24px;
}
.ressource-prompt-action {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
background: var(--bg-elevated);
border: 1px solid var(--border-dark);
border-radius: 6px;
padding: 10px 14px;
cursor: pointer;
min-height: 44px;
transition: border-color 0.2s, color 0.2s;
}
.ressource-prompt-action:hover {
border-color: var(--sky);
color: var(--sky);
}
.ressource-prompt-action:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 2px;
}
.ressource-prompt-action[data-copied="true"] {
border-color: var(--accent-success);
color: var(--accent-success);
}
/* Annotation visuelle d'une composante dans un prompt (héritage Comprendre) */
.ressource-prompt-block .composante {
background: color-mix(in srgb, var(--sky) 18%, transparent);
border-radius: 3px;
padding: 0 4px;
}
.ressource-prompt-annot {
margin: 8px 0 24px;
font-size: 13px;
line-height: 1.6;
color: var(--text-tertiary);
font-style: italic;
}
/* Tableau ressource (matrice mémoire, comparatif, etc.) */
.ressource-table-wrap {
overflow-x: auto;
margin: 24px 0;
border: 1px solid var(--border-dark);
border-radius: 8px;
}
.ressource-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
line-height: 1.5;
min-width: 640px;
}
.ressource-table th,
.ressource-table td {
text-align: left;
padding: 12px 14px;
border-bottom: 1px solid var(--border-dark);
vertical-align: top;
}
.ressource-table th {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
background: var(--bg-card);
}
.ressource-table tr:last-child td {
border-bottom: 0;
}
.ressource-table td strong {
color: var(--text-primary);
}
/* Mention "valable au" dans une page ressource */
.ressource-valable-au {
margin: 16px 0 0;
padding: 10px 14px;
border: 1px dashed var(--border-dark);
border-radius: 6px;
font-size: 12px;
color: var(--text-tertiary);
font-family: var(--font-display);
letter-spacing: 0.02em;
}
.ressource-valable-au strong {
color: var(--text-secondary);
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.1em;
margin-right: 6px;
}
/* =================================================================
BLOC "COURS ASSOCIÉ" — pied de page ressource (cross-sell)
Carte calée sur le style catalogue-card de la home, en version
pleine largeur. Conserve la mécanique pricing-mode.
================================================================= */
.ressource-cours-associe {
margin: 56px 0 0;
}
.ressource-cours-associe-card {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: 28px 28px 24px;
background: var(--bg);
border: 1px solid var(--border-dark);
border-left: 4px solid var(--sky);
border-radius: 8px;
text-align: left;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ressource-cours-associe-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0,0,0,0.07);
border-left-color: var(--blue);
}
.ressource-cours-associe-eyebrow {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-tertiary);
margin: 0;
}
.ressource-cours-associe-title {
font-family: var(--font-display);
font-size: clamp(22px, 3vw, 28px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0;
}
.ressource-cours-associe-module {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sky);
margin: 0;
}
.ressource-cours-associe-pitch {
font-size: 15px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
max-width: 60ch;
}
.ressource-cours-associe-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin: 4px 0 0;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text-secondary);
}
.ressource-cours-associe-meta [data-pricing-mention] {
color: var(--caramel);
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.08em;
}
.ressource-cours-associe-meta .pricing-placeholder {
padding: 4px 10px;
border-radius: 6px;
background: var(--bg-card);
border: 1px dashed var(--border-dark);
color: var(--text-tertiary);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: none;
font-weight: 500;
}
.ressource-cours-associe-meta .ressource-cours-associe-free {
color: #2D8B57;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.08em;
}
.ressource-cours-associe-cta {
align-self: flex-start;
margin-top: 8px;
}
@media (max-width: 720px) {
.ressource-cours-associe { margin-top: 40px; }
.ressource-cours-associe-card { padding: 22px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
.ressource-cours-associe-card { transition: none; }
.ressource-cours-associe-card:hover { transform: none; }
}
/* =================================================================
BANC D'ESSAI — encadré hook (5 pages composantes Comprendre)
Mode d'emploi visuel en 4 gestes, en haut de page.
================================================================= */
.ressource-banc-essai-hook {
margin: 0 0 40px;
padding: 24px 28px;
background: color-mix(in srgb, var(--yellow) 8%, var(--bg-card));
border: 1px solid var(--border-dark);
border-left: 4px solid var(--yellow);
border-radius: 8px;
}
.ressource-banc-essai-hook h2 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-primary);
margin: 0 0 14px;
}
.ressource-banc-essai-hook ol {
list-style: none;
margin: 0;
padding: 0;
counter-reset: banc-essai;
display: grid;
gap: 10px;
}
.ressource-banc-essai-hook ol li {
position: relative;
padding-left: 36px;
font-size: 15px;
line-height: 1.55;
color: var(--text-secondary);
counter-increment: banc-essai;
}
.ressource-banc-essai-hook ol li::before {
content: counter(banc-essai);
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
background: var(--yellow);
color: var(--text-primary);
border-radius: 50%;
}
@media (max-width: 720px) {
.ressource-banc-essai-hook { padding: 20px 18px; }
}
/* Ligne de prompt mise en évidence (composante isolée du banc d'essai).
Surcouche de .composante existante : plus visible, plus actionnable
parce que c'est cette ligne que l'apprenant supprime au geste 3. */
.ressource-prompt-block .composante-active {
display: inline;
background: color-mix(in srgb, var(--yellow) 28%, transparent);
border-left: 3px solid var(--yellow);
padding: 2px 8px 2px 6px;
margin-left: -9px;
border-radius: 0 3px 3px 0;
font-weight: 600;
}
/* =================================================================
PRINT
================================================================= */
@media print {
.ressource-filters-wrap,
.ressource-niveaux-tabs,
.ressource-copy,
.ressource-toast,
.ressource-detail-ctas,
.ressource-prompt-actions,
.ressource-retour-bandeau,
.ressource-cours-associe-cta,
nav.nav,
.cookie-banner,
.nav-burger {
display: none !important;
}
.ressource-niveau-panel {
display: block !important;
page-break-inside: avoid;
margin-bottom: 16px;
}
.ressource-card,
.ressource-cours-associe-card,
.ressource-banc-essai-hook {
border: 1px solid #999;
box-shadow: none;
page-break-inside: avoid;
}
.ressource-detail-hero h1 {
font-size: 28pt;
}
body {
background: #fff;
color: #000;
}
}
/* =================================================================
HERO RESSOURCE — adaptation quand pas d'illustration
Les pages individuelles (sauf cromagnon.html) n'ont plus de figure.
On bascule la grille en une colonne pour éviter le trou à droite.
================================================================= */
.ressource-detail-hero:not(:has(.ressource-detail-hero-illu)) {
grid-template-columns: 1fr;
}
/* =================================================================
ENCART RESSOURCES — bloc liens vers le hub Ressources
Posé en zone Retenir des modules cours (cours-rest), wrappé dans