/*qd modifie ce ficiher style, mettre la nouvelle version sur le serveur, PUIS changer ds 2020header.php le numero*/
/*permet d'avoir le titre du cours dedans*/
.cours-2026 {
display: inline-block;
background: #0b5394;
color: white;
padding: 8px 16px;
border-radius: 12px;
font-weight: bold;
font-size: 1.2em;
margin-bottom: 15px;
}
/*ameliore la partie intro et video a cliquer cf relatif en 5e*/
.video-box-2026 {
margin-top: 25px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #ff5722;
text-align: center;
margin-top: 30px;
margin-bottom: 15px;
}
.video-responsive-2026 {
position: relative;
width: 100%;
max-width: 800px;
/* limite sur grand écran */
margin: 0 auto;
aspect-ratio: 16 / 9;
/* 👈 encore plus simple et moderne */
}
.video-responsive-2026 iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.objectif-2026 {
font-weight: bold;
color: #1f4e79;
}
.en-valeur-bleu {
background: #e8f3ff;
padding: 10px;
border-left: 5px solid #1f4e79;
margin: 20px 0;
}
/* Hero styles pub du bandeau des bouquins */
.hero-pub {
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px;
background: #f5f5f5;
min-height: 400px;
}
.hero-content-pub {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.hero-text-pub {
flex: 1;
min-width: 220px;
}
.hero-text-main-pub {
font-size: 1.6rem;
margin-bottom: 10px;
color: #333;
font-weight: bold;
text-align: center;
}
.hero-text-sub-pub {
font-size: 1.2rem;
color: #555;
margin-bottom: 0;
text-align: center;
}
.hero-image-pub {
flex: 1;
min-width: 200px;
text-align: center;
}
.hero-image-pub img {
max-width: 200px;
/* limite la largeur */
width: 100%;
/* s’adapte à l’écran si plus petit */
height: auto;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: transform 0.3s;
}
.hero-image-pub img:hover {
transform: scale(1.35);
}
/* Responsive */
@media (max-width: 768px) {
.hero-content-pub {
flex-direction: column-reverse;
text-align: center;
}
.hero-text-main-pub {
font-size: 1.4rem;
}
.hero-text-sub-pub {
font-size: 1rem;
}
}
/**/
.equivalence {
text-align: center;
font-size: 1.6em;
margin: 8px 0;
}
.equation {
text-align: center;
font-size: 1.25em;
font-weight: bold;
margin-bottom: 20px;
}
.illustrations {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: nowrap;
margin-top: 20px;
}
.illustrations img {
width: 100%;
height: auto;
}
.illustrations figcaption {
margin-top: 8px;
font-size: 0.95em;
}
/*bouton pour passer à la page avant ou apres*/
/* Conteneur principal : flex avec retour à la ligne */
.contenu_boite_bandeau_2025 {
display: flex;
flex-wrap: wrap;
/* permet à nav_buttons_2025 de passer à la ligne */
justify-content: center;
/* centre les éléments horizontalement */
gap: 20px;
/* espace entre les boites */
}
/* Chaque boîte info */
.boite_bandeau_2025 {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(6px);
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.3);
font-size: 0.9rem;
font-weight: 500;
}
/* SVG dans les boîtes */
.svg_bandeau {
width: 24px;
height: 24px;
stroke: white;
fill: none;
stroke-width: 2;
}
/* Groupe des boutons */
.nav_buttons_2025 {
display: flex;
gap: 10px;
justify-content: center;
flex-basis: 100%;
/* force le retour à la ligne */
}
/* Style des boutons */
.btn_nav_2025 {
background: rgba(255, 255, 255, 0.15);
color: white;
border: 1px solid white;
padding: 6px 12px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
text-decoration: none;
}
.btn_nav_2025:hover {
background: rgba(255, 255, 255, 0.3);
}
/*texte intro sur nouvelles page*/
.intro {
background: linear-gradient(135deg, #f8fafc, #eef2ff);
border-left: 6px solid #4f46e5;
padding: 18px 22px;
border-radius: 10px;
font-size: clamp(1.05rem, 2.2vw, 1.25rem);
line-height: 1.6;
color: #1e293b;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
font-family: 'Segoe UI', Roboto, sans-serif;
margin-bottom: 40px;
text-align: justify;
}
/**/
.masquer {
display: none;
}
/**/
.boite_formule {
display: inline-block;
padding: 6px 9px;
background-color: white;
border: 1px solid #ccc;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
/* pour les miniature cours et exo*/
/* Conteneur des cartes */
.grid-cards-2025-neo {
display: flex;
flex-wrap: wrap;
/* permet de passer sur plusieurs lignes */
gap: 12px;
margin-top: 25px;
margin-bottom: 20px;
}
/* Carte individuelle */
.card-2025-neo {
flex: 1 1 200px;
/* largeur minimale 200px, s’étend si possible */
min-width: 200px;
/* garantit lisibilité sur petit écran */
background: #f5f5f5;
/* fond clair, harmonieux */
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
text-decoration: none;
color: inherit;
transition: 0.3s;
}
.card-2025-neo:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Miniature de la carte */
.thumb-2025-neo {
position: relative;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
/* empêche la duplication */
background-size: 100% 100%;
/* étire l’image en largeur ET hauteur */
background-position: center;
}
.thumb-2025-neo-bis {
position: relative;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
background-repeat: no-repeat;
/* empêche la duplication */
background-size: 100% 100%;
background-position: center;
}
/* Dégradés miniatures (tu peux les garder ou changer) */
.gradient-blue-neo {
background: linear-gradient(135deg, #3b82f6, #06b6d4);
}
.gradient-green-neo {
background: linear-gradient(135deg, #10b981, #059669);
}
/* Icone Play */
.play-icon-neo {
font-size: 32px;
color: white;
opacity: 0.9;
transition: 0.3s;
}
.card-2025-neo:hover .play-icon-neo {
transform: scale(1.1);
}
/* Durée en haut à droite */
.duration-2025-neo {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.7);
color: white;
font-size: 11px;
padding: 3px 6px;
border-radius: 4px;
}
/* Bandeau badges visibles en haut */
.badge-type-neo-strong {
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
font-size: 14px;
padding: 4px 0;
font-weight: bold;
color: white;
border-top-left-radius: 8px;
/* Arrondi seulement en haut */
border-top-right-radius: 8px;
border-bottom-left-radius: 0;
/* Pas d'arrondi en bas */
border-bottom-right-radius: 0;
}
/* Couleurs badges */
.cours-badge-neo {
/* background: #2A4FB0; (autre couleur possible*/
background: rgb(81, 156, 218);
}
/* Bleu foncé */
.exo-badge-neo {
/* background-color: #729179;*/
background: #065f46;
}
/* Vert foncé */
/* Contenu texte sous la miniature */
.card-body-2025-neo {
padding: 10px;
}
.card-body-2025-neo h3 {
font-size: 14px;
font-weight: bold;
color: #1e293b;
line-height: 1.2;
}
.card-2025-neo:hover h3 {
color: #3b82f6;
}
.thumb-img-neo {
width: 100%;
height: 130px;
object-fit: cover;
/* remplit le conteneur sans déformer l'image */
display: block;
}
.youtube-logo-neo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
/* <-- prend 50% de la largeur de la miniature */
display: flex;
justify-content: center;
align-items: center;
}
.youtube-logo-neo img {
width: 100%;
height: auto;
/* Pour garder les proportions */
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
transition: transform 0.3s ease;
}
.youtube-logo-neo:hover img {
transform: scale(1.85);
}
/*-------------------------*/
.prerequis_2025 {
display: block;
padding: 8px 14px;
margin: 12px 0;
font-family: Arial, sans-serif;
font-size: clamp(0.95rem, 0.9rem + 1.2vw, 1.25rem);
color: #1F3B73;
background-color: #EAF1FB;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.titre_index {
font-weight: bold;
font-size: clamp(30px, 7vw, 80px) !important;
color: black;
}
.sous_titre_index {
font-size: 18px;
color: #4b5563;
margin-bottom: 32px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
line-height: 1.75;
}
.sous_sous_titre_index {
display: block;
font-size: clamp(24px, 4vw, 30px);
font-weight: bold;
background: linear-gradient(to right, #2563eb, #06b6d4, #9333ea);
-webkit-background-clip: text;
color: transparent;
margin-bottom: 24px;
line-height: 1.25;
position: relative;
overflow: hidden;
cursor: default;
}
.sous2_sous_titre_index {
position: absolute;
inset: 0;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
transform: skewX(-12deg);
animation: shine 2s infinite;
}
.index_block_21 {
display: block;
font-size: 20px;
font-weight: 600;
color: #ea580c;
margin-bottom: 24px;
padding-left: 32px;
position: relative;
cursor: default;
}
.index_block_21a {
position: absolute;
left: -12px;
top: 0;
width: 12px;
height: 100%;
background: linear-gradient(to bottom, #fb923c, #ef4444, #ea580c);
border-radius: 9999px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
animation: bounce-slow 2s infinite;
}
.index_block_21b {
position: absolute;
left: -8px;
top: 0;
width: 8px;
height: 100%;
background: linear-gradient(to bottom, #fde047, #fdba74, #facc15);
border-radius: 9999px;
animation: pulse 2s infinite;
}
.index_block_21c {
position: absolute;
left: -4px;
top: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, #fff, #fef08a);
border-radius: 9999px;
animation: ping 2s infinite;
}
.index_bloc_3 {
display: block;
font-size: 18px;
font-style: italic;
font-weight: 500;
margin-bottom: 24px;
position: relative;
cursor: default;
}
.index_bloc_3a {
display: inline-block;
position: relative;
font-weight: 600;
color: #059669;
}
.index_bloc_3ab {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(52, 211, 153, 0.2), rgba(20, 184, 166, 0.2), rgba(6, 182, 212, 0.2));
filter: blur(4px);
animation: pulse 2s infinite;
}
.index_bloc_3c {
position: absolute;
bottom: -8px;
left: 0;
height: 4px;
background: linear-gradient(to right, #10b981, #06b6d4);
border-radius: 9999px;
box-shadow: 0 4px 8px rgba(6, 182, 212, 0.2);
}
.index_bloc_4 {
display: block;
font-size: 20px;
position: relative;
}
.index_bloc_4b {
font-weight: bold;
background: linear-gradient(90deg, #9333ea, #ec4899, #ef4444, #9333ea);
-webkit-background-clip: text;
color: transparent;
display: inline-block;
background-size: 300% 300%;
animation: rainbow 6s infinite;
}
.index_bloc_4c {
color: #374151;
font-weight: 500;
}
.index_grid3_blue,
.index_grid3_purple,
.index_grid3_green,
.index_grid3_red2,
.index_grid3_cyan,
.index_grid3_amber2,
.index_grid3_lime2,
.index_grid3_rose2 {
width: 3rem;
height: 3rem;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.index_grid3_blue {
background-color: #2563eb;
}
.index_grid3_purple {
background-color: #7c3aed;
}
.index_grid3_green {
background-color: #16a34a;
}
.index_grid3_red2 {
background-color: #dc2626;
}
.index_grid3_cyan {
background-color: #0d9488;
}
.index_grid3_amber2 {
background-color: #d97706;
}
.index_grid3_lime2 {
background-color: #65a30d;
}
.index_grid3_rose2 {
background-color: #e11d48;
}
.index_recherche {
width: 100%;
padding: 0.75rem 1rem 0.75rem 3rem;
border: 2px solid #3b82f6;
border-radius: 9999px;
font-size: 1rem;
outline: none;
transition: all 0.3s ease;
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}
.index_recherche_go {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
border: none;
color: white;
padding: 0.5rem 1rem;
border-radius: 9999px;
font-size: 0.9rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.index_grid4_titre {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: #111827;
}
.index_grid4_titreb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: #111827;
}
.body_2025 {
margin: 0;
font-family: Arial, sans-serif;
background: #f9fafb;
color: #333;
}
/*animation*/
@keyframes shine {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
@keyframes bounce-slow {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.hover-scale_2025:hover {
transform: scale(1.1);
transition: transform 0.5s;
}
.underline-expand_2025 {
width: 0;
transition: width 1s;
}
.group:hover .underline-expand_2025 {
width: 100%;
}
@keyframes ping {
0% {
transform: scale(1);
opacity: 1;
}
75%,
100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes rainbow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.demo-button_2025 {
background: linear-gradient(to right, #2563EB, #8B5CF6);
/* équivalent from-blue-600 to-purple-600 */
color: white;
padding: 1rem 2rem;
/* px-8 py-4 */
border-radius: 9999px;
/* rounded-full */
font-weight: 600;
/* font-semibold */
font-size: 1.125rem;
/* text-lg */
width: 100%;
border: none;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
@media (min-width: 640px) {
.demo-button_2025 {
width: auto;
/* sm:w-auto */
}
}
.demo-button_2025:hover {
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
/* hover:shadow-xl */
transform: scale(1.05);
/* hover:scale-105 */
}
.link-python_2025 {
display: inline-block;
white-space: nowrap;
/* nécessaire pour padding et transform */
background: linear-gradient(to right, #f59e0b, #f97316);
/* jaune → orange */
color: white;
padding: 1rem 2rem;
/* px-8 py-4 */
border-radius: 9999px;
/* arrondi complet */
font-weight: 600;
/* font-semibold */
text-decoration: none;
/* enlever le soulignement */
cursor: pointer;
transition: all 0.2s ease;
/* transition-all duration-200 */
}
.link-python_2025:hover {
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
/* shadow au hover */
transform: scale(1.05);
/* effet zoom au hover */
}
.badge_2025 {
display: inline-flex;
align-items: center;
gap: 8px;
/* espace entre l’icône et le texte */
background-color: #FFEDD5;
/* orange clair */
color: #9A3412;
/* orange foncé */
padding: 6px 12px;
border-radius: 9999px;
/* arrondi complet type "pill" */
font-weight: 500;
margin-bottom: 1rem;
font-family: sans-serif;
}
.badge_2025 .icon {
width: 16px;
height: 16px;
}
.title_2025 {
font-size: 1.875rem;
/* équiv. text-3xl */
font-weight: bold;
color: #111827;
/* gris foncé (text-gray-900) */
margin-bottom: 1.5rem;
text-align: center;
/* utile si tu veux un rendu centré */
font-family: sans-serif;
}
/* version "md:text-4xl" : agrandit le titre sur écrans ≥ 768px */
@media (min-width: 768px) {
.title_2025 {
font-size: 2.25rem;
/* text-4xl */
}
}
.subtitle_2025 {
font-size: 1.125rem;
/* équiv. text-lg */
color: #4B5563;
/* gris moyen (text-gray-600) */
max-width: 42rem;
/* max-w-2xl */
margin-left: auto;
margin-right: auto;
/* centre le paragraphe */
text-align: center;
font-family: sans-serif;
}
.feature-block {
text-align: center;
margin-bottom: 4rem;
/* équiv. mb-16 */
font-family: sans-serif;
}
.feature-title_2025 {
font-size: 1.875rem;
/* text-3xl */
font-weight: bold;
color: #111827;
/* gris très foncé */
margin-bottom: 1rem;
}
/* md:text-4xl → écran ≥ 768px */
@media (min-width: 768px) {
.feature-title_2025 {
font-size: 2.25rem;
/* text-4xl */
}
}
.feature-subtitle_2025 {
font-size: 1.125rem;
/* text-lg */
color: #4B5563;
/* gris moyen */
max-width: 42rem;
/* max-w-2xl */
margin-left: auto;
margin-right: auto;
}
.badge_2025-program {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: #FEF3C7;
/* jaune clair */
color: #92400E;
/* jaune foncé */
padding: 6px 12px;
border-radius: 9999px;
font-weight: 500;
margin-bottom: 1.5rem;
font-family: sans-serif;
}
.badge_2025-program .icon {
width: 16px;
height: 16px;
}
.module-title_2025 {
font-size: 1.875rem;
font-weight: bold;
color: #111827;
margin-bottom: 1.5rem;
font-family: sans-serif;
}
@media (min-width: 768px) {
.module-title_2025 {
font-size: 2.25rem;
}
}
.module-text_2025 {
font-size: 1.125rem;
color: #4B5563;
margin-bottom: 2rem;
line-height: 1.75;
font-family: sans-serif;
}
.module-list_2025 {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.module-list_2025 li {
display: flex;
align-items: center;
gap: 12px;
color: #374151;
font-family: sans-serif;
}
.icon-circle_2025 {
background-color: #D1FAE5;
/* vert clair */
padding: 4px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.check-icon_2025 {
width: 16px;
height: 16px;
color: #059669;
/* vert moyen */
}
.number_2025 {
font-weight: bold;
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
.number_2025 {
font-size: 1.875rem;
/* ~3xl */
}
}
.blue {
color: #2563eb;
}
.purple {
color: #7c3aed;
}
.red2 {
color: #dc2626;
}
.cyan {
color: #0d9488;
}
.orange {
color: #f97316;
}
.green2 {
color: #16a34a;
}
.label_2025 {
color: #4b5563;
}
/*tous les niveaux (en bas de page)*/
.tous_niveaux {
background-color: #111827;
padding: 3rem 1rem;
}
.sous_tous_niveaux {
max-width: 1200px;
margin: 0 auto;
}
.titre_tous_niveaux {
font-size: 1.75rem;
font-weight: bold;
color: #ffffff;
text-align: center;
margin: 0 0 2rem 0;
}
.sous_sous_tous_niveaux {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
}
.tous_niveaux_niveau {
background-color: #1f2937;
padding: 1.5rem;
border-radius: 1rem;
}
.sous_tous_niveaux_niveau {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.tous_niveaux_icone_college {
background-color: #2563eb;
padding: 0.5rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
}
.tous_niveaux_icone_lycee {
background-color: #7c3aed;
padding: 0.5rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
}
.tous_niveaux_icone_superieur {
background-color: #ea580c;
padding: 0.5rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
}
.tous_niveaux_titre {
font-size: 1.25rem;
font-weight: 600;
color: #ffffff;
margin: 0;
}
.li_tous_niveaux {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.ul_tous_niveaux {
list-style: none;
padding: 0;
margin: 0;
}
.niveau-link_2025 {
color: #d1d5db;
text-decoration: none;
position: relative;
transition: all 0.3s ease;
}
/* Soulignement animé */
.niveau-link_2025::after {
content: '';
position: absolute;
width: 0%;
height: 2px;
left: 0;
bottom: -2px;
background-color: #60a5fa;
transition: width 0.3s ease;
}
.niveau-link_2025:hover {
color: #60a5fa;
transform: scale(1.15);
/* légèrement agrandi */
}
.niveau-link_2025:hover::after {
width: 100%;
/* ligné complète */
}
.tous_niveaux_puce_college {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #60a5fa;
display: inline-block;
}
.tous_niveaux_classe {
color: #d1d5db;
text-decoration: none;
margin-left: 4px;
}
.tous_niveaux_puce_lycee {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #a78bfa;
display: inline-block;
}
.tous_niveaux_puce_superieur {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fb923c;
display: inline-block;
}
.apprentissage_2025 {
font-size: clamp(2rem, 5vw, 3.25rem);
font-weight: 700;
/* font-bold */
color: white;
/* text-white */
margin-bottom: 1.5rem;
/* mb-6 */
}
.rejoins_2025 {
font-size: clamp(1.25rem, 2vw, 1.6rem);
color: #bfdbfe;
/* text-blue-100 */
margin-bottom: 2rem;
/* mb-8 */
line-height: 1.625;
/* leading-relaxed */
}
.tous_niveaux_icone_manuels {
background-color: #10b981;
/* vert */
padding: 0.5rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
}
.tous_niveaux_puce_manuels {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #34d399;
/* vert clair */
display: inline-block;
}
.tous_niveaux_icone_presse {
background-color: #ef4444;
padding: 0.5rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
}
.tous_niveaux_puce_presse {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #f87171;
display: inline-block;
}
/* cta_2025 */
.cta_2025 {
background: linear-gradient(to right, #2563eb, #7c3aed);
color: #fff;
padding: 4rem 1rem;
}
.cta_2025 h3 {
margin-bottom: 1rem;
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Buttons */
.btn-primary {
background: linear-gradient(to right, #2563eb, #7c3aed);
color: #fff;
padding: .75rem 1.5rem;
border: none;
border-radius: 9999px;
font-weight: 600;
cursor: pointer;
}
.btn-secondary {
border: 1px solid #ccc;
background: #fff;
padding: .75rem 1.5rem;
border-radius: 9999px;
font-weight: 600;
cursor: pointer;
}
.btn-warning {
background: linear-gradient(to right, #f59e0b, #f97316);
color: #fff;
padding: .75rem 1.5rem;
border: none;
border-radius: 9999px;
font-weight: 600;
cursor: pointer;
}
.btn-light {
background: #fff;
color: #2563eb;
padding: .75rem 1.5rem;
border-radius: 9999px;
font-weight: 600;
}
.btn-outline {
border: 2px solid #fff;
background: transparent;
color: #fff;
padding: .75rem 1.5rem;
border-radius: 9999px;
font-weight: 600;
}
.btn-primary:hover,
.btn-warning:hover,
.btn-light:hover {
opacity: .9;
transform: scale(1.05);
}
.btn-outline:hover {
background: #fff;
color: #2563eb;
}
/* Hero */
.hero {
padding: clamp(4px, 1.5vw, 30px);
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
color: #666;
margin-bottom: 2rem;
}
.gradient-text {
background: linear-gradient(to right, #2563eb, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*fin de tous les niveaux*/
/*cours nouvelle présentation 2025*/
.card_2025 {
background: #fff;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform .2s;
text-align: left;
}
.card_2025:hover {
transform: translateY(-5px);
}
.card_2025.blue {
background: #e0f2fe;
/*background: #fbfdff;*/
}
.card_2025.purple {
background: #ede9fe;
}
.card_2025.green2 {
background: #dcfce7;
}
.card_2025.red2 {
background: linear-gradient(to bottom right, #fef2f2, #fee2e2);
}
.card_2025.rose2 {
background: linear-gradient(to bottom right, #ffe5ec, #ffb3c6);
}
.card_2025.cyan {
background: linear-gradient(to bottom right, #ecfeff, #cffafe);
}
.amber2 {
color: #d97706;
/* amber-600 */
}
.card_2025.amber2 {
background: linear-gradient(to bottom right, #fffbeb, #fef3c7);
/* amber-50 → amber-100 */
}
.lime2 {
color: #65a30d;
/* lime-600 */
}
.card_2025.lime2 {
background: linear-gradient(to bottom right, #f7fee7, #ecfccb);
}
/* Python */
.code-sample {
background: #111;
color: #0f0;
padding: 1rem;
border-radius: .75rem;
font-family: monospace;
font-size: .9rem;
overflow-x: auto;
}
.index_code_sample {
background-color: #1f2937;
border-radius: 16px;
padding: 24px;
color: #4ade80;
font-family: monospace;
font-size: 14px;
white-space: nowrap;
}
.check-list_2025 {
list-style: none;
padding: 0;
}
.check-list_2025 li::before {
content: "✔ ";
color: #16a34a;
}
.grid-container_2025 {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
}
.grid-container_2025 a {
text-decoration: none;
}
.grid-item_2025 {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
/* <<< padding plus grand */
background: #f9f9f9;
border-radius: 16px;
/* arrondi plus doux */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
/* ombre un peu plus visible */
min-width: 200px;
}
.grid-item_2025 .label_2025::after {
content: " →";
/* flèche après le texte */
font-weight: bold;
/* optionnel */
margin-left: 5px;
/* espace avant la flèche */
display: inline-block;
}
.grid-item_2025:hover .label_2025::after {
transform: translateX(3px);
/* léger mouvement au hover */
transition: transform 0.2s;
}
/* --- Responsive --- */
@media (max-width: 600px) {
.grid-item_2025 {
flex: 1 1 calc(50% - 1.5rem);
/* 2 colonnes */
}
}
@media (max-width: 400px) {
.grid-item_2025 {
flex-basis: 100%;
/* 1 colonne */
margin-left: 16px;
margin-right: 16px;
}
}
.grid-item_2025:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.9);
}
/* Tags */
.tag_2025 {
display: inline-block;
background: #fff;
color: #f97316;
padding: .25rem .75rem;
border-radius: 9999px;
font-size: .9rem;
margin-top: .5rem;
text-decoration: none;
transition: color 0.3s;
}
.tag_2025::after {
content: "→";
/* flèche */
display: inline-block;
margin-left: 5px;
transition: transform 0.3s;
}
.tag_2025:hover {
color: #c14400;
/* couleur au survol */
font-weight: 700;
}
.tag_2025:hover::after {
transform: translateX(5px);
/* la flèche se déplace vers la droite */
}
/* Tags */
.tag_2025b {
display: inline-block;
background: #fff;
color: #f97316;
border-radius: 9999px;
font-size: .9rem;
text-decoration: none;
transition: color 0.3s;
}
.tag_2025b::after {
content: "→";
/* flèche */
display: inline-block;
margin-left: 5px;
transition: transform 0.3s;
}
.tag_2025b:hover {
color: #c14400;
/* couleur au survol */
font-weight: 700;
}
.tag_2025b:hover::after {
transform: translateX(5px);
/* la flèche se déplace vers la droite */
}
/* Sections */
.section_a {
padding: 4rem 1rem;
}
.section_bis {
padding: 0rem 1rem;
}
.section_rien {
padding: 0;
}
.section_a.alt,
.section_bis.alt,
.section_rien.alt {
background: #f1f5f9;
}
.grid-3,
.grid-4,
.grid-2_2025 {
display: grid;
gap: 1.5rem;
}
.grid-3 {
/*grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));*/
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid-4 {
/* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 1rem;
}
.grid-2_2025 {
grid-template-columns: 1fr 1fr;
align-items: center;
}
.container_2025 {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
margin-bottom: 48px;
}
.container_2025_bis {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
margin-bottom: 10px;
}
.container_2025_rien {
max-width: 1200px;
margin: 0 auto;
padding: 0rem;
margin-bottom: 0px;
}
.container_2025_peu {
max-width: 1200px;
margin: 0 auto;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0px;
}
@media (max-width: 1000px) {
.grid-4 {
grid-template-columns: 1fr;
/* force une seule colonne */
}
.container_2025,
.container_2025_bis,
.container_2025_rien {
padding-left: 0rem !important;
padding-right: 0rem !important;
max-width: 100% !important;
}
}
.text-center_2025 {
text-align: center;
}
.blanche {
background-color: white;
color: black;
}
.cours_2025 {
font-size: clamp(20px, 1.6vw, 24px);
font-weight: 600;
margin-bottom: 0.75rem;
color: #111827;
}
.cours_encart_2025 {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.sous_cours_2025 {
text-align: justify;
}
.definition_2025 {
display: inline-block;
font-weight: bold;
padding: 6px 14px;
border-radius: 8px;
background-color: #D6E8DB;
color: #2F4F4F;
border: 1px solid #bdd7c4;
font-family: Arial, sans-serif;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
margin-bottom: 5px;
margin-top: 5px;
display: inline-block;
}
.exemple_2026 {
display: inline-block;
background: #ffffff;
color: #2c5aa0;
padding: 4px 8px;
border-radius: 8px;
font-weight: bold;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
margin: 5px 0;
}
.exemple_2025 {
display: inline-block;
font-weight: bold;
padding: 6px 14px;
border-radius: 8px;
background-color: #D7E9F7;
color: #1F3B73;
border: 1px solid #bdd7ec;
font-family: Arial, sans-serif;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
margin-bottom: 5px;
margin-top: 5px;
}
.dans_exercice {
display: inline-block;
font-weight: bold;
padding: 6px 14px;
border-radius: 8px;
background-color: #FBEFF5;
color: #7A3E4B;
border: 1px solid #F2D9E4;
font-family: Arial, sans-serif;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
margin-bottom: 0.75rem;
}
.remarque_2025 {
display: inline-block;
font-weight: bold;
padding: 6px 14px;
border-radius: 8px;
background-color: #FFF7CC;
/* Jaune pâle doux */
color: #665200;
/* Texte lisible, légèrement foncé */
border: 1px solid #E6DA99;
/* Bordure assortie */
font-family: Arial, sans-serif;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
margin-bottom: 5px;
margin-top: 5px;
}
.sous_cours_2025,
.dans_exercice,
.exemple_2025,
.definition_2025,
.remarque_2025,
.dans_exercice,
.dans_exercice_liste,
.sousDiv_2025 {
font-size: clamp(17px, 1.6vw, 18px);
line-height: clamp(1.4, 2vw, 1.8);
}
.fin_ampoule {
/*pour pas que l'ampoule soit seule apres retour à la ligne*/
/* il faut mettre de cette façon
plan 
*/
display: inline-flex;
align-items: center;
gap: 2px;
}
/*fin cours nouvelle présentation 2025*/
/*bandeau ou il y a le titre du chapitre ....*/
.sous_bandeau_2025>div.text-content_2025 {
flex: 1;
}
@media (max-width: 768px) {
/* CENTRER TEXTE DANS LE DIV TEXT-CONTENT */
.sous_bandeau_2025>div.text-content_2025 {
text-align: center;
}
}
/* Pour les écrans de petite taille */
@media (max-width: 850px) {
.contenu_boite_bandeau_2025 {
justify-content: center;
}
}
.bandeau_2025 {
position: relative;
background: linear-gradient(to right, #2563eb, #1e40af, #0891b2);
overflow: hidden;
color: white;
}
.sous_bandeau_2025 {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px 30px 20px;
display: flex;
flex-direction: column;
gap: 20px;
flex-direction: row;
align-items: center;
}
.icone_video_bandeau_2025 {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(6px);
padding: 16px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.titre_chapitre_2025 {
font-size: clamp(2.25rem, 5vw, 3rem);
font-weight: 800;
line-height: 1.2;
margin-bottom: 15px;
}
.sous_titre_chapitre_2025 {
font-size: 1.2rem;
font-size: clamp(0.9rem, 2vw, 1.2rem);
font-weight: 300;
color: #e0f2fe;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.sous_bandeau_2025 {
flex-direction: column;
/* icône au-dessus */
text-align: center;
/* centre texte et contenu */
}
.icone_video_bandeau_2025 {
margin-bottom: 15px;
/* espace entre icône et texte */
}
.contenu_boite_bandeau_2025 {
justify-content: center;
/* centre les petites boîtes */
}
.boite_bandeau_2025 {
justify-content: center;
/* centre chaque boîte individuellement si elles sont flex */
}
}
/*-------fin du bandeau ou y a le titre du chapitre------------------------------*/
/*style pour les tables des matieres*/
/*
body {
font-family: Arial, sans-serif;
background: #f0f0f0;
margin: 0;
padding: 0;
}
*/
.container_chapitre {
max-width: 1000px;
margin: auto;
padding: 2rem;
}
.page-title_chapitre {
text-align: center;
margin-bottom: 2rem;
font-size: 2rem;
font-weight: bold;
}
.theme-card_chapitre {
background-color: #ffffff;
/* blanc comme dans Bolt */
border-radius: 10px;
margin-bottom: 2rem;
overflow: hidden;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
/* Chapeau du thème */
.theme-header_chapitre {
display: flex;
/* active flexbox */
align-items: center;
/* aligne verticalement le logo et le texte */
justify-content: flex-start;
/* centre horizontalement tout le contenu */
gap: 0.75rem;
/* espace entre logo et texte */
color: white;
padding: 1rem;
font-size: clamp(1.5rem, 2.5vw, 2.5rem);
/* taille du texte du chapeau */
font-weight: bold;
text-align: center;
/* reste utile si le texte fait plusieurs lignes */
}
.theme-header_chapitre .theme-icon-wrapper {
padding: 0.75rem;
/* équivalent à p-3 */
background-color: rgba(255, 255, 255, 0.2);
/* bg-white/20 */
border-radius: 1rem;
/* rounded-xl */
backdrop-filter: blur(4px);
/* backdrop-blur-sm */
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.theme-header_chapitre .theme-icon {
width: 48px;
height: 48px;
}
.chapters_chapitre {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
list-style: none;
margin: 0;
}
.chapters_chapitre li {
flex: 1 1 calc(25% - 1rem);
display: flex;
}
.chapters_chapitre li a {
display: flex;
/* déjà flex, parfait */
align-items: center;
/* alignement vertical */
justify-content: space-between;
/* <-- change de center à space-between */
padding: 0.8rem;
border-radius: 8px;
text-decoration: none;
color: #374151;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.5;
text-align: left;
/* <-- change de center à left pour le texte */
transition: background-color 0.3s, color 0.3s;
width: 100%;
background-color: rgba(0, 0, 0, 0.03);
position: relative;
font-family: Arial, Helvetica, sans-serif;
white-space: normal;
}
.chapters_chapitre li a .label {
flex: 1 1 auto;
min-width: 0;
/* permet vraiment le wrap */
text-align: left;
}
/* Flèche après chaque titre */
.chapters_chapitre li a::after {
content: "";
display: block;
/* change inline-block en block */
flex-shrink: 0;
/* empêche la flèche de rétrécir */
width: 16px;
height: 16px;
margin-left: 0.4rem;
background-color: #9CA3AF;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
-webkit-mask-size: contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask-size: contain;
transition: transform 0.3s ease;
}
.chapters_chapitre li a:hover::after {
transform: translateX(8px);
}
/* Effet hover : texte foncé + flèche qui avance */
.chapters_chapitre li a:hover {
color: #111827;
}
.theme-card_chapitre.math_chapitre .theme-header_chapitre {
background: linear-gradient(to right, #3b82f6, #2563eb);
/* bleu dégradé blue-500 -> blue-600 */
/* taille plus grande du chapeau */
font-weight: bold;
text-align: center;
padding: 1.2rem 1rem;
/* un peu plus d'espace */
color: white;
border-radius: 10px 10px 0 0;
/* coins arrondis en haut seulement */
}
.theme-card_chapitre.physique .theme-header_chapitre {
background: linear-gradient(to right, rgb(168 85 247), rgb(147 51 234));
/* violet dégradé purple-500 -> purple-600 */
font-weight: bold;
text-align: center;
padding: 1.2rem 1rem;
color: white;
border-radius: 10px 10px 0 0;
}
.theme-card_chapitre.chimie .theme-header_chapitre {
background: linear-gradient(to right, rgb(34 197 94), rgb(22 163 74));
/* vert dégradé green-500 -> green-600 */
font-weight: bold;
text-align: center;
padding: 1.2rem 1rem;
color: white;
border-radius: 10px 10px 0 0;
}
.theme-card_chapitre.stats .theme-header_chapitre {
background: linear-gradient(to right, rgb(249 115 22), rgb(234 88 12));
font-weight: bold;
text-align: center;
padding: 1.2rem 1rem;
color: white;
border-radius: 10px 10px 0 0;
}
.theme-card_chapitre.biologie .theme-header_chapitre {
background: linear-gradient(to right, #10b981, #047857);
/* vert clair -> vert foncé */
font-weight: bold;
text-align: center;
padding: 1.2rem 1rem;
color: white;
border-radius: 10px 10px 0 0;
/* coins arrondis en haut seulement */
}
/* Couleurs pastel pour Biologie */
.biologie li a {
background-color: #DCFCE7;
/* vert très clair */
}
.biologie li a:hover {
background-color: #A7F3D0;
/* vert plus foncé au survol */
}
.theme-card_chapitre.philosophie .theme-header_chapitre {
background: linear-gradient(to right, rgb(236 72 153), rgb(219 39 119));
/* from-pink-500 to-pink-600 */
font-weight: bold;
text-align: center;
padding: 1.2rem 1rem;
color: white;
border-radius: 10px 10px 0 0;
}
.philosophie li a {
background-color: #FCE7F3;
/* rose clair */
}
.philosophie li a:hover {
background-color: #F9A8D4;
/* rose plus foncé */
}
.theme-card_chapitre.grandeur .theme-header_chapitre {
background: linear-gradient(to right, rgb(6 182 212), rgb(8 145 178));
/* cyan-500 → cyan-600 */
font-weight: bold;
text-align: center;
padding: 1.2rem 1rem;
color: white;
border-radius: 10px 10px 0 0;
}
.grandeur li a {
background-color: #CFFAFE;
/* cyan clair */
}
.grandeur li a:hover {
background-color: #67E8F9;
/* cyan plus foncé */
}
.theme-card_chapitre.scratch_chapitre .theme-header_chapitre {
background: linear-gradient(to right, #f97316, #ea580c);
/* orange-500 → orange-600 */
font-weight: bold;
text-align: center;
padding: 1.2rem 1rem;
color: white;
border-radius: 10px 10px 0 0;
}
.scratch_chapitre li a {
background-color: #FFEDD5;
/* orange très clair */
}
.scratch_chapitre li a:hover {
background-color: #FDBA74;
/* orange plus foncé */
}
/* Chapeau du thème Psychologie */
.theme-card_chapitre.psychologie .theme-header_chapitre {
background: linear-gradient(to right, rgb(239 68 68), rgb(220 38 38));
/* rouge clair -> rouge foncé */
font-weight: bold;
text-align: center;
padding: 1.2rem 1rem;
color: white;
border-radius: 10px 10px 0 0;
/* coins arrondis en haut seulement */
}
/* Couleurs pastel des chapitres */
.psychologie li a {
background-color: #FECACA;
/* rouge pastel très clair */
}
.psychologie li a:hover {
background-color: #FCA5A5;
/* rouge plus foncé au survol */
}
/* Chapeau du thème Exercices en ligne */
.theme-card_chapitre.exo_en_ligne_chapitre .theme-header_chapitre {
background: linear-gradient(to right, #f472b6, #ec4899);
/* from-pink-500 → to-pink-600 */
font-weight: bold;
text-align: center;
padding: 1.2rem 1rem;
color: white;
border-radius: 10px 10px 0 0;
}
/* Couleur des chapitres */
.exo_en_ligne_chapitre li a {
background-color: #FBCFE8;
/* rose clair */
}
.exo_en_ligne_chapitre li a:hover {
background-color: #F472B6;
/* rose plus foncé */
}
.theme-card_chapitre.informatique .theme-header_chapitre {
background: linear-gradient(to right, rgb(20 184 166), rgb(13 148 136));
/* from-teal-500 to-teal-600 */
font-weight: bold;
text-align: center;
padding: 1.2rem 1rem;
color: white;
border-radius: 10px 10px 0 0;
}
.informatique li a {
background-color: #CCFBF1;
/* teal clair */
}
.informatique li a:hover {
background-color: #5EEAD4;
/* teal plus foncé */
}
/* Couleurs pastel Statistiques */
.stats li a {
background-color: #FFEDD5;
/* orange clair */
}
.stats li a:hover {
background-color: #FDBA74;
/* orange plus foncé */
}
/* Couleurs pastel par thème */
.math_chapitre li a {
background-color: #DBEAFE;
}
/* bleu clair */
.math_chapitre li a:hover {
background-color: #93C5FD;
}
/* bleu plus foncé */
/* Physique */
.physique li a {
background-color: #EDE9FE;
}
/* violet clair */
.physique li a:hover {
background-color: #C4B5FD;
}
/* violet plus foncé */
/* Chimie */
.chimie li a {
background-color: #DCFCE7;
}
/* vert clair */
.chimie li a:hover {
background-color: #A7F3D0;
}
/* vert plus foncé */
/* Responsive */
@media (max-width: 768px) {
.chapters_chapitre li {
flex: 1 1 calc(33.3333% - 1rem);
}
}
@media (max-width: 480px) {
.chapters_chapitre {
gap: 0.5rem;
/* espace réduit entre les boîtes */
padding: 0.5rem;
/* padding intérieur du conteneur */
gap: 0.5rem;
/* espace entre les boîtes */
}
.chapters_chapitre li {
flex: 1 1 100%;
}
.container_chapitre {
padding: 0.5rem;
}
.chapters_chapitre li a {
padding: 0.5rem 0.8rem;
/* moins de padding vertical, padding horizontal inchangé */
}
}
/*fin du style pour les tables des matieres*/
/*pour les exos en grille a ... b... c .... s'adapte à la taille ecran*/
.exo_grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
max-width: 900px;
/* limite à 4 colonnes */
gap: 12px 20px;
justify-content: start;
/* commence toujours à gauche */
}
.item_grid {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
/* chaque item reste sur une seule ligne */
}
.lettre {
color: red;
font-weight: bold;
}
/*pour avoir un lien flashy*/
.flashy-link {
display: inline-block;
padding: 14px 28px;
font-size: 18px;
font-weight: bold;
color: #fff;
text-decoration: none;
border-radius: 12px;
background: linear-gradient(90deg, #ff512f, #dd2476, #ff512f, #24c6dc, #514a9d);
background-size: 400% 400%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease;
animation: rainbowBG 6s ease infinite;
max-width: 95%;
/* ne dépassera jamais 95% de l'écran */
}
.flashy-link:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
/*pour les pages qui présentent la liste des exercices en ligne*/
.exercice_en_ligne-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.exercice_en_ligne {
display: flex;
flex-direction: column;
/* titre à gauche, image à droite */
align-items: center;
/* centre verticalement image et texte */
background-color: #fff;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
overflow: hidden;
/*pour avoir largeur variable*/
/* max-width: 500px;
width: 100%;*/
width: 500px;
height: 500px;
/*si on veut tout à la meme hauteur*/
transition: transform 0.2s;
}
.exercice_en_ligne:hover {
transform: scale(1.02);
}
.exercice_en_ligne img {
/*max-width: 400px;*/
width: 100%;
height: auto;
object-fit: cover;
order: 2;
/* image à droite */
}
.exercice_en_ligne-content {
padding: 20px;
order: 1;
/* texte à gauche */
text-align: center;
background: linear-gradient(135deg, #ff9800, #ff5722);
color: white;
width: 100%;
min-height: 60px;
/* ✅ réserve de place pour ~2 lignes */
display: flex;
align-items: center;
justify-content: center;
}
.exercice_en_ligne-title {
font-size: 1.3em;
font-weight: bold;
margin: 0;
}
.exercice_en_ligne-link {
text-decoration: none;
/* supprime le soulignement du lien */
color: inherit;
/* garde la couleur du texte */
display: block;
/* pour que le lien englobe tout le bloc */
}
.exercice_en_ligne-link:hover .exercice_en_ligne {
transform: scale(1.02);
/* effet hover sur le bloc complet */
}
/* Media query pour petits écrans */
@media (max-width: 550px) {
.exercice_en_ligne {
width: 90vw;
/* largeur = 90% de la largeur de l’écran */
height: 90vw;
/* hauteur = même que largeur pour garder un carré */
}
}
/*pour avoir ds les listes la puce qui soit une fleche*/
ul.fleche {
list-style-type: "➤ ";
}
/*pour avoir ds les listes la puce qui soit un index pointé*/
ul.indexe {
list-style-type: "👉 ";
}
/* pour faire ressortir des caracteres comme ds python pour expliquer == signifie ....*/
.emphase {
color: crimson;
font-weight: bold;
background-color: white;
padding: 2px;
border-radius: 30px;
line-height: 200%;
box-shadow: 8px 8px 10px 0 rgba(0, 0, 0, 0.5);
}
/*vignette (image) pour la lancer les vidéos de cours */
.vignette {
max-width: 100%;
display: block;
margin-left: 0px;
margin-bottom: 5px;
}
/* pour faire des tableaux ds les exos type proba type grille*/
.tab_grille {
border-collapse: collapse;
}
.tab_grille td {
border: solid 1px black;
text-align: center;
}
/*mettre une couleur de fond pour les titres*/
.tab_grille_titre {
background-color: lightskyblue;
}
/*tableau type QCM*/
.QCM {
border-collapse: collapse;
border: 4px solid rgb(140 140 140);
border-style: inset;
}
.QCM tr {
border-style: inset;
}
.QCM td {
border: solid 2px black;
border: 1px solid rgb(160 160 160);
}
.QCM_reponse {
text-align: center;
}
/* pour faire des tableaux avec la numérotation rouge gras*/
/*tabexoa numerotation alpha, tabexo1 numerote decimal*/
.tabexoa,
.tabexoa_2025,
.tabexoa_exo2025 {
list-style-type: lower-alpha;
}
.tabexo1,
.tabexo1_2025 {
list-style-type: decimal;
}
.tabexoa li,
.tabexo1 li,
.tabexoa_2025 li,
.tabexo1_2025 li,
.tabexoa_exo2025 li {
color: red;
font-weight: bold;
}
.tabexoa li>span,
.tabexo1 li>span,
.tabexoa_2025 li>span,
.tabexo1_2025 li>span,
.tabexoa_exo2025 li>span {
color: black;
font-weight: normal;
}
.tabexoa_2025 li>span,
.tabexo1_2025 li>span,
.tabexoa_exo2025 li>span {
color: #1e293b;
font-weight: normal;
}
.tabexoa_2025,
.tabexo1_2025,
.tabexo_2025 {
padding-left: 24px;
margin-left: 0;
}
.tabexoa_exo2025 {
padding-left: 0px;
margin-left: 0px;
}
.tabexo_2025 {
list-style-type: disc;
}
.tabexo_s_2025 {
list-style: none;
}
.difficulte_2025 {
list-style: none;
padding-left: 0;
}
.difficulte_2025>li {
padding-left: 0.8em;
/* espace pour le rond */
margin-bottom: 0.8em;
}
.difficulte_2025>li::before {
content: '';
display: inline-block;
/* se comporte comme une puce classique */
width: 0.6em;
height: 0.6em;
margin-left: -1.2em;
/* décale dans la marge */
margin-right: 0.2em;
border-radius: 50%;
vertical-align: baseline;
/* ✅ aligné sur la ligne de base */
}
/* Couleurs selon la difficulté */
.diff_vert::before {
background-color: #28a745;
}
.diff_jaune::before {
background-color: #ffc107;
}
.diff_orange::before {
background-color: #fd7e14;
}
.diff_rouge::before {
background-color: #dc3545;
}
/* pour faire des tableaux avec la numérotation rouge*/
.rouge {
color: red;
}
.rouge span {
color: black;
}
/*pour iframe geogebra*/
.geogebra_sphere {
padding-top: 56.25%;
position: relative;
overflow: hidden;
width: 100%;
}
.geogebra_sphere iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 1000px) {
.geogebra_sphere {
padding-top: 100%;
}
}
@media screen and (max-width: 1200px) and (min-width:1000px) {
.geogebra_sphere {
padding-top: 80.25%;
}
}
.python2 {
color: #2367bb;
margin-left: 0px;
font-family: "Times New Roman", serif;
padding: 0px;
}
.python2 a {
margin-left: 0px;
padding-left: 0;
font-family: "Times New Roman", serif;
padding: 0px;
}
.python {
font-size: 24px;
color: #2367bb;
font-family: "Times New Roman", serif;
padding: 0px;
}
.python a {
text-decoration-line: none;
margin-left: 0px;
padding-left: 0px;
font-family: "Times New Roman", serif;
}
.python a:hover {
/* text-decoration-line: underline; */
color: red;
cursor: pointer;
}
.princip {
background-color: White;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
display: inline-block;
width: 80%;
padding: 10px;
margin-left: 10%;
position: relative;
}
.nathan_python {
color: yellow;
}
.nathan_exercice {
color: darkslateblue;
}
.nathan_cours {
color: tomato;
}
.position_conseil {
position: absolute;
right: 3%;
top: 0px;
}
/*centre ds le texte des conseils*/
.modal-content li {
text-align: justify;
}
.conseil {
color: white;
background-color: cadetblue;
padding: 4px;
font-size: 19px;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
}
.conseil_prepa {
margin-left: 5%;
margin-right: 5%;
text-align: justify;
font-weight: bold;
font-size: 22px;
}
/*+grd que 1000*/
@media screen and (min-width: 1000px) {
.conseil_prepa {
margin-left: 30%;
margin-right: 30%;
}
}
@media screen and (min-width: 1000px) {
.conseil {
font-size: 30px;
}
}
.conseil:hover {
color: wheat;
cursor: pointer;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal-footer {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding-left: 30px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: rgb(158, 60, 60);
float: right;
font-size: 28px;
padding: 5px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-content-footer {
position: relative;
display: inline-block;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
background-color: #fefefe;
margin: auto;
padding-left: 10px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 10px;
border: 1px solid #888;
max-width: 100%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop2;
-webkit-animation-duration: 1s;
animation-name: animatetop2;
animation-duration: 1s
}
/* Add Animation */
@-webkit-keyframes animatetop2 {
from {
bottom: -800px;
opacity: 0
}
to {
bottom: 0px;
opacity: 1;
}
}
@keyframes animatetop2 {
from {
bottom: -800px;
opacity: 0;
}
to {
bottom: 0px;
opacity: 1;
}
}
/*-----------------------*/
.image_enonce {
margin-left: 0px;
}
/*+ grd que 600*/
@media screen and (min-width: 600px) {
.image_enonce {
margin-left: 5vw;
}
}
.titre_enonce h2 {
display: inline-block;
}
.premier_liste {
padding-top: 2px;
}
.premier {
padding-top: 8px;
}
.dernier {
padding-bottom: 8px;
}
.dernier_liste {
padding-bottom: 2px;
}
.titre_table_matiere {
text-align: center;
display: inline-block;
width: 100%;
padding: 20px;
font-weight: bold;
-webkit-font-smoothing: antialiased;
font-family: 'Amaranth', Tahoma, sans-serif;
color: white;
text-shadow: 4px 6px 6px rgba(0, 0, 0, 0.7), 0px -5px 35px rgba(255, 255, 255, 0.8);
/* Taille fluide */
font-size: clamp(24px, 7vw, 40px);
}
.menu_tour {
text-align: left;
}
@media screen and (min-width: 600px) {
.menu_tour {
text-align: center;
}
}
.partie_cours {
background-color: #EBD9FA;
/* d9e0e6*/
padding: 3vw;
margin-bottom: 5px;
}
@media screen and (max-width: 768px) {
.cadre_titre_bordure {
display: none;
}
.titre_bordure {
display: none;
}
}
@media screen and (min-width: 769px) {
.cadre_titre_bordure {
text-align: center;
}
.partie_cours {
padding-left: 100px;
padding-right: 100px;
}
.titre_bordure {
position: absolute;
padding: 10px;
font-size: 25px;
font-weight: bold;
white-space: nowrap;
top: 50%;
left: 50%;
/* à 50%/50% du parent référent */
transform: translate(-50%, -50%);
background-color: #CC8ABF;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
box-shadow: 1px 1px 12px #555;
}
}
@media screen and (min-width: 1200px) {
.partie_cours {
padding-left: 100px;
padding-right: 100px;
}
}
@media screen and (min-width: 1400px) {
.partie_cours {
padding-left: 200px;
padding-right: 200px;
}
}
/*qd c plus grand*/
@media screen and (min-width: 769px) {
.bordure {
padding: 50px;
box-shadow: 1px 1px 12px #555;
background-color: #EBD9FA;
}
}
/*pour la page des tables des matières*/
.chapitre {
display: flex;
text-align: center;
background-color: #F4E9FF;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
/*bord du menu noir*/
-webkit-border-radius: 10px 0px 0px 10px;
margin-left: 10px;
font-size: 18px;
font-family: 'Amaranth', Tahoma, sans-serif;
}
/*plus petit*/
@media screen and (max-width: 580px) {
.chapitre {
display: block;
}
}
@media screen and (min-width: 1200px) {
.chapitre {
margin-left: 100px;
margin-right: 100px;
}
}
@media screen and (min-width: 1300px) {
.chapitre {
margin-left: 200px;
margin-right: 200px;
}
}
.chapitre_titre_gauche {
margin-top: auto;
margin-bottom: auto;
display: inline-block;
padding: 10px;
width: 30%;
font-weight: bold;
font-size: 24px;
color: #5b5b5b;
}
/*plus petit passe au dessus*/
@media screen and (max-width: 580px) {
.chapitre_titre_gauche {
width: 100%;
font-size: 22px;
/*pas besoin de reudire police car passe au dessus*/
}
}
/*+ grd*/
@media screen and (min-width: 780px) {
.chapitre_titre_gauche {
font-size: 30px;
}
}
.chapitre h3 {
display: inline-block;
}
.titre_enonce h3 {
display: inline-block;
}
.chapitre a {
display: flex;
width: 100%;
background-color: #CCD7ED;
text-decoration: none;
padding: 2px;
}
.chapitre a:hover {
box-shadow: 0 0 12px #ccc;
background: #E4E9ED;
background: rgba(255, 255, 255, 0.3);
}
.chapitre_texte_droit {
margin-top: auto;
margin-bottom: auto;
text-align: left;
width: 100%;
color: #4A8CA3;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2xp;
font-size: 18px;
}
/*+ petit que 600*/
@media screen and (max-width: 700px) {
.chapitre_texte_droit {
font-size: 18px;
}
}
.coche_verte {
margin-top: auto;
margin-bottom: auto;
width: 24px;
}
/*+ petit que 700*/
@media screen and (max-width: 700px) {
.coche_verte {
width: 24px;
}
}
/* léo */
.wrapper,
.landingPage {
width: 1200px;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.row {
width: 100%;
}
.row>div {
float: left;
}
@media screen and (max-width: 480px) {
.w-xs-1 {
width: 8.33333333%;
}
.w-xs-2 {
width: 16.66666667%;
}
.w-xs-3 {
width: 25%;
}
.w-xs-4 {
width: 33.33333333%;
}
.w-xs-5 {
width: 41.66666667%;
}
.w-xs-6 {
width: 50%;
}
.w-xs-7 {
width: 58.33333333%;
}
.w-xs-8 {
width: 66.66666667%;
}
.w-xs-9,
header .logo {
width: 75%;
}
.w-xs-10 {
width: 83.33333333%;
}
.w-xs-11 {
width: 91.66666667%;
}
.w-xs-12,
header .desc,
.landingPage .landingPageContent2 .cours .coursImage,
.landingPage .landingPageContent2 .cours .coursTexte,
.landingPage .landingPageContent2 .exercices .exercicesTexte,
.landingPage .landingPageContent2 .exercices .exercicesImage,
.landingPage .landingPageContent2 .exercices .exercicesImageExercice,
.landingPage .landingPageContent2 .aide .aideTexte,
.landingPage .landingPageContent2 .aide .aideImage,
.landingPage .landingPageContent2 .bac .bacTexte,
.landingPage .landingPageContent2 .bac .bacImage,
.landingPage .landingPageContent2 .calculatrice .calculatriceTexte,
.landingPage .landingPageContent2 .calculatrice .calculatriceImage,
.dropdown-leo {
width: 100%;
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
.w-sm-1 {
width: 8.33333333%;
}
.w-sm-2 {
width: 16.66666667%;
}
.w-sm-3 {
width: 25%;
}
.w-sm-4 {
width: 33.33333333%;
}
.w-sm-5 {
width: 41.66666667%;
}
.w-sm-6 {
width: 50%;
}
.w-sm-7 {
width: 58.33333333%;
}
.w-sm-8 {
width: 66.66666667%;
}
.w-sm-9,
header .logo {
width: 75%;
}
.w-sm-10 {
width: 83.33333333%;
}
.w-sm-11 {
width: 91.66666667%;
}
.w-sm-12,
header .desc,
.landingPage .landingPageContent2 .cours .coursImage,
.landingPage .landingPageContent2 .cours .coursTexte,
.landingPage .landingPageContent2 .exercices .exercicesTexte,
.landingPage .landingPageContent2 .exercices .exercicesImage,
.landingPage .landingPageContent2 .exercices .exercicesImageExercice,
.landingPage .landingPageContent2 .aide .aideTexte,
.landingPage .landingPageContent2 .aide .aideImage,
.landingPage .landingPageContent2 .bac .bacTexte,
.landingPage .landingPageContent2 .bac .bacImage,
.landingPage .landingPageContent2 .calculatrice .calculatriceTexte,
.landingPage .landingPageContent2 .calculatrice .calculatriceImage,
.dropdown-leo {
width: 100%;
}
}
@media screen and (min-width: 769px) {
.w-md-1 {
width: 8.33333333%;
}
.w-md-2,
.landingPage .landingPageContent2 .aide .aideImage {
width: 16.66666667%;
}
.w-md-3,
header .logo,
.landingPage .landingPageContent2 .cours .coursImage,
.landingPage .landingPageContent2 .exercices .exercicesImage,
.landingPage .landingPageContent2 .bac .bacImage,
.landingPage .landingPageContent2 .calculatrice .calculatriceImage {
width: 25%;
}
.w-md-4 {
width: 33.33333333%;
}
.w-md-5,
.landingPage .landingPageContent2 .aide .aideTexte {
width: 41.66666667%;
}
.w-md-6,
.dropdown-leo {
width: 50%;
}
.w-md-7 {
width: 58.33333333%;
}
.w-md-8 {
width: 66.66666667%;
}
.w-md-9,
header .desc,
.landingPage .landingPageContent2 .cours .coursTexte,
.landingPage .landingPageContent2 .exercices .exercicesTexte,
.landingPage .landingPageContent2 .bac .bacTexte,
.landingPage .landingPageContent2 .calculatrice .calculatriceTexte {
width: 75%;
}
.w-md-10 {
width: 83.33333333%;
}
.w-md-11 {
width: 91.66666667%;
}
.w-md-12,
.landingPage .landingPageContent2 .exercices .exercicesImageExercice {
width: 100%;
}
}
@media screen and (min-width: 1024px) {
.w-lg-1 {
width: 8.33333333%;
}
.w-lg-2,
.landingPage .landingPageContent2 .aide .aideImage {
width: 16.66666667%;
}
.w-lg-3,
header .logo,
.landingPage .landingPageContent2 .cours .coursImage,
.landingPage .landingPageContent2 .exercices .exercicesImage,
.landingPage .landingPageContent2 .bac .bacImage,
.landingPage .landingPageContent2 .calculatrice .calculatriceImage,
.dropdown-leo {
width: 25%;
}
.w-lg-4 {
width: 33.33333333%;
}
.w-lg-5,
.landingPage .landingPageContent2 .aide .aideTexte {
width: 41.66666667%;
}
.w-lg-6 {
width: 50%;
}
.w-lg-7 {
width: 58.33333333%;
}
.w-lg-8 {
width: 66.66666667%;
}
.w-lg-9,
header .desc,
.landingPage .landingPageContent2 .cours .coursTexte,
.landingPage .landingPageContent2 .exercices .exercicesTexte,
.landingPage .landingPageContent2 .bac .bacTexte,
.landingPage .landingPageContent2 .calculatrice .calculatriceTexte {
width: 75%;
}
.w-lg-10 {
width: 83.33333333%;
}
.w-lg-11 {
width: 91.66666667%;
}
.w-lg-12,
.landingPage .landingPageContent2 .exercices .exercicesImageExercice {
width: 100%;
}
}
/*s'applique à tout*/
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.texte_enonce ol {
margin-left: 30px;
}
.texte_enonce td {
padding: 4px;
}
footer {
width: 100%;
background-color: #74b9ff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 10;
margin-top: 30px;
padding-bottom: 20px;
padding-top: 20px;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
footer p {
text-align: center;
}
footer ul {
margin: 20px 0px;
display: inline-block;
text-align: left;
}
footer .poitiers {
height: 100px;
}
footer .EN {
margin-top: 40px;
margin-bottom: 40px;
}
footer .EN img {
margin-bottom: 20px;
}
footer .EN img,
footer .EN p {
display: block;
margin-left: auto;
margin-right: auto;
}
footer .footer-images section {
display: inline-block;
width: auto;
margin: 10px 20px;
}
footer .footer-images img {
vertical-align: middle;
}
footer .footer-images .gratuit {
width: 100px;
}
footer .footer-images .fb,
footer .footer-images .twitter {
width: 50px;
}
footer .footer-images .ytb {
width: 80px;
}
footer .footer-images .satisfait {
width: 120px;
}
.dropdown-container-leo {
display: inline-block;
width: 100%;
}
.dropdown-leo {
display: inline-block;
float: left;
}
.dropdown-hover-leo {
background-color: #d9e0e6;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
height: auto;
border-radius: 5px;
padding: 5px 10px;
width: 200px;
}
.dropdown-child-leo {
display: block;
background-color: #fafafa;
height: 0px;
overflow: hidden;
-webkit-transition: all .2s;
transition: all .2s;
width: 0px;
border-radius: 10px;
position: absolute;
}
.dropdown-hover-leo:hover+.dropdown-child-leo,
.dropdown-child-leo:hover {
height: auto;
width: auto;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
padding: 15px;
background-color: #fafafa;
z-index: 1;
}
.dropdown-hover-leo:hover+.dropdown-child-leo h6,
.dropdown-child-leo:hover h6 {
font-size: 1.2em;
}
.dropdown-hover-leo:hover+.dropdown-child-leo ul,
.dropdown-child-leo:hover ul {
list-style-type: disc;
width: 90%;
}
@media screen and (max-width: 480px) {
.dropdown-leo {
display: inline-block;
width: 100%;
text-align: center;
}
.dropdown-hover-leo {
margin-top: 20px;
text-align: center;
display: inline-block;
}
.dropdown-hover-leo:hover+.dropdown-child-leo,
.dropdown-child-leo:hover {
float: left;
width: 90%;
}
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
.dropdown-leo {
display: inline-block;
width: 50%;
text-align: center;
}
.dropdown-hover-leo {
margin-top: 20px;
display: inline-block;
text-align: center;
}
.dropdown-hover-leo:hover+.dropdown-child-leo,
.dropdown-child-leo:hover {
float: center;
width: 50%;
}
}
/*------------------------------------ */
.dropdown_term {
position: absolute;
left: -100px;
}
.dropdown_college {
position: absolute;
left: 0px;
}
.separation_exo {
height: 5px;
width: 100%;
}
.sous_paragraphe {
padding-left: 20px;
}
.sous_sous_paragraphe {
display: block;
margin-top: -8px;
}
.titre_sous_sous_cours {
line-height: 40px;
font-weight: normal;
/* avant j'avais mis bold */
/*car sinon la ligne du dessous est collée à la ligne en court à cause de l'image bulb*/
}
.titre_sous_cours {
/*rien pour le moment, pour changer si je veux*/
font-weight: bold;
}
.puce_ouvre span::before {
content: "➤ ";
}
.puce_cours span::before {
content: "♦ ";
}
.bandeau {
background-image: url("/image/slider29.png");
background-repeat: no-repeat;
background-size: cover;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
/*bord du menu noir*/
-webkit-border-radius: 10px 10px 0px 0px;
margin: 0px;
padding-bottom: 10px;
}
.oeil {
cursor: pointer;
/* color: tomato;*/
font-size: 20px;
vertical-align: middle;
height: 30px;
margin: 1px;
}
.cours_encart {
background-color: rgb(81, 156, 218);
color: white;
padding: 6px;
font-weight: bold;
line-height: 50px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
/*bord du menu noir*/
-webkit-border-radius: 10px 10px 10px 10px;
}
.definition_exemple {
display: inline-block;
margin-bottom: 5px;
margin-top: 5px;
background-color: #F4D03F;
/*ecdb3b*/
color: white;
padding: 5px;
line-height: 30px;
font-weight: bold;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
/*bord du menu noir*/
-webkit-border-radius: 10px 10px 10px 10px;
}
.definition_propriete {
display: inline-block;
margin-bottom: 5px;
margin-top: 5px;
background-color: #b34fa5;
;
color: white;
padding: 5px;
line-height: 30px;
font-weight: bold;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
/*bord du menu noir*/
-webkit-border-radius: 10px 10px 10px 10px;
}
.definition_methode {
display: inline-block;
margin-bottom: 5px;
margin-top: 5px;
background-color: #68c778;
color: white;
padding: 5px;
line-height: 30px;
font-weight: bold;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
/*bord du menu noir*/
-webkit-border-radius: 10px 10px 10px 10px;
}
.definition_encart {
display: inline-block;
margin-bottom: 5px;
margin-top: 5px;
background-color: #ff524f;
color: white;
padding: 5px;
line-height: 30px;
font-weight: bold;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
/*bord du menu noir*/
-webkit-border-radius: 10px 10px 10px 10px;
}
.theoreme_encart {
display: inline-block;
margin-bottom: 5px;
background-color: #54b86b;
color: white;
padding: 5px;
line-height: 30px;
font-weight: bold;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
/*bord du menu noir*/
-webkit-border-radius: 10px 10px 10px 10px;
}
.paragraphe {
font-size: 16px;
/*taille police du cours*/
margin-top: 10px;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 5px;
/*nouveauté pour marquer les paragraphes*/
background-color: #F5B7B1;
/*nouveau pour bien marquer les paragraphes*/
border-radius: 10px 10px 10px 10px;
/*nouveauté idem pour marquer les paragraphes*/
-moz-border-radius: 10px 10px 10px 10px;
/*bord du menu noir*/
-webkit-border-radius: 10px 10px 10px 10px;
}
hr {
border-top: 1px solid #BDC3C7;
}
h1 {
font-size: inherit;
font-weight: inherit;
}
h2,
h3 {
font-size: inherit;
font-weight: inherit;
display: inherit;
}
.titre_un {
/* FONT-FAMILY: "Lucida Grande","Lucida Sans Unicode",tahoma,Arial,Verdana; */
font-family: "Roboto", sans-serif;
font-size: 5vw;
-webkit-font-smoothing: antialiased;
font-weight: bold;
text-align: center;
}
.titre_cours {
margin-top: 10px;
text-align: center;
font-size: 20px;
font-size: 4vw;
display: inline-block;
color: black;
font-weight: bold;
padding: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
/*bord du menu noir*/
-webkit-border-radius: 10px 10px 10px 10px;
box-shadow: 1px 1px 12px #555;
background-color: #CC8ABF;
}
.lampe_bandeau {
width: 220px;
/*avec lampe je mettais 40 au lieu de 140*/
}
.lampe_bandeau2 {
max-width: 100%;
/*avec lampe je mettais 40 au lieu de 140*/
}
.texte_bandeau {
font-size: 8vw;
color: black;
}
.texte_sous_bandeau {
font-size: 4vw;
color: black;
}
@media screen and (min-width: 600px) {
.dropdown_prepa {
position: absolute;
left: -100px;
top: 30px;
}
.titre_cours {
font-size: 30px;
}
.titre_un {
font-size: 40px;
}
.paragraphe {
font-size: 18px;
/*taille police du cours qd c grand ecran*/
}
/**/
.oeil {
font-size: 26px;
}
.lampe_bandeau {
width: 260px;
/*avec lampe je mettais 80 au lieu de 180*/
}
.texte_bandeau {
font-size: 7vw;
color: black;
}
.texte_sous_bandeau {
font-size: 3vw;
color: black;
}
}
.ribbon-wrapper {
display: block;
width: 120px;
/* conteneur plus large */
height: 120px;
/* conteneur plus haut */
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
.ribbon {
display: block;
font: bold 18px Sans-Serif;
/* texte plus grand */
color: #333;
text-align: center;
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
transform: rotate(45deg);
/* diagonale */
position: relative;
padding: 10px 0;
/* plus de padding vertical */
left: -15px;
/* léger décalage pour allonger visuellement */
top: 20px;
/* verticalement centré */
width: 180px;
/* ruban plus long */
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
/* ombre un peu plus prononcée */
}
.ribbon:before,
.ribbon:after {
content: "";
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -3px;
}
.ribbon:before {
left: 0;
}
.ribbon:after {
right: 0;
}
.ribbon.green:before,
.ribbon.green:after {
border-top: 3px solid #6e8900;
}
.ribbon.green {
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
}
.ribbon.red:before,
.ribbon.red:after {
border-top: 3px solid #CC0000;
}
.ribbon.red {
background-color: #ff524f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ff524f), to(#FF050F));
background-image: -webkit-linear-gradient(top, #ff524f, #FF050F);
background-image: -moz-linear-gradient(top, #ff524f, #FF050F);
background-image: -ms-linear-gradient(top, #ff524f, #FF050F);
background-image: -o-linear-gradient(top, #ff524f, #FF050F);
color: #fff;
}
.essais4 img:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
z-index: 300;
}
.essais4 img {
-webkit-transition: all .5s cubic-bezier(.6, 2, .4, 1);
-moz-transition: all .5s cubic-bezier(.6, 2, .4, 1);
-ms-transition: all .5s cubic-bezier(.6, 2, .4, 1);
-o-transition: all .5s cubic-bezier(.6, 2, .4, 1);
transition: all .5s cubic-bezier(.6, 2, .4, 1);
vertical-align: middle;
}
html {
font-size: 100%;
background-color: #d9e0e6;
font-family: "Roboto", sans-serif;
}
.exercice {
font-family: 'Amaranth', Tahoma, sans-serif;
font-size: 17px;
background-color: #729179;
width: 100%;
margin: 0;
text-decoration: none;
-moz-border-radius: 0px 10px 10px 10px;
-wekbit-border-radius: 0px 10px 10px 10px;
border-radius: 0px 10px 10px 10px;
-moz-outline-radius: 10px;
/* a11y : on arrondit le focus, si un focus carré pose problème */
-webkit-outline-radius: 10px;
outline-radius: 10px;
outline: none;
}
@media screen and (max-width:600px) {
.exercice {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
}
.pied_de_page {
margin-top: 10px;
margin-left: 30px;
margin-right: 10px;
text-align: left;
color: #747474;
font-size: 0.9em;
}
.myDiv {
text-align: justify;
display: none;
background-color: rgba(215, 199, 228);
/*201/189/212*/
padding-left: 20px;
padding-right: 4px;
margin-bottom: 10px;
padding-bottom: 2px;
text-decoration: none;
-moz-border-radius: 10px;
-wekbit-border-radius: 10px;
border-radius: 10px;
-moz-outline-radius: 10px;
/* a11y : on arrondit le focus, si un focus carré pose problème */
-webkit-outline-radius: 10px;
outline-radius: 10px;
outline: none;
box-shadow: 0 0 12px #aaa;
}
.sousDiv {
margin-right: 0px;
padding-left: 5px;
padding-right: 4px;
padding-top: 4px;
padding-bottom: 4px;
margin-top: 4px;
display: none;
background-color: rgb(179, 168, 189);
/*179, 168, 189*/
text-decoration: none;
-moz-border-radius: 10px 0px 0px 10px;
-wekbit-border-radius: 10px 0px 0px 10px;
border-radius: 10px 0px 0px 10px;
-moz-outline-radius: 10px 0px 0px 10px;
/* a11y : on arrondit le focus, si un focus carré pose problème */
-webkit-outline-radius: 10px;
outline-radius: 10px;
outline: none;
box-shadow: 0 0 12px #aaa;
}
.sousDiv_2025 {
margin-right: 0px;
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
margin-top: 4px;
margin-bottom: 8px;
/* display: none;*/
background-color: white;
/*179, 168, 189*/
text-decoration: none;
-moz-border-radius: 10px 0px 0px 10px;
-wekbit-border-radius: 10px 0px 0px 10px;
border-radius: 10px 0px 0px 10px;
-moz-outline-radius: 10px 0px 0px 10px;
/* a11y : on arrondit le focus, si un focus carré pose problème */
-webkit-outline-radius: 10px;
outline-radius: 10px;
outline: none;
box-shadow: 0 0 12px #aaa;
text-align: justify;
}
.saut_2025 {
margin-top: 2rem;
}
.sousDiv_vert {
margin-right: 0px;
padding-left: 5px;
padding-right: 4px;
padding-top: 4px;
padding-bottom: 4px;
margin-top: 4px;
display: none;
background-color: #D5F5E3;
font-weight: normal;
color: black;
/*179, 168, 189*/
text-decoration: none;
-moz-border-radius: 10px 0px 0px 10px;
-wekbit-border-radius: 10px 0px 0px 10px;
border-radius: 10px 0px 0px 10px;
-moz-outline-radius: 10px 0px 0px 10px;
/* a11y : on arrondit le focus, si un focus carré pose problème */
-webkit-outline-radius: 10px;
outline-radius: 10px;
outline: none;
/* box-shadow: 0 0 12px #D5F5E3; */
/*ça fait kitch le halo*/
}
.soussousDiv {
margin-right: 0px;
margin-top: 4px;
padding-left: 15px;
padding-right: 4px;
/* margin-left: 15px;*/
display: none;
background-color: rgb(161, 151, 170);
text-decoration: none;
-moz-border-radius: 10px 0px 0px 10px;
-wekbit-border-radius: 10px 0px 0px 10px;
border-radius: 10px 0px 0px 10px;
-moz-outline-radius: 10px 0px 0px 10px;
/* a11y : on arrondit le focus, si un focus carré pose problème */
-webkit-outline-radius: 10px;
outline-radius: 10px;
outline: none;
box-shadow: 0 0 12px #aaa;
}
.soussoussousDiv {
margin-right: 0px;
margin-top: 4px;
padding-left: 15px;
/* margin-left: 15px;*/
display: none;
background-color: rgb(144, 135, 153);
text-decoration: none;
-moz-border-radius: 10px 0px 0px 10px;
-wekbit-border-radius: 10px 0px 0px 10px;
border-radius: 10px 0px 0px 10px;
-moz-outline-radius: 10px 0px 0px 10px;
/* a11y : on arrondit le focus, si un focus carré pose problème */
-webkit-outline-radius: 10px;
outline-radius: 10px;
outline: none;
box-shadow: 0 0 12px #aaa;
}
.soussoussoussousDiv {
margin-right: 0px;
margin-top: 4px;
padding-left: 15px;
/* margin-left: 15px;*/
display: none;
background-color: rgb(102, 96, 109);
text-decoration: none;
-moz-border-radius: 10px 0px 0px 10px;
-wekbit-border-radius: 10px 0px 0px 10px;
border-radius: 10px 0px 0px 10px;
-moz-outline-radius: 10px 0px 0px 10px;
/* a11y : on arrondit le focus, si un focus carré pose problème */
-webkit-outline-radius: 10px;
outline-radius: 10px;
outline: none;
box-shadow: 0 0 12px #aaa;
}
.info {
margin-top: -15px;
color: Black;
background-color: #fff;
/*background-color: #EBD9FA;*/
padding: 10px;
border-radius: 20px;
box-shadow: 0 0 2px rgba(0, 0, 0, .5);
transform: scale(0) rotate(-12deg);
-webkit-transform: scale(0) rotate(-12deg);
transition: all 0.3s;
opacity: 0;
white-space: nowrap;
box-shadow: 10px 10px 15px #888;
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
opacity: 1;
}
.pied {
text-align: center;
width: 15%;
margin-top: 0;
color: gray;
padding: 4px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 0 12px #ccc;
-webkit-box-shadow: 0 0 12px #ccc;
box-shadow: 0 0 12px #ccc;
background: #eef;
}
.pied:hover {
-moz-box-shadow: 0 0 12px #722;
-webkit-box-shadow: 0 20 12px #722;
box-shadow: 0 0 30px #722;
}
.lien {
color: #539FD9;
font-weight: bold;
font-size: initial;
text-decoration: none;
}
.gau {
background-color: #2196F3;
padding: 20px;
float: left;
width: 50%;
font-size: 5vw;
}
.cen {
background-color: #f1f1f1;
padding: 20px;
float: left;
width: 50%;
font-size: 5vw;
}
.dro {
background-color: #4CAF50;
padding: 20px;
float: left;
width: 40%;
font-size: 5vw;
}
.python_logo_exo {
width: 100px;
vertical-align: middle;
}
.horloge {
width: 80px;
vertical-align: middle;
}
.difficulte {
width: 90px;
vertical-align: middle;
}
/* qd c grand (par defaut)*/
.video_exo {
width: 80px;
vertical-align: middle;
}
.video_cours {
width: 50px;
vertical-align: middle;
text-decoration: none;
}
.video_cours_petit {
width: 35px;
vertical-align: middle;
text-decoration: none;
}
.video_nathan {
width: 25px;
vertical-align: middle;
text-decoration: none;
}
.texte_enonce {
color: black;
background-color: white;
margin-left: 10px;
margin-right: 10px;
margin-top: 2px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
text-align: justify;
}
.titre_enonce {
color: white;
margin-left: 10px;
}
.icone_enonce {
margin-left: 10px;
}
.geogebra {
width: 490px;
height: 420px;
border: 0px;
}
/**/
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
/* overflow: hidden;*/
}
/* Style the links inside the navigation bar */
.topnav a {
/* float: left;
display: block;*/
color: #f2f2f2;
text-align: center;
/* padding-top: 20px;
padding-bottom: 10px;
padding-left: 6px;
padding-right: 6px; */
/*14 16 */
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: whitesmoke;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
/* float: left;*/
/* overflow: hidden;*/
position: relative;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
/* padding-top: 20px;
padding-bottom: 10px;
padding-left: 6px;
padding-right: 6px; */
/*14 16*/
background-color: inherit;
font-family: inherit;
}
.texte_menu {
display: none;
}
.image_menu_prog {
display: inline-block;
margin: 0;
padding: 0;
text-align: center;
height: 45px;
}
.image_menu_classe {
display: inline-block;
margin: 0;
padding: 0;
text-align: center;
width: 45px;
}
.image_menu_classe_4 {
display: inline-block;
margin: 0;
padding: 0;
text-align: center;
width: 135px;
}
.image_menu_accueil {
display: inline-block;
margin: 0;
padding: 0;
text-align: center;
width: 50px;
}
/*au dela de 800: eclate le tableau en ligne*/
@media screen and (min-width: 1000px) {
.image_menu_classe {
width: 50px;
}
.image_menu_classe_4 {
width: 150px;
}
.image_menu_prog {
height: 55px;
}
.image_menu_accueil {
width: 60px;
}
}
@media screen and (min-width: 1200px) {
.image_menu_classe {
width: 50px;
}
.image_menu_classe_4 {
width: 150px;
}
.image_menu_accueil {
width: 60px;
}
}
.image_menu {
display: inline-block;
margin: 0;
padding: 0;
text-align: center;
/* margin-left: 1vw;*/
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
/*position: absolute;*/
background-color: #f9f9f9;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
/* padding: 12px 16px;*/
text-decoration: none;
display: inline-block;
/**/
white-space: nowrap;
width: 100%;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
/* sauf qd c petit
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
*/
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
color: teal;
text-align: left;
}
.titi6 {
display: inline-block;
}
/*au dela de 800: */
@media screen and (min-width: 800px) {
.titi5,
.titi6,
.titi4,
.titi8 {
display: inline-block;
margin-left: 0.5vw;
margin-right: 0.5vw;
}
.texte_bandeau {
font-size: 4vw;
color: black;
}
.texte_sous_bandeau {
font-size: 24px;
color: black;
}
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a {
padding-top: 20px;
padding-bottom: 10px;
padding-left: 6px;
padding-right: 6px;
}
.dropdown .dropbtn {
padding-top: 20px;
padding-bottom: 10px;
padding-left: 6px;
padding-right: 6px;
}
.dropdown {
/*
padding-top: 20px;
padding-bottom: 10px;
padding-left: 6px;
padding-right: 6px;*/
}
.dropdown_term {
left: 0px;
}
.dropdown_college {
left: 0px;
}
.dropdown_prepa {
left: 0px;
}
.titi4 {
display: none;
}
.titi6 {
display: inline-block;
}
.titi8 {
display: none;
}
.titi5 {
display: block;
}
.titi,
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
}
/*plus que 600*/
@media screen and (min-width:600px) {
.dropdown-content {
-moz-border-radius: 10px 10px 10px 10px;
-wekbit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-moz-outline-radius: 10px;
/* a11y : on arrondit le focus, si un focus carré pose problème */
-webkit-outline-radius: 10px;
outline-radius: 10px;
outline: none;
padding: 4px;
}
.toto {
margin: 1px;
padding: 0;
text-align: center;
}
.titi,
.titi5 {
text-align: left;
}
}
/*qd c petit*/
@media screen and (max-width:600px) {
.titi0 {
vertical-align: middle;
display: inline-block;
}
.texte_menu {
display: block;
}
.image_menu,
.image_menu_prog,
.image_menu_classe,
.image_menu_classe_4 {
display: none;
}
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
.gau,
.cen,
.dro {
display: block;
width: 100%;
text-align: center;
/* largeur est mise à 100 qd c + petit que 800px de large du coup ça passe l'un en dessous de l'autre */
}
.horloge {
width: 70px;
}
.difficulte {
width: 80px;
}
.video_exo {
width: 80px;
}
.video_cours {
width: 40px;
vertical-align: middle;
}
.geogebra {
width: 350px;
height: 300px;
border: 0px;
}
}