/* interview-questions.css */
.breadcrumb-nav {
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
padding: 0.875rem 0;
font-size: 0.875rem;
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: 0.5rem;
}
.breadcrumb-item {
display: flex;
align-items: center;
color: #64748b;
}
.breadcrumb-item a {
display: flex;
align-items: center;
gap: 0.375rem;
color: #3b4fa0;
text-decoration: none;
transition: color 0.2s ease;
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.breadcrumb-item a:hover {
color: #1b2a6b;
background: #f2f3f9;
}
.breadcrumb-item.active {
color: #1e293b;
font-weight: 500;
}
.breadcrumb-item.active span {
padding: 0.25rem 0.5rem;
}
.breadcrumb-item:not(:last-child)::after {
content: '/';
margin-left: 0.5rem;
color: #cbd5e1;
font-weight: 300;
}
.breadcrumb-item i {
font-size: 0.875rem;
}
@media (max-width: 768px) {
.breadcrumb-nav {
padding: 0.625rem 0;
font-size: 0.8125rem;
}
.breadcrumb {
gap: 0.375rem;
}
.breadcrumb-item a,
.breadcrumb-item.active span {
padding: 0.125rem 0.375rem;
}
.breadcrumb-item:not(:last-child)::after {
margin-left: 0.375rem;
}
}
.interview-hero {
background: linear-gradient(135deg, #0f172a 0%, #1b2a6b 50%, #3b4fa0 100%);
padding: 1.75rem 0;
padding-bottom: 3rem;
color: white;
text-align: center;
position: relative;
z-index: 10;
}
.interview-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}
.interview-hero .container {
position: relative;
z-index: 1;
}
.interview-hero h1 {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.375rem;
letter-spacing: -0.025em;
}
.hero-subtitle {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.95);
font-weight: 500;
}
.hero-subtitle i {
opacity: 0.8;
}
.hero-entreprise {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.hero-logo {
width: 56px;
height: 56px;
border-radius: 4px;
background: white;
object-fit: contain;
padding: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.hero-logo-placeholder {
width: 56px;
height: 56px;
border-radius: 4px;
background: white;
color: #1e3a5f;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.hero-info {
text-align: left;
}
.hero-info h1 {
font-size: 1.5rem;
margin-bottom: 0.25rem;
line-height: 1.2;
}
.hero-info .hero-subtitle {
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.hero-info .hero-subtitle span {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.search-box {
max-width: 500px;
margin: 1.25rem auto 0;
position: relative;
background: white;
border-radius: 6px;
display: flex;
align-items: center;
padding: 0.25rem 1rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
z-index: 1000;
}
.search-box i {
color: #6b7280;
margin-right: 0.5rem;
}
.search-box input {
flex: 1;
border: none;
outline: none;
padding: 0.875rem 0;
font-size: 1rem;
background: transparent;
}
.search-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
margin-top: 0.5rem;
overflow: hidden;
z-index: 1001;
display: none;
}
.search-suggestions.show {
display: block;
}
.suggestion-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.875rem 1.25rem;
color: #1f2937;
text-decoration: none;
transition: all 0.2s ease;
gap: 0.75rem;
}
.suggestion-item i {
color: #6b7280;
font-size: 0.875rem;
}
.suggestion-item .suggestion-name {
flex: 1;
font-weight: 500;
}
.suggestion-item:hover,
.suggestion-item.focused {
background: #f3f4f6;
}
.suggestion-item.focused {
background: #e0e7ff;
}
.suggestion-count {
font-size: 0.75rem;
color: #6b7280;
background: #e5e7eb;
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.suggestion-logo {
width: 32px;
height: 32px;
object-fit: contain;
border-radius: 6px;
background: #f3f4f6;
flex-shrink: 0;
}
.suggestion-logo-placeholder {
width: 32px;
height: 32px;
border-radius: 6px;
background: linear-gradient(135deg, #3b4fa0, #1b2a6b);
color: white;
font-size: 0.7rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.suggestion-empty {
padding: 1rem 1.25rem;
color: #6b7280;
font-style: italic;
text-align: center;
}
.category-filters {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e5e7eb;
}
.filter-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
border: 2px solid #e5e7eb;
background: white;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
color: #4b5563;
cursor: pointer;
transition: all 0.2s;
}
.filter-btn:hover {
border-color: var(--cat-color, #1b2a6b);
color: var(--cat-color, #1b2a6b);
}
.filter-btn.active {
background: var(--cat-color, #1b2a6b);
border-color: var(--cat-color, #1b2a6b);
color: white;
}
.section-questions {
padding: 3rem 0;
}
.questions-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.question-card {
background: white;
border-radius: 6px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
border: 1px solid #e5e7eb;
transition: all 0.2s;
}
.question-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.question-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.question-number {
font-size: 0.75rem;
font-weight: 600;
color: #9ca3af;
}
.question-category {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
color: white;
}
.question-difficulty {
margin-left: auto;
display: flex;
gap: 0.125rem;
}
.question-difficulty i {
font-size: 0.625rem;
color: #d1d5db;
}
.question-difficulty i.filled {
color: #e8a33d;
}
.question-text {
font-size: 1.125rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 1rem;
line-height: 1.5;
}
.question-answer {
margin-top: 1rem;
}
.toggle-answer {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #fef3c7;
border: none;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
color: #92400e;
cursor: pointer;
transition: all 0.2s;
}
.toggle-answer:hover {
background: #fde68a;
}
.toggle-answer.active {
background: #e8a33d;
color: white;
}
.toggle-answer.active:hover {
background: #c9821f;
}
.answer-content {
margin-top: 1rem;
padding: 1rem;
background: #fefce8;
border-radius: 8px;
border-left: 3px solid #e8a33d;
}
.answer-content p {
color: #713f12;
line-height: 1.6;
margin: 0;
}
.question-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #f3f4f6;
}
.question-poste {
font-size: 0.8125rem;
color: #6b7280;
display: flex;
align-items: center;
gap: 0.375rem;
}
.question-votes {
display: flex;
gap: 0.5rem;
}
.vote-btn {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 0.75rem;
border: 1px solid #e5e7eb;
background: white;
border-radius: 8px;
font-size: 0.8125rem;
color: #6b7280;
cursor: pointer;
transition: all 0.2s;
}
.vote-btn:hover {
background: #f3f4f6;
}
.vote-btn.voted {
background: #e9ebf5;
border-color: #1b2a6b;
color: #1b2a6b;
}
.contribute-cta {
display: flex;
align-items: center;
gap: 1.5rem;
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border: 2px dashed #10b981;
border-radius: 6px;
padding: 2rem;
margin-top: 2rem;
}
.contribute-icon {
width: 64px;
height: 64px;
background: #10b981;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contribute-icon i {
font-size: 1.75rem;
color: white;
}
.contribute-text {
flex: 1;
}
.contribute-text h3 {
font-size: 1.125rem;
font-weight: 600;
color: #065f46;
margin-bottom: 0.375rem;
}
.contribute-text p {
font-size: 0.9375rem;
color: #047857;
margin: 0;
}
.section-popular {
padding: 3rem 0;
}
.section-popular h2 {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.section-popular h2 i {
color: #1b2a6b;
}
.entreprises-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
.entreprise-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: white;
border: 1px solid #e5e7eb;
border-radius: 4px;
text-decoration: none;
transition: all 0.2s;
}
.entreprise-card:hover {
border-color: #1b2a6b;
box-shadow: 0 4px 12px rgba(27, 42, 107, 0.15);
}
.ent-logo {
width: 48px;
height: 48px;
border-radius: 4px;
object-fit: contain;
background: #f9fafb;
}
.ent-logo-placeholder {
width: 48px;
height: 48px;
border-radius: 4px;
background: linear-gradient(135deg, #1b2a6b, #12193f);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem;
}
.ent-info {
flex: 1;
}
.ent-info h3 {
font-size: 1rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.25rem;
}
.ent-count {
font-size: 0.8125rem;
color: #6b7280;
}
.entreprise-card i.fa-chevron-right {
color: #9ca3af;
transition: transform 0.2s;
}
.entreprise-card:hover i.fa-chevron-right {
transform: translateX(3px);
color: #1b2a6b;
}
.section-tips {
padding: 3rem 0;
background: #f9fafb;
}
.section-tips h2 {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.section-tips h2 i {
color: #e8a33d;
}
.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.tip-card {
background: white;
border-radius: 6px;
padding: 1.5rem;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.tip-icon {
width: 56px;
height: 56px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.tip-icon i {
font-size: 1.5rem;
color: white;
}
.tip-card h3 {
font-size: 1rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.5rem;
}
.tip-card p {
font-size: 0.875rem;
color: #6b7280;
line-height: 1.5;
margin: 0;
}
.modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.modal.show {
opacity: 1;
visibility: visible;
}
.modal-content {
background: white;
border-radius: 6px;
width: 100%;
max-width: 540px;
max-height: 90vh;
overflow-y: auto;
transform: scale(0.95);
transition: transform 0.3s;
}
.modal.show .modal-content {
transform: scale(1);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #e5e7eb;
}
.modal-header h3 {
font-size: 1.125rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
color: #1f2937;
}
.modal-header h3 i {
color: #10b981;
}
.modal-close {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: #f3f4f6;
font-size: 1.25rem;
color: #6b7280;
cursor: pointer;
transition: all 0.2s;
}
.modal-close:hover {
background: #e5e7eb;
}
.contribute-form {
padding: 1.5rem;
}
.form-group {
margin-bottom: 1.25rem;
}
.form-group label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
margin-bottom: 0.5rem;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 0.9375rem;
transition: all 0.2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: #1b2a6b;
box-shadow: 0 0 0 3px rgba(27, 42, 107, 0.1);
}
.form-group textarea {
min-height: 100px;
resize: vertical;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.btn-full {
width: 100%;
justify-content: center;
}
@media (prefers-color-scheme: dark) {
.search-box {
background: #1f2937;
}
.search-box input {
color: white;
}
.search-suggestions {
background: #1f2937;
}
.suggestion-item {
color: white;
}
.suggestion-item:hover {
background: #374151;
}
.filter-btn {
background: #1f2937;
border-color: #374151;
color: #d1d5db;
}
.question-card {
background: #1f2937;
border-color: #374151;
}
.question-text {
color: #f3f4f6;
}
.question-footer {
border-color: #374151;
}
.vote-btn {
background: #1f2937;
border-color: #374151;
color: #d1d5db;
}
.contribute-cta {
background: linear-gradient(135deg, #064e3b, #065f46);
border-color: #10b981;
}
.contribute-text h3 {
color: #a7f3d0;
}
.contribute-text p {
color: #6ee7b7;
}
.entreprise-card {
background: #1f2937;
border-color: #374151;
}
.ent-info h3 {
color: #f3f4f6;
}
.section-tips {
background: #111827;
}
.tip-card {
background: #1f2937;
}
.tip-card h3 {
color: #f3f4f6;
}
.modal-content {
background: #1f2937;
}
.modal-header {
border-color: #374151;
}
.modal-header h3 {
color: #f3f4f6;
}
.form-group label {
color: #d1d5db;
}
.form-group input,
.form-group textarea,
.form-group select {
background: #111827;
border-color: #374151;
color: white;
}
}
@media (max-width: 768px) {
.interview-hero {
padding: 1.25rem 0;
padding-bottom: 2rem;
}
.interview-hero h1 {
font-size: 1.25rem;
}
.hero-subtitle {
font-size: 0.8rem;
}
.hero-entreprise {
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.hero-logo,
.hero-logo-placeholder {
width: 48px;
height: 48px;
}
.hero-info {
text-align: center;
}
.hero-info h1 {
font-size: 1.25rem;
}
.hero-info .hero-subtitle {
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.search-box {
max-width: 100%;
margin: 1rem auto 0;
border-radius: 4px;
padding: 0.125rem 0.75rem;
}
.search-box input {
padding: 0.75rem 0;
font-size: 0.95rem;
}
.category-filters {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 0.75rem;
margin-bottom: 1.5rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
gap: 0.5rem;
}
.category-filters::-webkit-scrollbar {
display: none;
}
.filter-btn {
flex-shrink: 0;
padding: 0.5rem 0.875rem;
font-size: 0.8rem;
}
.section-questions {
padding: 2rem 0;
}
.questions-list {
gap: 1rem;
}
.question-card {
padding: 1.125rem;
border-radius: 6px;
}
.question-header {
flex-wrap: wrap;
gap: 0.5rem;
}
.question-category {
padding: 0.25rem 0.625rem;
font-size: 0.7rem;
}
.question-difficulty {
margin-left: 0;
width: 100%;
justify-content: flex-end;
margin-top: 0.25rem;
}
.question-text {
font-size: 1rem;
margin-bottom: 0.875rem;
line-height: 1.5;
}
.toggle-answer {
padding: 0.5rem 0.875rem;
font-size: 0.8rem;
width: 100%;
justify-content: center;
}
.answer-content {
padding: 0.875rem;
margin-top: 0.875rem;
}
.answer-content p {
font-size: 0.9rem;
line-height: 1.6;
}
.question-footer {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
padding-top: 0.875rem;
margin-top: 0.875rem;
}
.question-poste {
font-size: 0.75rem;
}
.question-votes {
width: 100%;
justify-content: flex-start;
}
.vote-btn {
padding: 0.375rem 0.625rem;
font-size: 0.75rem;
flex: 1;
justify-content: center;
}
.contribute-cta {
flex-direction: column;
text-align: center;
padding: 1.5rem 1.25rem;
gap: 1rem;
margin-top: 1.5rem;
}
.contribute-icon {
width: 56px;
height: 56px;
}
.contribute-icon i {
font-size: 1.5rem;
}
.contribute-text h3 {
font-size: 1rem;
}
.contribute-text p {
font-size: 0.875rem;
}
.contribute-cta .btn {
width: 100%;
justify-content: center;
}
.entreprises-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.entreprise-card {
padding: 1rem 0.75rem;
}
.entreprise-card .ent-logo,
.ent-logo-placeholder {
width: 44px;
height: 44px;
}
.ent-info h3 {
font-size: 0.875rem;
}
.ent-count {
font-size: 0.75rem;
}
.form-row {
grid-template-columns: 1fr;
}
.modal-content {
margin: 0.75rem;
border-radius: 6px;
max-height: calc(100vh - 1.5rem);
}
.modal-header {
padding: 1rem 1.25rem;
}
.modal-header h3 {
font-size: 1rem;
}
.contribute-form {
padding: 1.25rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group input,
.form-group textarea,
.form-group select {
padding: 0.625rem 0.875rem;
font-size: 0.9rem;
}
}
.global-stats {
background: var(--bg-secondary, #f8fafc);
padding: 2rem 0;
border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: 800px;
margin: 0 auto;
}
.stat-card {
text-align: center;
padding: 1.5rem;
background: white;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
[data-theme="dark"] .stat-card {
background: #1f2937;
}
.stat-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #1b2a6b, #3b4fa0);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
margin: 0 auto 0.75rem;
}
.stat-value {
font-size: 2rem;
font-weight: 700;
color: var(--text-primary, #1e293b);
line-height: 1.2;
}
.stat-label {
font-size: 0.875rem;
color: var(--text-secondary, #64748b);
margin-top: 0.25rem;
}
.section-intro {
color: var(--text-secondary, #64748b);
margin-bottom: 2rem;
font-size: 1.1rem;
}
.section-categories {
padding: 4rem 0;
background: var(--bg-secondary, #f8fafc);
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.category-explain-card {
background: white;
border-radius: 6px;
padding: 1.5rem;
border-left: 4px solid var(--cat-color, #3b4fa0);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: transform 0.2s, box-shadow 0.2s;
}
.category-explain-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
[data-theme="dark"] .category-explain-card {
background: #1f2937;
}
.category-explain-card .cat-icon {
width: 48px;
height: 48px;
border-radius: 4px;
background: var(--cat-color, #3b4fa0);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.category-explain-card h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary, #1e293b);
margin-bottom: 0.5rem;
}
.category-explain-card p {
color: var(--text-secondary, #64748b);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.category-explain-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.category-explain-card ul li {
font-size: 0.85rem;
color: var(--text-secondary, #64748b);
padding: 0.35rem 0;
padding-left: 1.25rem;
position: relative;
font-style: italic;
}
.category-explain-card ul li::before {
content: '"';
position: absolute;
left: 0;
color: var(--cat-color, #3b4fa0);
font-weight: bold;
}
.related-section {
margin-top: 3rem;
padding: 2rem;
background: var(--bg-secondary, #f8fafc);
border-radius: 6px;
border: 1px solid var(--border-color, #e2e8f0);
}
[data-theme="dark"] .related-section {
background: #1f2937;
border-color: #374151;
}
.related-section h2 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary, #1e293b);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.related-section h2 i {
color: #1b2a6b;
}
.section-subtitle {
color: var(--text-secondary, #64748b);
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.offres-mini-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.offre-mini-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
background: white;
border-radius: 4px;
text-decoration: none;
color: inherit;
transition: all 0.2s;
border: 1px solid var(--border-color, #e2e8f0);
}
[data-theme="dark"] .offre-mini-card {
background: #111827;
border-color: #374151;
}
.offre-mini-card:hover {
border-color: #1b2a6b;
box-shadow: 0 4px 12px rgba(27, 42, 107, 0.1);
}
.offre-mini-card h4 {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary, #1e293b);
margin-bottom: 0.25rem;
}
.offre-mini-meta {
display: flex;
gap: 0.75rem;
font-size: 0.8rem;
color: var(--text-secondary, #64748b);
}
.offre-mini-meta .contrat-badge {
background: #e9ebf5;
color: #12193f;
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-weight: 500;
}
[data-theme="dark"] .offre-mini-meta .contrat-badge {
background: #12193f;
color: #a8b3e0;
}
.offre-mini-card i.fa-arrow-right {
color: #1b2a6b;
opacity: 0;
transition: opacity 0.2s;
}
.offre-mini-card:hover i.fa-arrow-right {
opacity: 1;
}
.similar-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 1rem;
}
.similar-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1rem;
background: white;
border-radius: 4px;
text-decoration: none;
transition: all 0.2s;
border: 1px solid var(--border-color, #e2e8f0);
}
[data-theme="dark"] .similar-card {
background: #111827;
border-color: #374151;
}
.similar-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
border-color: #1b2a6b;
}
.similar-logo {
width: 48px;
height: 48px;
border-radius: 8px;
object-fit: contain;
background: #f8fafc;
padding: 4px;
margin-bottom: 0.5rem;
}
.similar-logo-placeholder {
width: 48px;
height: 48px;
border-radius: 8px;
background: linear-gradient(135deg, #1b2a6b, #3b4fa0);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.similar-name {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary, #1e293b);
margin-bottom: 0.25rem;
}
.similar-count {
font-size: 0.75rem;
color: var(--text-secondary, #64748b);
}
.tips-entreprise {
background: linear-gradient(135deg, #f2f3f9 0%, #f0fdf4 100%);
}
[data-theme="dark"] .tips-entreprise {
background: linear-gradient(135deg, #1e3a5f 0%, #14532d 100%);
}
.tips-content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.tip-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.tip-number {
width: 32px;
height: 32px;
border-radius: 50%;
background: #1b2a6b;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex-shrink: 0;
}
.tip-text h4 {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary, #1e293b);
margin-bottom: 0.25rem;
}
.tip-text p {
font-size: 0.9rem;
color: var(--text-secondary, #64748b);
line-height: 1.6;
}
.btn-outline {
background: transparent;
border: 2px solid #1b2a6b;
color: #1b2a6b;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.2s;
}
.btn-outline:hover {
background: #1b2a6b;
color: white;
}
.btn-full {
width: 100%;
}
.entreprise-card .ent-secteur {
display: block;
font-size: 0.75rem;
color: var(--text-secondary, #94a3b8);
margin-top: 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.entreprise-card .ent-count i {
margin-right: 0.25rem;
font-size: 0.7rem;
}
@keyframes animateIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.question-card,
.entreprise-card,
.category-explain-card,
.stat-card {
opacity: 0;
transform: translateY(20px);
}
.animate-in {
animation: animateIn 0.5s ease-out forwards;
}
.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }
.question-card:nth-child(1) { animation-delay: 0.05s; }
.question-card:nth-child(2) { animation-delay: 0.1s; }
.question-card:nth-child(3) { animation-delay: 0.15s; }
.question-card:nth-child(4) { animation-delay: 0.2s; }
.question-card:nth-child(5) { animation-delay: 0.25s; }
.entreprise-card:nth-child(1) { animation-delay: 0.02s; }
.entreprise-card:nth-child(2) { animation-delay: 0.04s; }
.entreprise-card:nth-child(3) { animation-delay: 0.06s; }
.entreprise-card:nth-child(4) { animation-delay: 0.08s; }
.entreprise-card:nth-child(5) { animation-delay: 0.1s; }
.entreprise-card:nth-child(6) { animation-delay: 0.12s; }
.hidden {
display: none !important;
}
.show {
display: block !important;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.3s ease-out forwards;
}
@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}
to {
opacity: 1;
max-height: 2000px;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
}
.answer-content {
overflow: hidden;
transition: all 0.3s ease-out;
}
.answer-content:not(.hidden) {
animation: slideDown 0.3s ease-out forwards;
}
@keyframes voteSuccess {
0% { transform: scale(1); }
50% { transform: scale(1.2); color: #22c55e; }
100% { transform: scale(1); }
}
.vote-success {
animation: voteSuccess 0.4s ease-out;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(27, 42, 107, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(27, 42, 107, 0); }
100% { box-shadow: 0 0 0 0 rgba(27, 42, 107, 0); }
}
.btn-pulse {
animation: pulse 2s infinite;
}
@keyframes shimmer {
0% { background-position: -1000px 0; }
100% { background-position: 1000px 0; }
}
.skeleton {
background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
background-size: 1000px 100%;
animation: shimmer 2s infinite linear;
border-radius: 4px;
}
.toggle-answer:focus-visible,
.vote-btn:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible {
outline: 3px solid rgba(27, 42, 107, 0.5);
outline-offset: 2px;
}
.question-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.question-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.suggestion-item {
transition: background-color 0.15s ease, padding-left 0.15s ease;
}
.suggestion-item:hover,
.suggestion-item.focused {
background: #f1f5f9;
padding-left: 1.25rem;
}
.suggestion-item.focused {
background: #e0e7ff;
}
.vote-btn {
position: relative;
overflow: hidden;
}
.vote-btn::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle, rgba(27, 42, 107, 0.2) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s;
}
.vote-btn:hover::after {
opacity: 1;
}
.vote-btn.voted {
background: linear-gradient(135deg, #3b4fa0 0%, #1b2a6b 100%);
color: white;
border-color: transparent;
}
.vote-btn.voted i {
color: white;
}
.modal-overlay {
backdrop-filter: blur(4px);
transition: opacity 0.3s ease;
}
.modal-overlay.show .modal-content {
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: scale(0.95) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.entreprises-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
}
.entreprise-card {
background: white;
border-radius: 4px;
padding: 1.25rem;
text-decoration: none;
border: 1px solid #e2e8f0;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.75rem;
}
.entreprise-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
border-color: #3b4fa0;
}
.entreprise-card .ent-logo {
width: 56px;
height: 56px;
border-radius: 4px;
object-fit: contain;
background: #f8fafc;
padding: 8px;
}
.entreprise-card .ent-name {
font-weight: 600;
color: #1e293b;
font-size: 0.95rem;
line-height: 1.3;
}
.entreprise-card .ent-count {
font-size: 0.8rem;
color: #64748b;
display: flex;
align-items: center;
gap: 0.25rem;
}
.entreprise-card .ent-count i {
color: #3b4fa0;
}
@media (max-width: 1200px) {
.entreprises-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
}
@media (max-width: 992px) {
.questions-hero h1 {
font-size: 2rem;
}
.stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.stat-card {
padding: 1.25rem 1rem;
}
.stat-value {
font-size: 1.75rem;
}
.categories-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.tips-grid {
grid-template-columns: repeat(2, 1fr);
}
.entreprises-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.related-section {
padding: 1.5rem;
margin-top: 2rem;
}
.section-popular,
.section-categories,
.section-tips {
padding: 2.5rem 0;
}
.section-popular h2,
.section-categories h2,
.section-tips h2 {
font-size: 1.35rem;
}
}
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.stat-card {
padding: 1rem 0.75rem;
}
.stat-icon {
width: 40px;
height: 40px;
font-size: 1rem;
margin-bottom: 0.5rem;
}
.stat-value {
font-size: 1.35rem;
}
.stat-label {
font-size: 0.7rem;
}
.categories-grid {
grid-template-columns: 1fr;
gap: 0.875rem;
}
.category-explain-card {
padding: 1.25rem;
}
.category-explain-card .cat-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.category-explain-card h3 {
font-size: 1rem;
}
.category-explain-card p {
font-size: 0.85rem;
}
.tips-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.tip-card {
padding: 1.25rem;
}
.tip-icon {
width: 48px;
height: 48px;
}
.tip-icon i {
font-size: 1.25rem;
}
.similar-grid {
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.similar-card {
padding: 0.875rem 0.5rem;
}
.similar-logo,
.similar-logo-placeholder {
width: 40px;
height: 40px;
}
.similar-name {
font-size: 0.75rem;
}
.similar-count {
font-size: 0.7rem;
}
.tip-item {
flex-direction: row;
gap: 0.75rem;
align-items: flex-start;
}
.tip-number {
width: 28px;
height: 28px;
font-size: 0.875rem;
}
.tip-text h4 {
font-size: 0.9rem;
}
.tip-text p {
font-size: 0.8rem;
}
.questions-hero {
padding: 2rem 1rem;
}
.questions-hero h1 {
font-size: 1.75rem;
}
.questions-hero p {
font-size: 1rem;
}
.search-box input {
font-size: 1rem;
padding: 0.875rem 1rem 0.875rem 2.75rem;
}
.question-card {
padding: 1.25rem;
}
.question-title {
font-size: 1rem;
}
.toggle-answer {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
.entreprises-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.entreprise-card {
padding: 1rem;
}
.entreprise-card .ent-logo {
width: 48px;
height: 48px;
}
.modal-content {
margin: 1rem;
max-height: calc(100vh - 2rem);
}
.vote-actions {
flex-wrap: wrap;
}
.related-section {
padding: 1.25rem;
border-radius: 6px;
margin-top: 1.5rem;
}
.related-section h2 {
font-size: 1.1rem;
margin-bottom: 0.375rem;
}
.section-subtitle {
font-size: 0.8rem;
margin-bottom: 1rem;
}
.offres-mini-list {
gap: 0.625rem;
}
.offre-mini-card {
padding: 0.875rem 1rem;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.offre-mini-card h4 {
font-size: 0.875rem;
}
.offre-mini-meta {
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.75rem;
}
.offre-mini-card i.fa-arrow-right {
display: none;
}
.btn-outline {
padding: 0.625rem 1rem;
font-size: 0.85rem;
}
.section-popular h2,
.section-categories h2,
.section-tips h2 {
font-size: 1.2rem;
gap: 0.5rem;
}
.section-intro {
font-size: 0.95rem;
margin-bottom: 1.5rem;
}
.section-popular,
.section-categories,
.section-tips {
padding: 2rem 0;
}
.tips-entreprise {
padding: 1.25rem !important;
}
.tips-content {
gap: 0.875rem;
}
}
@media (max-width: 480px) {
.questions-hero h1 {
font-size: 1.5rem;
}
.interview-hero {
padding: 1.25rem 0;
padding-bottom: 2rem;
}
.hero-entreprise {
gap: 0.625rem;
}
.hero-logo,
.hero-logo-placeholder {
width: 44px;
height: 44px;
border-radius: 4px;
font-size: 1.25rem;
}
.hero-info h1 {
font-size: 1.1rem;
line-height: 1.3;
}
.hero-info .hero-subtitle {
font-size: 0.75rem;
gap: 0.375rem;
}
.hero-info .hero-subtitle span {
font-size: 0.7rem;
}
.global-stats {
padding: 1.5rem 0;
}
.stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.stat-card {
padding: 0.75rem 0.5rem;
border-radius: 4px;
}
.stat-icon {
width: 36px;
height: 36px;
font-size: 0.875rem;
}
.stat-value {
font-size: 1.15rem;
}
.stat-label {
font-size: 0.6rem;
letter-spacing: 0;
}
.entreprises-grid {
grid-template-columns: 1fr 1fr;
gap: 0.625rem;
}
.entreprise-card {
padding: 0.875rem 0.625rem;
border-radius: 4px;
}
.entreprise-card .ent-logo,
.ent-logo-placeholder {
width: 40px;
height: 40px;
border-radius: 8px;
}
.entreprise-card .ent-name,
.ent-info h3 {
font-size: 0.8rem;
}
.entreprise-card .ent-count,
.ent-count {
font-size: 0.7rem;
}
.question-card {
padding: 1rem;
border-radius: 4px;
}
.question-text {
font-size: 0.95rem;
}
.question-meta {
flex-wrap: wrap;
gap: 0.5rem;
}
.question-number {
font-size: 0.7rem;
}
.category-filters {
gap: 0.375rem;
}
.filter-btn {
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
border-radius: 6px;
}
.filter-btn i {
font-size: 0.7rem;
}
.category-explain-card {
padding: 1rem;
border-radius: 4px;
}
.category-explain-card .cat-icon {
width: 36px;
height: 36px;
border-radius: 4px;
font-size: 0.9rem;
margin-bottom: 0.75rem;
}
.category-explain-card h3 {
font-size: 0.95rem;
}
.category-explain-card p {
font-size: 0.8rem;
margin-bottom: 0.75rem;
}
.category-explain-card ul li {
font-size: 0.75rem;
padding: 0.25rem 0;
}
.similar-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.similar-card {
padding: 0.75rem 0.5rem;
border-radius: 4px;
}
.similar-logo,
.similar-logo-placeholder {
width: 36px;
height: 36px;
border-radius: 8px;
}
.similar-name {
font-size: 0.7rem;
}
.contribute-cta {
padding: 1.25rem 1rem;
border-radius: 6px;
}
.contribute-icon {
width: 48px;
height: 48px;
}
.contribute-icon i {
font-size: 1.25rem;
}
.contribute-text h3 {
font-size: 0.9rem;
}
.contribute-text p {
font-size: 0.8rem;
}
.tip-card {
padding: 1rem;
border-radius: 4px;
}
.tip-icon {
width: 44px;
height: 44px;
border-radius: 4px;
}
.tip-icon i {
font-size: 1.1rem;
}
.tip-card h3 {
font-size: 0.9rem;
}
.tip-card p {
font-size: 0.8rem;
}
.modal-content {
margin: 0.5rem;
border-radius: 6px;
max-height: calc(100vh - 1rem);
}
.modal-header {
padding: 0.875rem 1rem;
}
.modal-header h3 {
font-size: 0.95rem;
}
.modal-close {
width: 28px;
height: 28px;
font-size: 1rem;
}
.contribute-form {
padding: 1rem;
}
.form-group label {
font-size: 0.8rem;
}
.form-group input,
.form-group textarea,
.form-group select {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
border-radius: 8px;
}
.btn-primary,
.btn-outline {
padding: 0.625rem 1.25rem;
font-size: 0.85rem;
border-radius: 8px;
}
.interview-hero {
padding: 1rem 0;
padding-bottom: 1.75rem;
}
.interview-hero h1 {
font-size: 1.15rem;
}
.hero-subtitle {
font-size: 0.75rem;
}
.hero-logo,
.hero-logo-placeholder {
width: 44px;
height: 44px;
border-radius: 4px;
}
.search-box {
border-radius: 4px;
}
.search-box input {
font-size: 0.9rem;
padding: 0.625rem 0;
}
.section-popular h2,
.section-categories h2,
.section-tips h2 {
font-size: 1.1rem;
}
.section-intro {
font-size: 0.875rem;
}
.section-popular,
.section-categories,
.section-tips {
padding: 1.5rem 0;
}
}
@media (max-width: 360px) {
.interview-hero h1 {
font-size: 1.05rem;
}
.hero-subtitle {
font-size: 0.7rem;
}
.interview-hero {
padding: 1rem 0;
padding-bottom: 1.5rem;
}
.hero-entreprise {
gap: 0.5rem;
}
.hero-logo,
.hero-logo-placeholder {
width: 40px;
height: 40px;
border-radius: 8px;
font-size: 1.1rem;
}
.hero-info h1 {
font-size: 1rem;
}
.hero-info .hero-subtitle {
font-size: 0.65rem;
}
.hero-info .hero-subtitle span {
font-size: 0.6rem;
gap: 0.125rem;
}
.search-box input {
font-size: 0.85rem;
}
.stats-grid {
gap: 0.375rem;
}
.stat-card {
padding: 0.625rem 0.375rem;
}
.stat-icon {
width: 32px;
height: 32px;
font-size: 0.75rem;
}
.stat-value {
font-size: 1rem;
}
.stat-label {
font-size: 0.55rem;
}
.filter-btn {
padding: 0.3rem 0.625rem;
font-size: 0.7rem;
}
.question-card {
padding: 0.875rem;
}
.question-text {
font-size: 0.9rem;
}
.entreprises-grid {
gap: 0.5rem;
}
.entreprise-card {
padding: 0.75rem 0.5rem;
}
.entreprise-card .ent-logo,
.ent-logo-placeholder {
width: 36px;
height: 36px;
}
.entreprise-card .ent-name,
.ent-info h3 {
font-size: 0.75rem;
}
.category-explain-card {
padding: 0.875rem;
}
.similar-card {
padding: 0.625rem;
}
.similar-logo,
.similar-logo-placeholder {
width: 32px;
height: 32px;
}
.similar-name {
font-size: 0.65rem;
}
}
@media print {
.questions-hero,
.search-box,
.vote-actions,
.toggle-answer,
.contribute-cta,
.modal-overlay {
display: none !important;
}
.answer-content {
display: block !important;
max-height: none !important;
}
.question-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
}
.seo-intro-section {
background: #f8fafc;
padding: 2rem 0;
border-bottom: 1px solid #e2e8f0;
}
.seo-intro-content {
max-width: 900px;
margin: 0 auto;
line-height: 1.8;
}
.seo-intro-content h2 {
font-size: 1.5rem;
font-weight: 700;
color: #1e3a5f;
margin-bottom: 1rem;
}
.seo-intro-content p {
font-size: 1rem;
color: #475569;
margin-bottom: 1rem;
}
.seo-intro-content strong {
color: #1b2a6b;
font-weight: 600;
}
.section-title-h2 {
font-size: 1.75rem;
font-weight: 700;
color: #1e3a5f;
margin-bottom: 1.5rem;
text-align: center;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.seo-footer-content {
margin-top: 3rem;
padding-top: 3rem;
border-top: 2px solid #e5e7eb;
}
.seo-footer-content > h2 {
font-size: 1.5rem;
font-weight: 700;
color: #1e3a5f;
margin-bottom: 2rem;
text-align: center;
}
.seo-footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.seo-footer-block h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1b2a6b;
margin-bottom: 0.75rem;
}
.seo-footer-block p {
color: #475569;
line-height: 1.7;
font-size: 0.9375rem;
}
.seo-footer-links {
background: #f8fafc;
padding: 2rem;
border-radius: 4px;
margin-top: 2rem;
}
.seo-footer-links h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1e3a5f;
margin-bottom: 1rem;
}
.seo-footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.seo-footer-links li {
padding: 0.75rem 0;
border-bottom: 1px solid #e2e8f0;
color: #475569;
line-height: 1.6;
}
.seo-footer-links li:last-child {
border-bottom: none;
}
.seo-footer-links strong {
color: #1b2a6b;
font-weight: 600;
}
.seo-main-content {
background: #f8fafc;
padding: 3rem 0;
margin-top: 3rem;
}
.seo-main-grid {
display: grid;
gap: 2.5rem;
}
.seo-main-block h2 {
font-size: 1.5rem;
font-weight: 700;
color: #1e3a5f;
margin-bottom: 1rem;
}
.seo-main-block p {
color: #475569;
line-height: 1.7;
font-size: 1rem;
margin-bottom: 1rem;
}
.seo-main-block strong {
color: #1b2a6b;
font-weight: 600;
}
.seo-main-block ol,
.seo-main-block ul {
color: #475569;
line-height: 1.8;
padding-left: 1.5rem;
}
.seo-main-block li {
margin-bottom: 0.5rem;
}
.seo-main-block ol {
list-style-type: decimal;
}
@media (max-width: 768px) {
.seo-intro-section {
padding: 1.5rem 0;
}
.seo-intro-content h2 {
font-size: 1.25rem;
}
.seo-intro-content p {
font-size: 0.9375rem;
}
.section-title-h2 {
font-size: 1.5rem;
}
.seo-footer-content {
margin-top: 2rem;
padding-top: 2rem;
}
.seo-footer-content > h2 {
font-size: 1.25rem;
}
.seo-footer-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.seo-footer-links {
padding: 1.5rem;
}
.seo-main-content {
padding: 2rem 0;
margin-top: 2rem;
}
.seo-main-block h2 {
font-size: 1.25rem;
}
.seo-main-block p {
font-size: 0.9375rem;
}
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 3rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.pagination-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: #3b4fa0;
color: white;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(59, 79, 160, 0.2);
}
.pagination-btn:hover {
background: #1b2a6b;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(59, 79, 160, 0.3);
}
.pagination-numbers {
display: flex;
align-items: center;
gap: 0.375rem;
flex-wrap: wrap;
justify-content: center;
}
.pagination-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 0.5rem;
background: white;
border: 2px solid #e5e7eb;
color: #374151;
border-radius: 6px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
}
.pagination-number:hover {
border-color: #3b4fa0;
color: #3b4fa0;
background: #f2f3f9;
}
.pagination-number.active {
background: #3b4fa0;
color: white;
border-color: #3b4fa0;
pointer-events: none;
}
.pagination-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
color: #9ca3af;
font-weight: 600;
}
.pagination-info {
text-align: center;
color: #6b7280;
font-size: 0.875rem;
margin-top: 1rem;
margin-bottom: 2rem;
}
@media (max-width: 768px) {
.pagination {
gap: 0.375rem;
}
.pagination-btn {
padding: 0.625rem 1rem;
font-size: 0.875rem;
}
.pagination-number {
min-width: 36px;
height: 36px;
font-size: 0.875rem;
}
.pagination-numbers {
gap: 0.25rem;
}
}
/* =====================================================
}
}