/* ================================================================
AEROSUP TEST PLATFORM — Theme v1.0
Fichier : aerosup-theme.css
Dépôt : /public_html/test/aerosup-theme.css
INSTALLATION :
1. Uploader ce fichier dans /public_html/test/
2. Uploader le logo dans /public_html/test/assets/logo-aerosup.png
3. Dans chaque page PHP, ajouter dans le :
...
---------------------------------------------------------------- */
.as-card {
background: rgba(255,255,255,0.07) !important;
backdrop-filter: blur(28px) !important;
-webkit-backdrop-filter: blur(28px) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r-xl) !important;
box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.12) !important;
color: var(--white) !important;
padding: 2.5rem !important;
max-width: 580px;
width: 90%;
margin: 0 auto;
}
/* Surcharge si la div principale a déjà un style inline blanc */
div[style*="background:#fff"],
div[style*="background: #fff"],
div[style*="background:white"],
div[style*="background: white"] {
background: rgba(255,255,255,0.07) !important;
backdrop-filter: blur(24px) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r-xl) !important;
}
/* ----------------------------------------------------------------
TYPOGRAPHIE
---------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
font-family: 'Inter', sans-serif !important;
color: var(--white) !important;
font-weight: 700 !important;
}
p, li, span, small, td, th, label, div {
font-family: 'Inter', sans-serif !important;
}
p, li {
color: var(--w60) !important;
line-height: 1.65;
}
strong, b {
color: var(--white) !important;
font-weight: 600 !important;
}
a {
color: var(--blue-sky) !important;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ----------------------------------------------------------------
LABELS
---------------------------------------------------------------- */
label {
display: block;
color: var(--w90) !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
margin-bottom: 0.4rem !important;
}
/* ----------------------------------------------------------------
INPUTS
---------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
background: rgba(255,255,255,0.08) !important;
border: 1px solid var(--w30) !important;
border-radius: var(--r-sm) !important;
color: var(--white) !important;
font-family: 'Inter', sans-serif !important;
font-size: 1rem !important;
padding: 0.75rem 1rem !important;
width: 100%;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
outline: none;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
color: rgba(255,255,255,0.35) !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border-color: var(--blue-sky) !important;
box-shadow: 0 0 0 3px rgba(91,186,213,0.2) !important;
background: rgba(255,255,255,0.11) !important;
}
/* Code candidat AERO-XXXX */
input#code_acces,
input[name="code_acces"],
input[placeholder*="AERO"],
input[placeholder*="code"] {
font-size: 1.35rem !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-align: center !important;
text-transform: uppercase !important;
padding: 1rem 1.5rem !important;
background: rgba(27,58,107,0.35) !important;
border: 2px solid rgba(91,186,213,0.45) !important;
border-radius: var(--r-md) !important;
}
select option {
background: var(--navy-deep) !important;
color: var(--white) !important;
}
textarea {
resize: vertical;
min-height: 100px;
}
/* ----------------------------------------------------------------
CHECKBOXES
---------------------------------------------------------------- */
input[type="checkbox"] {
width: 17px !important;
height: 17px !important;
accent-color: var(--blue-sky) !important;
cursor: pointer;
margin-right: 0.5rem;
}
/* ----------------------------------------------------------------
BOUTONS
---------------------------------------------------------------- */
button,
input[type="submit"],
input[type="button"],
.btn,
.btn-primary {
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 0.95rem !important;
padding: 0.85rem 2rem !important;
border-radius: var(--r-sm) !important;
border: 1px solid transparent !important;
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0.2px;
width: 100%;
display: block;
}
/* Bouton principal — navy */
button[type="submit"],
input[type="submit"],
.btn-primary {
background: var(--navy) !important;
border-color: rgba(91,186,213,0.35) !important;
color: var(--white) !important;
}
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn-primary:hover {
background: #254e8f !important;
border-color: rgba(91,186,213,0.6) !important;
box-shadow: 0 6px 24px rgba(91,186,213,0.2) !important;
transform: translateY(-1px);
}
/* Bouton secondaire — ghost */
.btn-secondary,
button.btn-outline {
background: transparent !important;
border-color: var(--w30) !important;
color: var(--w90) !important;
}
.btn-secondary:hover {
background: var(--w08) !important;
}
/* WhatsApp — garder vert */
a[href*="wa.me"],
a[href*="whatsapp"],
button.btn-whatsapp,
.btn-whatsapp {
background: #25D366 !important;
border-color: #25D366 !important;
color: #fff !important;
}
a[href*="wa.me"]:hover {
background: #1ebe59 !important;
}
/* ----------------------------------------------------------------
TOPBAR / NAVBAR (admin + test)
---------------------------------------------------------------- */
nav,
.navbar,
.admin-nav,
.topbar,
header {
background: rgba(8,15,28,0.92) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-bottom: 1px solid var(--border) !important;
padding: 0.7rem 1.5rem !important;
}
nav a,
.navbar a,
nav span,
.navbar span,
nav button,
.navbar button {
color: var(--w90) !important;
font-family: 'Inter', sans-serif !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
}
nav a:hover,
.navbar a:hover {
color: var(--blue-sky) !important;
text-decoration: none !important;
}
/* ----------------------------------------------------------------
NAVIGATION QUESTIONS (test.php)
---------------------------------------------------------------- */
.question-nav,
.questions-list,
.nav-questions {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0.75rem 0;
}
.question-nav button,
.question-nav a,
.nav-questions button,
[class*="q-btn"] {
background: var(--w08) !important;
border: 1px solid var(--border) !important;
border-radius: 6px !important;
color: var(--w60) !important;
font-family: 'Inter', sans-serif !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
width: 36px !important;
height: 36px !important;
padding: 0 !important;
cursor: pointer;
transition: all 0.15s;
}
.question-nav button:hover,
.nav-questions button:hover {
background: var(--navy) !important;
border-color: var(--blue-sky) !important;
color: var(--white) !important;
}
.question-nav button.active,
.question-nav button.current,
[class*="q-btn"].active {
background: var(--navy) !important;
border-color: var(--blue-sky) !important;
color: var(--white) !important;
box-shadow: 0 0 10px rgba(91,186,213,0.3) !important;
}
.question-nav button.answered,
[class*="q-btn"].answered {
background: rgba(106,175,61,0.25) !important;
border-color: rgba(106,175,61,0.5) !important;
color: #a3e077 !important;
}
/* ----------------------------------------------------------------
TIMER
---------------------------------------------------------------- */
#timer,
.timer,
[id*="timer"],
[class*="timer"],
.countdown {
background: rgba(27,58,107,0.5) !important;
border: 1px solid rgba(91,186,213,0.35) !important;
border-radius: var(--r-sm) !important;
color: var(--blue-sky) !important;
font-family: 'Inter', monospace !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
padding: 0.35rem 1rem !important;
letter-spacing: 1px;
}
/* Timer critique < 5 min */
#timer.danger,
.timer-danger,
[class*="timer-red"] {
border-color: rgba(239,68,68,0.5) !important;
color: #fc8181 !important;
background: rgba(239,68,68,0.12) !important;
animation: pulse-red 1.5s infinite;
}
@keyframes pulse-red {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
/* ----------------------------------------------------------------
ALERTES & NOTICES
---------------------------------------------------------------- */
.alert-warning,
[class*="warning"],
.notice-yellow {
background: rgba(245,158,11,0.1) !important;
border: 1px solid rgba(245,158,11,0.35) !important;
border-radius: var(--r-sm) !important;
color: #fcd34d !important;
padding: 0.9rem 1.1rem !important;
}
.alert-info,
[class*="info-box"],
.notice-blue {
background: rgba(91,186,213,0.1) !important;
border: 1px solid rgba(91,186,213,0.3) !important;
border-radius: var(--r-sm) !important;
color: #bae6fd !important;
padding: 0.9rem 1.1rem !important;
}
.alert-success,
[class*="success-box"],
.notice-green {
background: rgba(74,222,128,0.1) !important;
border: 1px solid rgba(74,222,128,0.35) !important;
border-radius: var(--r-sm) !important;
color: #86efac !important;
padding: 0.9rem 1.1rem !important;
}
/* ----------------------------------------------------------------
TABLES (admin)
---------------------------------------------------------------- */
table {
border-collapse: collapse !important;
width: 100%;
}
thead tr {
background: rgba(27,58,107,0.6) !important;
}
th {
color: var(--w60) !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
padding: 0.75rem 1rem !important;
border-bottom: 1px solid var(--border) !important;
}
td {
padding: 0.7rem 1rem !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
color: var(--w90) !important;
font-size: 0.875rem !important;
}
tr:hover td {
background: rgba(27,58,107,0.2) !important;
}
/* ----------------------------------------------------------------
BADGES STATUT
---------------------------------------------------------------- */
.badge,
[class*="badge"],
[class*="statut"],
[class*="status"] {
display: inline-block;
font-family: 'Inter', sans-serif !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
padding: 0.25rem 0.75rem !important;
border-radius: 20px !important;
letter-spacing: 0.3px;
text-transform: capitalize;
}
.badge-en-attente,
[class*="en_attente"],
span:contains("en attente") {
background: rgba(91,186,213,0.15) !important;
color: var(--blue-sky) !important;
border: 1px solid rgba(91,186,213,0.3) !important;
}
.badge-en-cours,
[class*="en_cours"] {
background: rgba(245,158,11,0.15) !important;
color: #fcd34d !important;
border: 1px solid rgba(245,158,11,0.3) !important;
}
.badge-admis,
[class*="admis"] {
background: rgba(106,175,61,0.15) !important;
color: #a3e077 !important;
border: 1px solid rgba(106,175,61,0.3) !important;
}
.badge-refuse,
[class*="refuse"],
[class*="refusé"] {
background: rgba(239,68,68,0.12) !important;
color: #fc8181 !important;
border: 1px solid rgba(239,68,68,0.25) !important;
}
.badge-corrige,
[class*="corrige"] {
background: rgba(167,139,250,0.15) !important;
color: #c4b5fd !important;
border: 1px solid rgba(167,139,250,0.3) !important;
}
/* ----------------------------------------------------------------
PAGE TERMINE (fin de test)
---------------------------------------------------------------- */
.success-checkmark,
.check-icon,
[class*="success-icon"] {
color: #4ade80 !important;
font-size: 4rem !important;
}
.success-steps {
counter-reset: steps;
}
.success-steps li {
display: flex;
align-items: center;
gap: 0.9rem;
margin-bottom: 0.75rem;
color: var(--w90) !important;
font-size: 0.95rem !important;
}
/* ----------------------------------------------------------------
STAT CARDS (dashboard admin)
---------------------------------------------------------------- */
.stat-card,
.dashboard-card,
[class*="stat-"] {
background: rgba(27,58,107,0.3) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r-md) !important;
padding: 1.25rem 1.5rem !important;
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover,
.dashboard-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md) !important;
}
.stat-number {
font-size: 2.2rem !important;
font-weight: 800 !important;
color: var(--white) !important;
line-height: 1 !important;
}
.stat-label {
font-size: 0.75rem !important;
color: var(--w60) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin-top: 0.3rem;
}
/* ----------------------------------------------------------------
SCORE MOYEN
---------------------------------------------------------------- */
.score-moyen,
[class*="score-avg"],
[class*="average"] {
font-size: 2.8rem !important;
font-weight: 800 !important;
color: var(--blue-sky) !important;
}
/* ----------------------------------------------------------------
FORMULAIRES (sections avec fond blanc)
---------------------------------------------------------------- */
.form-section,
.form-block,
fieldset {
background: var(--w05) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r-md) !important;
padding: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
fieldset legend {
color: var(--blue-sky) !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
padding: 0 0.5rem;
}
/* ----------------------------------------------------------------
ADMIN SIDEBAR / NAV LINKS
---------------------------------------------------------------- */
.admin-nav a,
.sidebar a,
nav.admin a {
display: inline-block;
padding: 0.4rem 0.9rem !important;
border-radius: var(--r-sm) !important;
transition: background 0.15s;
}
.admin-nav a:hover,
.sidebar a:hover,
nav.admin a:hover {
background: var(--w08) !important;
}
.admin-nav a.active,
nav.admin a.active {
background: var(--navy) !important;
color: var(--white) !important;
}
/* ----------------------------------------------------------------
SCROLLBAR
---------------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--navy-deep); }
::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-sky); }
/* ----------------------------------------------------------------
FOOTER
---------------------------------------------------------------- */
footer,
.footer,
[class*="footer"] {
color: var(--w30) !important;
font-size: 0.8rem !important;
text-align: center;
padding: 1.5rem !important;
}
/* ----------------------------------------------------------------
ANIMATIONS
---------------------------------------------------------------- */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.as-card,
.as-logo-bar {
animation: fadeInUp 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
.as-logo-bar { animation-delay: 0s; }
.as-card { animation-delay: 0.08s; }
/* ----------------------------------------------------------------
TEST PAGE — Layout & containment
---------------------------------------------------------------- */
/* Topbar fixe */
.test-topbar {
position: fixed !important;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 1.25rem !important;
background: rgba(8,15,28,0.97) !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
gap: 1rem;
}
.topbar-left, .topbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
}
.topbar-center { flex: 1; display: flex; justify-content: center; }
.candidat-name {
font-size: 0.875rem;
font-weight: 600;
color: rgba(255,255,255,0.8);
}
.save-status {
font-size: 0.78rem;
color: rgba(255,255,255,0.6);
}
.btn-submit-final {
background: var(--navy) !important;
border: 1px solid rgba(91,186,213,0.4) !important;
color: #fff !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
padding: 0.45rem 1rem !important;
border-radius: 6px !important;
cursor: pointer;
width: auto !important;
transition: background 0.15s;
}
.btn-submit-final:hover {
background: #254e8f !important;
}
/* Navigation questions */
.question-nav {
position: fixed !important;
top: 52px; left: 0; right: 0;
z-index: 99;
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 0.6rem 1rem !important;
background: rgba(13,25,41,0.97) !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
/* Zone contenu — offset topbar + navbar */
.test-content {
margin-top: 110px !important;
padding: 1.5rem 1.25rem 3rem !important;
max-width: 860px;
margin-left: auto !important;
margin-right: auto !important;
}
/* Panel question — CONTAINMENT critique */
.question-panel {
overflow: hidden !important; /* empêche les images de déborder */
position: relative !important;
}
.question-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.question-number {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(91,186,213,0.9);
}
.question-points {
font-size: 0.8rem;
color: rgba(255,255,255,0.5);
background: rgba(255,255,255,0.07);
border-radius: 20px;
padding: 0.2rem 0.7rem;
}
.question-enonce {
font-size: 1rem;
line-height: 1.65;
color: rgba(255,255,255,0.92) !important;
margin-bottom: 1rem;
}
/* Images des questions — strictement contenues */
.question-image {
margin: 1rem 0;
text-align: center;
overflow: hidden !important; /* ← clé du fix */
max-width: 100%;
}
.question-image img {
max-width: 100% !important;
max-height: 380px !important;
height: auto !important;
width: auto !important;
display: block !important;
margin: 0 auto !important;
border-radius: 8px;
cursor: zoom-in;
object-fit: contain;
}
/* Images des choix */
.choice-img {
max-width: 100% !important;
max-height: 200px !important;
height: auto !important;
display: block !important;
border-radius: 6px;
cursor: zoom-in;
object-fit: contain;
}
/* Footer navigation bas */
.question-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,0.08);
}
.btn-nav {
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
color: rgba(255,255,255,0.85) !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
padding: 0.6rem 1.2rem !important;
border-radius: 6px !important;
cursor: pointer;
width: auto !important;
transition: background 0.15s;
}
.btn-nav:hover {
background: rgba(27,58,107,0.5) !important;
}
/* Question ouverte */
.open-answer label {
font-size: 0.875rem;
color: rgba(255,255,255,0.7) !important;
margin-bottom: 0.5rem;
}
.word-count {
text-align: right;
font-size: 0.75rem;
color: rgba(255,255,255,0.35);
margin-top: 0.3rem;
}
/* Modals */
.modal-overlay {
position: fixed !important;
inset: 0;
background: rgba(0,0,0,0.7) !important;
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
}
.modal-content {
background: #0f1e35 !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 16px !important;
padding: 2rem !important;
max-width: 480px;
width: 90%;
color: #fff;
}
.modal-actions {
display: flex;
gap: 0.75rem;
margin-top: 1.5rem;
justify-content: flex-end;
}
/* Alert overlay anti-triche */
.alert-overlay {
position: fixed !important;
inset: 0;
background: rgba(0,0,0,0.8) !important;
display: flex;
align-items: center;
justify-content: center;
z-index: 300;
}
.alert-modal {
background: #1a0a0a !important;
border: 2px solid rgba(239,68,68,0.5) !important;
border-radius: 16px !important;
padding: 2rem !important;
max-width: 400px;
width: 90%;
text-align: center;
}
/* Zoom image */
.image-zoom-overlay {
position: fixed !important;
inset: 0;
background: rgba(0,0,0,0.92) !important;
display: flex;
align-items: center;
justify-content: center;
z-index: 400;
cursor: zoom-out;
}
.image-zoom-overlay img {
max-width: 95vw !important;
max-height: 90vh !important;
object-fit: contain;
border-radius: 8px;
}
.zoom-close {
position: absolute !important;
top: 1rem; right: 1rem;
background: rgba(255,255,255,0.15) !important;
border: none !important;
color: #fff !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
font-size: 1rem !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
/* ----------------------------------------------------------------
PROPOSITIONS QCM (test.php)
---------------------------------------------------------------- */
.choices {
display: flex;
flex-direction: column;
gap: 0.75rem !important;
margin-top: 1.25rem !important;
}
.choice-label {
display: flex !important;
align-items: center !important;
gap: 0.85rem !important;
padding: 0.9rem 1.1rem !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
border-radius: 10px !important;
cursor: pointer !important;
transition: background 0.15s, border-color 0.15s !important;
color: var(--w90) !important;
font-size: 0.95rem !important;
line-height: 1.45 !important;
}
.choice-label:hover {
background: rgba(27,58,107,0.4) !important;
border-color: rgba(91,186,213,0.35) !important;
}
.choice-label:has(input:checked) {
background: rgba(27,58,107,0.55) !important;
border-color: rgba(91,186,213,0.6) !important;
color: var(--white) !important;
}
.choice-label input[type="radio"] {
width: 18px !important;
height: 18px !important;
accent-color: var(--blue-sky) !important;
flex-shrink: 0;
}
.choice-text {
color: inherit !important;
}
/* ----------------------------------------------------------------
MOBILE
---------------------------------------------------------------- */
@media (max-width: 640px) {
.as-card {
width: 94% !important;
padding: 1.5rem !important;
border-radius: 16px !important;
}
.as-logo-bar img {
height: 54px;
}
input#code_acces,
input[name="code_acces"] {
font-size: 1.1rem !important;
letter-spacing: 2px !important;
}
.question-nav button,
[class*="q-btn"] {
width: 32px !important;
height: 32px !important;
font-size: 0.75rem !important;
}
}
