/* ============================================================
   certifications.css
   Styles de la card certification — structure grid unifiée.
   Dépend de : common-ssr.css, common-cartouche.css
   ============================================================ */

/* Champ de recherche texte : visible uniquement en contexte search (classe .hidden sinon) */
.search__input__desk.hidden {
    display: none;
}


/* ============================================================
   CERT__CARD — BASE (mobile-first, sans media query)
   ============================================================ */

.cert__card {
    display: grid;
    min-height: 140px;
    overflow: hidden;
    border-radius: 6px;
    background: transparent linear-gradient(264deg, #e2eaff 0, #bbc7e5 100%) 0 0 no-repeat padding-box;
    grid-template-areas:
        ".      statut  statut ."
        ".      titre   titre  ."
        ".      examen  niveau ."
        "footer footer  footer footer"; 
    grid-template-columns:10px 1fr auto 10px;
	grid-template-rows: 40px 1fr 36px auto;	
}
	
.cert__card:has(.cert__statut:empty){
	grid-template-rows: 16px 1fr 36px auto;	
}


.cert__badge-img {
    grid-area: badge;
    display: none;
    background: #fff;
    align-items: center;
    justify-content: center;
}

.cert__badge-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Statut (badges NEW…) */
.cert__statut {
    grid-area: statut;
    display: flex;
    justify-content: flex-start;
    align-self: center;
	padding: 0;
	text-align: left;
}
.cert__statut:not(:has(.cartouche__badge)) {
    display:none;
}

/* Titre */
.cert__titre {
    grid-area: titre;
    color: #192963;
    font-weight: 700;
    font-size: 14px;
    margin: 0;
    padding: 0 40px 20px 0;
    min-height: 30px;
}

/* Référence examen */
.cert__examen {
    grid-area: examen;
    font-size: 12px;
    color: #2f2933;
    margin: 0;
    padding: 0;
    align-self: center;
}

/* Niveau de compétence */
.cert__niveau {
    grid-area: niveau;
    font-size: 12px;
    color: #2f2933;
    margin: 0;
    padding: 2px 10px 10px 6px;
    align-self: center;
    text-align: right;
    white-space: nowrap;
}

/* Footer */
.cert__footer {
    grid-area: footer;
    background: #ececec;
    display: grid;
	grid-template-columns: auto auto 1fr;
    align-items: start;
    align-self: center;
    gap: 12px;
    row-gap: 2px;
    padding: 8px 10px;
}

.cert__footer p {
    font-weight: 400;
    font-size: 12px;
    color: #272a36;
    padding: 0;
    margin: 0;
}


/* ---- max-width: 380px ---- */

@media (max-width: 380px) {
    .cert__examen,
    .cert__niveau,
    .cert__footer p {
        font-size: 11px;
    }
}

@media (max-width: 750px) {
	.cert__footer {grid-template-columns: auto 1fr 3fr;}
}

/* ============================================================
   MIN-WIDTH: 977px — DESKTOP
   ============================================================ */

@media (min-width: 977px) {

    /* Avec badge */
    .cert__card {
        grid-template-columns: 32px auto 1fr auto 26px;
        grid-template-areas: 
            ".      badge  titre  niveau ."
            ".      badge  titre  statut ."
            ".      badge  examen .      ."
			".      .      .      .      ."
            "footer footer footer footer footer";
		grid-template-rows: 45px auto auto 20px auto;
    }
	/* sans badge */
	.cert__card:not(.has-badge) {
		grid-template-columns: 32px 1fr auto 26px;
        grid-template-areas: ".      titre  niveau ."
							 ".      titre  statut ."
							 ".      examen .      ."
							 ".      .      .      ."
							 "footer footer footer footer";
	}
	
	
	.cert__card:has(.cert__badge-img:empty){
	}
	
	.cert__card:has(.cert__statut:empty){
		grid-template-rows: auto 0 auto 20px auto;	
	}


    /* Badge image — pleine hauteur body, fond blanc, ombre */
    .cert__badge-img {
        display: flex;
        box-shadow: 0.5px 0.5px 5px rgba(0, 0, 0, 0.5);
        border-radius: 0 0 6px 6px;
		width: 90px;
        height: 110px;
		margin: 0 20px 0 0;
    }
	.cert__badge-img:empty{display:none;}

    /* Statut */
    .cert__statut {
        align-self: start;
        padding: 0;
		justify-self:end;
    }
    /*.cert__statut:not(:has(.cartouche__badge)) {
        display:none;
    }*/

    /* Titre */
    .cert__titre {
        font-size: 16px;
		padding: 20px 60px 20px 0;
		min-height:80px;
    }

    /* Examen */
    .cert__examen {
        font-size: 12px;
        align-self: end;
        padding: 4px 20px 16px 0;
    }

    /* Niveau */
    .cert__niveau {
        font-size: 16px;
        align-self:start;
		padding:20px 0 6px!important;
        text-align: right;
    }
	.cert__statut:empty ~ .cert__niveau {align-self:start;padding-top:20px!important;}
	/*.cert__card:not(.has-badge) p.cert__niveau{align-self:start;padding-top:20px!important;}*/

    /* Footer */
    .cert__footer {
        padding: 12px 26px 12px 32px;
        gap: 36px;
    }
    .cert__footer p {
        font-size: 13px;
    }
}



@media (min-width: 1110px) {
    .cert__footer p {font-size: 14px;}
}

@media (min-width: 1300px) {
	.cert__card {grid-template-rows: 50px auto auto 20px auto;}

    .cert__titre {font-size: 18px;}
    .cert__examen {font-size: 13px;}
}

@media (min-width: 1450px) {
    .cert__footer p {font-size: 16px;}
}