/* ── BASE ───────────────────────────────────────────────────────────────────── /
/ STREAMING_CHUNK:Styling base elements and typography... */
body {
background-color: #000;
color: #00ff00;
font-family: 'Courier New', monospace;
margin: 20px;
}

/* ── ASCII ART LOGO (en-tête) ───────────────────────────────────────────────── /
/ STREAMING_CHUNK:Configuring ASCII logo and sticky header... */
.small-ascii {
font-family: 'Courier New', Courier, monospace;
font-size: clamp(0.3rem, 1vw, 1.2rem);
line-height: 1.1;
white-space: pre;
overflow-x: hidden;
display: block;
color: #00ff00;
}

.sticky-header {
position: sticky;
top: 0;
background-color: #000;
z-index: 100;
padding-bottom: 10px;
}

/* ── BLOCS DE CONTENU TEXTE ────────────────────────────────────────────────── /
/ STREAMING_CHUNK:Styling terminal blocks and interactive buttons... */
.terminal-block {
font-family: 'Courier New', Courier, monospace;
font-size: clamp(0.8rem, 1.4vw, 1.4rem);
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
overflow-x: hidden;
display: block;
color: #00ff00;
margin-bottom: 15px;
}

/* ── BOUTONS DE NAVIGATION ──────────────────────────────────────────────────── */
.button-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 20px 0;
}

/* Forçage de la couleur verte terminal pour éviter les liens bleus du navigateur */
.terminal-btn,
a.terminal-btn,
a.terminal-btn:link,
a.terminal-btn:visited {
background: #000000 !important;
color: #00ff00 !important;
border: 1px solid #00ff00 !important;
padding: 10px 15px !important;
cursor: pointer;
font-family: 'Courier New', monospace;
font-size: clamp(12px, 1.2vw, 15px);
transition: background 0.2s, color 0.2s;
white-space: nowrap;
text-decoration: none !important;
display: inline-block !important;
box-sizing: border-box !important;
}

.terminal-btn:hover,
a.terminal-btn:hover {
background-color: #00ff00 !important;
color: #000000 !important;
}

.danger-btn {
border-color: #ff5555 !important;
color: #ff5555 !important;
}
.danger-btn:hover {
background-color: #ff5555 !important;
color: #000000 !important;
}

/* ── FORMULAIRES DE L'ADMINISTRATION ────────────────────────────────────────── /
/ STREAMING_CHUNK:Formatting administration forms and input controls... */
.terminal-container {
max-width: 900px;
margin: 0 auto;
}

.terminal-form {
border: 1px solid #00ff00;
padding: 20px;
margin-bottom: 25px;
background-color: #050505;
}

.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 15px;
}

.form-group {
margin-bottom: 15px;
display: flex;
flex-direction: column;
}

.form-group label {
margin-bottom: 5px;
font-size: 0.9rem;
}

.terminal-input {
background: #000;
color: #00ff00;
border: 1px solid #00ff00;
padding: 8px 12px;
font-family: 'Courier New', monospace;
font-size: 1rem;
outline: none;
width: 100%;
box-sizing: border-box;
}

.terminal-input:focus {
box-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}

.terminal-msg {
padding: 10px 15px;
border: 1px solid #00ff00;
margin-bottom: 20px;
font-weight: bold;
}
.terminal-msg.error { border-color: #ff5555; color: #ff5555; }
.terminal-msg.success { border-color: #00ff00; color: #00ff00; }

/* ── CARTE D'ORDINATEUR (ordinateur.php) ───────────────────────────────────── /
/ STREAMING_CHUNK:Styling computer cards grid and card layout... */
.pc-grid-container {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
margin-bottom: 35px;
width: 100% !important;
box-sizing: border-box !important;
}

@media (max-width: 850px) {
.pc-grid-container {
grid-template-columns: 1fr !important;
}
}

.pc-card-wrapper {
margin-bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
min-width: 0; /* Empêche le débordement dans CSS Grid */
box-sizing: border-box;
}

.pc-terminal-card {
border: 1px solid #00ff00;
padding: 15px;
background-color: #020202;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
box-sizing: border-box;
}

.pc-card-header {
margin-bottom: 12px;
display: block;
}

/* Encadrement dynamique du titre */
.pc-title-box {
display: inline-block !important;
border: 1px solid #00ff00 !important;
padding: 6px 14px !important;
margin-bottom: 10px !important;
background-color: #000000 !important;
box-sizing: border-box !important;
}

.pc-title {
font-size: 1.1rem;
color: #00ff00 !important;
text-transform: uppercase;
letter-spacing: 1px;
}

.pc-card-body {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 10px;
flex-grow: 1;
}

.pc-image-box {
width: 100%;
max-width: 100%;
overflow: hidden;
}

.pc-image-box img {
width: 100%;
height: 200px;
object-fit: cover;
border: 1px solid #00ff00;
display: block;
box-sizing: border-box;
}

/* ── BOÎTE DE PRESENTATION LOGO ACRONIS ──────────────────────────────────────── /
/ STREAMING_CHUNK:Styling Acronis frame container... */
.acronis-box {
display: inline-block !important;
max-width: 325px !important;
width: auto !important;
border: 1px solid #00ff00 !important;
padding: 12px !important;
background-color: #020202 !important;
margin-top: 15px !important;
margin-bottom: 25px !important;
box-sizing: border-box !important;
transition: border-color 0.2s, box-shadow 0.2s;
}

.acronis-box:hover {
box-shadow: 0 0 12px rgba(0, 255, 0, 0.4);
}

.acronis-box img {
max-width: 300px !important;
width: 100% !important;
height: auto !important;
display: block !important;
}

/* STREAMING_CHUNK:Configuring specs table and price display... */
.pc-specs-box {
flex: 2 1 300px;
display: flex;
flex-direction: column;
gap: 15px;
box-sizing: border-box;
}

.specs-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 5px;
}

.specs-table td {
padding: 4px 8px;
vertical-align: top;
font-size: 0.95rem;
}

.specs-table td:first-child {
color: #00ff00;
font-weight: bold;
white-space: nowrap;
width: 140px;
}

.pc-desc {
color: #88ff88;
font-style: italic;
margin: 5px 0;
font-size: 0.9rem;
line-height: 1.4;
}

.pc-price-tag {
font-size: 1.2rem;
font-weight: bold;
margin: 10px 0 5px 0 !important;
color: #00ff00 !important;
line-height: 1.4;
display: block !important;
clear: both !important;
}

.highlight-price {
background-color: #00ff00;
color: #000000;
padding: 2px 8px;
font-weight: bold;
display: inline-block;
}

.pc-action-btn {
margin-top: 5px !important;
display: block !important;
clear: both !important;
}

.admin-pc-list {
display: flex;
flex-direction: column;
gap: 10px;
}

.admin-pc-item {
border: 1px dashed #00ff00;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
}


/* ── CURSEUR & TEXTE ANIMÉ ──────────────────────────────────────────────────── /
/ STREAMING_CHUNK:Setting up cursor animation and link styles... */
#cursor {
display: inline;
color: #00ff00;
margin-left: 2px;
white-space: nowrap;
}

