/* =====================================================
PAGE D'ACCUEIL DISSERTA
===================================================== */

.home-announcement {
position: relative;
display: grid;
grid-template-columns: 1.3fr 0.7fr;
align-items: center;
gap: 25px;
min-height: 330px;
margin-bottom: 48px;
padding: 36px;
overflow: hidden;
color: #ffffff;
background: linear-gradient(125deg, #142c68 0%, #3459c9 58%, #7869e8 100%);
border-radius: 24px;
box-shadow: 0 16px 40px rgba(38, 68, 150, 0.15);
}

.announcement-content {
position: relative;
z-index: 2;
}

.announcement-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin-bottom: 17px;
color: #ffffff;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 30px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
}

.home-announcement h1 {
max-width: 550px;
margin: 0 0 15px;
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: clamp(27px, 3.5vw, 42px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -1.4px;
}

.home-announcement p {
max-width: 520px;
margin: 0 0 23px;
color: rgba(255, 255, 255, 0.84);
font-size: 14px;
line-height: 1.8;
}

.announcement-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.announcement-actions .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 45px;
padding: 12px 17px;
border-radius: 12px;
font-size: 12px;
font-weight: 800;
text-decoration: none;
transition: transform 0.2s ease, background 0.2s ease;
}

.announcement-actions .btn:hover {
transform: translateY(-2px);
}

.announcement-actions .btn-primary {
color: #ffffff;
background: #f59e0b;
}

.announcement-actions .btn-light {
color: #1e367b;
background: #ffffff;
}

.announcement-benefits {
display: flex;
flex-wrap: wrap;
gap: 17px;
margin-top: 23px;
}

.announcement-benefits span {
display: flex;
align-items: center;
gap: 7px;
color: rgba(255, 255, 255, 0.9);
font-size: 11px;
}

.announcement-benefits i {
color: #a7f3d0;
}

.announcement-decoration {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 245px;
}

.announcement-circle {
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
}

.circle-one {
width: 250px;
height: 250px;
}

.circle-two {
width: 190px;
height: 190px;
background: rgba(255, 255, 255, 0.05);
}

.announcement-book {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
width: 155px;
height: 185px;
color: #263b81;
background: linear-gradient(145deg, #ffffff, #e8ecff);
border: 5px solid rgba(255, 255, 255, 0.35);
border-radius: 15px 22px 22px 15px;
box-shadow: 12px 17px 0 rgba(13, 29, 82, 0.2);
transform: rotate(5deg);
}

.announcement-book > i {
margin-bottom: 8px;
color: #526de0;
font-size: 37px;
}

.announcement-book span {
font-size: 12px;
}

.announcement-book strong {
font-size: 16px;
}

.floating-icon {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: #ffffff;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 14px;
backdrop-filter: blur(8px);
}

.floating-pen {
top: 22px;
right: 12px;
transform: rotate(12deg);
}

.floating-star {
bottom: 18px;
left: 10px;
color: #ffe082;
transform: rotate(-10deg);
}

/* SECTIONS */

.home-section {
margin-bottom: 48px;
}

.section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 15px;
margin-bottom: 23px;
}

.section-eyebrow {
display: block;
margin-bottom: 7px;
color: #6479d9;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
}

.section-heading h2 {
margin: 0 0 8px;
color: #17233f;
font-family: "Manrope", sans-serif;
font-size: clamp(21px, 2.5vw, 28px);
font-weight: 800;
letter-spacing: -0.7px;
}

.section-heading p {
margin: 0;
color: #7b8498;
font-size: 13px;
line-height: 1.6;
}

.section-more {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
padding-bottom: 4px;
color: #4a61c8;
font-size: 12px;
font-weight: 800;
text-decoration: none;
}

.section-more:hover,
.card-read-more:hover {
color: #253da8;
}

/* CARTES DES COURS ET SUJETS */

.home-content-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}

.home-content-card {
min-width: 0;
overflow: hidden;
background: #ffffff;
border: 1px solid #edf0f7;
border-radius: 17px;
box-shadow: 0 5px 20px rgba(30, 48, 90, 0.035);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-content-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(30, 48, 90, 0.09);
}

