/*ARTICLE*/
.articleBlog {
max-width: 840px;
width: 100%;
margin: 0 auto;
text-align: left;
padding: 40px 0;
}
.articleBlog h1 {
color: var(--noir);    
padding-bottom: 20px;
}
.articleBlog h2 {
padding-bottom: 20px;
}
.articleBlog p {
padding-bottom: 20px;
}
.descriptionBlog {
margin: 50px auto;
box-shadow: 1px 2px 1px lightgrey;
border: 1px solid var(--border);
background-color: var(--white);
border-radius: 6px;
padding: 40px;
}
/* BARRE DE RECHERCHE */
.erreurDoc {
max-width: 1000px;
margin: 0 auto;
padding: 100px 0
}
.search-section {
background: white;
padding: 40px;
border-radius: 6px;
box-shadow: 1px 2px 1px lightgrey;
margin-bottom: 50px;
}
.search-input {
width: 100%;
padding: 15px 20px;
border: 2px solid #e9ecef;
border-radius: 6px;
font-size: 16px;
outline: none;
transition: all 0.3s ease;
}
.search-input:focus {
border-color: var(--color);
box-shadow: 1px 2px 1px lightgrey;
}
/* SECTION D'ERREUR */
.error-section {
margin-bottom: 15px;
}
/* DETAILS/SUMMARY */
.errorCarteDescription {
background: white;
border-radius: 6px;
box-shadow: 1px 2px 1px lightgrey;
overflow: hidden;
transition: all 0.3s ease;
border-left: 4px solid #dee2e6;
}
.errorCarteDescription[open] {
border-left-color: #007bff;
}
/* Types d'erreur par couleur */
.warning { border-left-color: #ffc107; }
.error { border-left-color: #dc3545; }
.warning[open] { border-left-color: #e0a800; }
.error[open] { border-left-color: #b02a37; }

.errorAccordeon {
padding: 20px;
cursor: pointer;
display: flex;
align-items: center;
gap: 15px;
list-style: none;
user-select: none;
position: relative;
}
.errorAccordeon::-webkit-details-marker {
display: none;
}
.errorAccordeon:hover {
background-color: var(--carte);
}
.errorAccordeon:hover .click {
color: var(--color);
border-color: var(--color);
}
/* CODE D'ERREUR */
.error-code {
color: white;
padding: 8px 16px;
border-radius: 6px;
font-weight: 700;
font-size: 16px;
min-width: 70px;
text-align: center;
box-shadow: 1px 2px 1px lightgrey;
}
.warning .error-code {
background: #ffc107;
color: #212529;
}
.error .error-code {
background: #dc3545;
}
/* DESCRIPTION */
.error-description {
flex: 1;
}
.error-description h3 {
margin: 0 0 5px 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
.error-description p {
margin: 0;
color: #6c757d;
font-size: 14px;
}
/* ICÔNE */
.expand-icon {
width: 24px;
height: 24px;
color: #6c757d;
transition: transform 0.3s ease;
flex-shrink: 0;
}
details[open] .click {
transform: rotate(90deg);
}
/* CONTENU */
.error-content {
padding: 0 20px 20px 20px;
border-top: 1px solid #f1f3f4;
background: #fafbfc;
}
.restriction-section {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 15px;
margin: 15px 0;
border-radius: 0 6px 6px 0;
text-align: left;
}
.restriction-title {
font-weight: 700;
color: #856404;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.solution-section {
background: #d1ecf1;
border-left: 4px solid #17a2b8;
padding: 15px;
margin: 15px 0;
border-radius: 0 6px 6px 0;
text-align: left;
}
.solution-title {
font-weight: 700;
color: #0c5460;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.solution-steps {
color: #0c5460;
line-height: 1.6;
}
.infoCodeErreur {
max-width: 600px;
text-align: left;
margin: 0 auto;
padding: 20px;
}
.infoCodeErreur h2 {
text-align: center;
}
/* ANIMATIONS */
.error-section {
opacity: 0;
animation: fadeIn 0.6s ease-out forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hidden {
display: none !important;
}