.typewriter-element {
display: block;
margin-bottom: 20px;
}

#hidden-source {
display: none !important;
visibility: hidden;
}

#terminal-content p   { display: inline; }
#terminal-content br  { display: block; content: ""; margin-top: 15px; }
#terminal-content img { max-width: 100%; height: auto; }

a:link    { color: #4580ff; }
a:visited { color: #00ffea; }

/* ── RESPONSIVE ────────────────────────────────────────────────────────────── /
/ STREAMING_CHUNK:Applying responsive layout adjustments... */
@media (max-width: 768px) {
.pc-card-body { flex-direction: column; }
.pc-image-box { max-width: 100%; width: 100%; }
.admin-pc-item { flex-direction: column; align-items: flex-start; }
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────────── /
/ STREAMING_CHUNK:Applying responsive layout adjustments... */
@media (max-width: 768px) {
.pc-card-body { flex-direction: column; }
.pc-image-box { max-width: 100%; width: 100%; }
.admin-pc-item { flex-direction: column; align-items: flex-start; }
}

/* ── FORMULAIRE DE DEVIS SUR MESURE ───────────────────────────────────────── /
/ STREAMING_CHUNK:Styling customized quote generator form... */
.devis-section-title {
color: #00ff00;
font-weight: bold;
font-size: 1.1rem;
margin: 20px 0 10px 0;
border-bottom: 1px dashed #00ff00;
padding-bottom: 5px;
}

/* STREAMING_CHUNK:Styling accordion category components for devis page... */
.category-accordion {
margin-bottom: 12px;
border: 1px solid #005500;
background-color: #020802;
}

.category-header {
padding: 10px 14px;
background-color: #001a00;
color: #00ff00;
font-weight: bold;
font-size: 1rem;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid #003300;
transition: background-color 0.2s, color 0.2s;
}

.category-header:hover {
background-color: #003300;
color: #33ff33;
}

.cat-toggle-icon {
font-size: 0.85rem;
color: #00ff00;
}

.cat-title {
flex-grow: 1;
}

.cat-count {
font-size: 0.85rem;
color: #00aa00;
}

.category-body {
padding: 10px;
}

.devis-group-box {
border: 1px solid #00ff00;
background-color: #030303;
padding: 15px;
margin-bottom: 20px;
}

.prestation-item-card {
border: 1px solid #114411;
background-color: #000;
padding: 12px;
margin-bottom: 12px;
transition: border-color 0.2s, background-color 0.2s;
}

.prestation-item-card:hover,
.prestation-item-card.active-card {
border-color: #00ff00;
background-color: #051205;
}

.prestation-header-row {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}

.prestation-checkbox {
width: 18px;
height: 18px;
accent-color: #00ff00;
cursor: pointer;
}

.prestation-label-text {
color: #00ff00;
font-weight: bold;
font-size: 0.95rem;
flex-grow: 1;
}

.prestation-price-badge {
background-color: #00ff00;
color: #000;
padding: 2px 8px;
font-weight: bold;
font-size: 0.85rem;
}

/* STREAMING_CHUNK:Styling prestation extra text fields... */
.prestation-detail-wrapper {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dotted #00aa00;
display: none;
}

.prestation-item-card.active-card .prestation-detail-wrapper {
display: block;
}

.devis-recap-box {
border: 1px solid #00ff00;
background-color: #020a02;
padding: 20px;
margin: 20px 0;
}

.devis-recap-table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}

.devis-recap-table th,
.devis-recap-table td {
border: 1px solid #00ff00;
padding: 8px 12px;
text-align: left;
vertical-align: top;
}

.devis-recap-table th {
background-color: #003300;
color: #00ff00;
}