.css-illustration {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 180px;
padding: 20px;
overflow: hidden;
color: #ffffff;
text-decoration: none;
isolation: isolate;
}

.css-illustration::before,
.css-illustration::after {
position: absolute;
z-index: -1;
content: "";
border-radius: 50%;
pointer-events: none;
}

.css-illustration::before {
top: -65px;
right: -35px;
width: 180px;
height: 180px;
background: rgba(255, 255, 255, 0.13);
}

.css-illustration::after {
right: 30px;
bottom: -100px;
width: 210px;
height: 210px;
border: 1px solid rgba(255, 255, 255, 0.18);
}

.illustration-violet {
background: linear-gradient(135deg, #4935a5, #8d75ec);
}

.illustration-bleu {
background: linear-gradient(135deg, #1763a8, #51b5ed);
}

.illustration-orange {
background: linear-gradient(135deg, #b64b22, #f5a742);
}

.illustration-vert {
background: linear-gradient(135deg, #087e70, #4ac7a4);
}

.illustration-rose {
background: linear-gradient(135deg, #a62f71, #ed80b0);
}

.illustration-label {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 7px;
padding: 7px 10px;
margin-bottom: 15px;
background: rgba(255, 255, 255, 0.17);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 30px;
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
}

.illustration-title {
position: relative;
z-index: 2;
display: -webkit-box;
overflow: hidden;
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: 21px;
font-weight: 800;
line-height: 1.3;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}

.illustration-watermark {
position: absolute;
top: 22px;
right: 20px;
color: rgba(255, 255, 255, 0.2);
font-size: 55px;
transform: rotate(-12deg);
}

.home-card-body {
padding: 19px;
}

.content-type {
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 11px;
color: #6475c9;
font-size: 10px;
font-weight: 800;
}

.home-card-body h3 {
display: -webkit-box;
min-height: 48px;
margin: 0 0 17px;
overflow: hidden;
color: #1c2946;
font-size: 15px;
font-weight: 800;
line-height: 1.6;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

.home-card-body h3 a {
color: inherit;
text-decoration: none;
}

.card-read-more {
display: inline-flex;
align-items: center;
gap: 8px;
color: #5267ce;
font-size: 11px;
font-weight: 800;
text-decoration: none;
}

/* CATÉGORIES */

.categories-section {
padding: 30px;
background: #f7f8fd;
border: 1px solid #edf0f8;
border-radius: 22px;
}

.home-categories-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
}

.home-category-card {
display: flex;
align-items: center;
gap: 13px;
min-width: 0;
padding: 15px;
color: #202c47;
background: #ffffff;
border: 1px solid #edf0f7;
border-radius: 14px;
text-decoration: none;
transition: transform 0.2s ease, border-color 0.2s ease;
}

.home-category-card:hover {
transform: translateY(-2px);
border-color: #cbd4ff;
}

.category-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 14px;
font-size: 20px;
}

.category-icon-1 {
color: #5544bd;
background: #eeebff;
}

.category-icon-2 {
color: #1769b1;
background: #e7f3ff;
}

.category-icon-3 {
color: #b85b1d;
background: #fff0df;
}

.category-icon-4 {
color: #087b66;
background: #e0f8f0;
}

.category-icon-5 {
color: #b22f74;
background: #ffe8f3;
}

.category-card-text {
display: flex;
flex: 1;
flex-direction: column;
gap: 5px;
min-width: 0;
}

.category-card-text strong {
overflow-wrap: anywhere;
font-size: 13px;
font-weight: 800;
}

.category-card-text small {
color: #8790a4;
font-size: 11px;
}

.category-arrow {
flex-shrink: 0;
color: #a1a9ba;
font-size: 11px;
}

/* BOUTONS SOUS LES LISTES */

.section-bottom-action {
display: flex;
justify-content: center;
margin-top: 25px;
}

.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 44px;
padding: 12px 20px;
color: #435bc3;
background: #ffffff;
border: 1px solid #dce2fa;
border-radius: 12px;
font-size: 12px;
font-weight: 800;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-outline:hover {
background: #f2f4ff;
border-color: #bfcaff;
}

/* ÉTAT VIDE */

.home-empty-state {
padding: 35px 20px;
text-align: center;
background: #f8f9fd;
border: 1px dashed #d9deec;
border-radius: 17px;
}

.home-empty-state > i {
margin-bottom: 12px;
color: #7181d8;
font-size: 32px;
}

.home-empty-state h3 {
margin: 0 0 8px;
color: #25304c;
font-size: 16px;
}

.home-empty-state p {
margin: 0;
color: #7b8498;
font-size: 12px;
line-height: 1.7;
}

/* APPEL À L'ACTION FINAL */

.home-cta {
display: flex;
align-items: center;
gap: 18px;
padding: 25px;
margin-bottom: 35px;
background: linear-gradient(110deg, #f0f3ff, #f9faff);
border: 1px solid #e4e9ff;
border-radius: 19px;
}

.home-cta-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 54px;
height: 54px;
color: #5267ce;
background: #ffffff;
border-radius: 16px;
font-size: 23px;
}

.home-cta-content {
flex: 1;
}

.home-cta-content h2 {
margin: 0 0 7px;
color: #1d2a49;
font-family: "Manrope", sans-serif;
font-size: 17px;
font-weight: 800;
}

.home-cta-content p {
margin: 0;
color: #778198;
font-size: 12px;
line-height: 1.7;
}

.home-cta > .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
flex-shrink: 0;
padding: 13px 16px;
color: #ffffff;
background: #435bc3;
border-radius: 11px;
font-size: 11px;
font-weight: 800;
text-decoration: none;
}

/* RESPONSIVE */

@media (max-width: 1000px) {
.home-announcement {
grid-template-columns: 1fr 0.55fr;
padding: 28px;
}

.announcement-decoration {
    transform: scale(0.85);
}

.home-content-grid {
    gap: 14px;
}

.css-illustration {
    min-height: 160px;
    padding: 16px;
}

.illustration-title {
    font-size: 18px;
}

.home-card-body {
    padding: 15px;
}

}

@media (max-width: 760px) {
.home-announcement {
grid-template-columns: 1fr;
min-height: auto;
padding: 27px 23px;
border-radius: 20px;
}

.home-announcement h1 {
    max-width: 500px;
    font-size: 32px;
}

.announcement-decoration {
    display: none;
}

.announcement-benefits {
    gap: 12px;
}

.home-section {
    margin-bottom: 38px;
}

.section-heading {
    align-items: flex-start;
}

.section-heading h2 {
    font-size: 23px;
}

.section-heading p {
    max-width: 360px;
    font-size: 12px;
}

.section-more {
    margin-top: 20px;
    font-size: 11px;
}

.home-content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.home-content-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.css-illustration {
    min-height: 155px;
}

.illustration-title {
    font-size: 17px;
}

.categories-section {
    padding: 21px 16px;
}

.home-categories-grid {
    grid-template-columns: 1fr;
}

.home-cta {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px;
}

.home-cta-content {
    flex-basis: calc(100% - 75px);
}

.home-cta > .btn {
    width: 100%;
}

}

@media (max-width: 420px) {
.home-announcement {
padding: 23px 18px;
}

.home-announcement h1 {
    font-size: 28px;
    letter-spacing: -0.8px;
}

.home-announcement p {
    font-size: 13px;
}

.announcement-actions {
    flex-direction: column;
}

.announcement-actions .btn {
    width: 100%;
}

.announcement-benefits {
    flex-direction: column;
    gap: 9px;
}

.section-heading {
    flex-direction: column;
    gap: 8px;
}

.section-more {
    margin-top: 0;
}

.home-content-grid {
    grid-template-columns: 1fr;
}

.home-content-card:last-child:nth-child(odd) {
    grid-column: auto;
}

.css-illustration {
    min-height: 175px;
}

.illustration-title {
    font-size: 21px;
}

.home-card-body h3 {
    min-height: auto;
}

.home-cta-content {
    flex-basis: 100%;
}

}