* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; padding: 0; background: #f5f7fa; color: #2d3748; }
header { background: #1a365d; color: white; padding: 1em 2em; display: flex; justify-content: space-between; align-items: center; }
header h1 { margin: 0; font-size: 1.4em; }
header h1 a { color: white; text-decoration: none; }
.version { color: #a0aec0; font-size: 0.85em; }
main { padding: 2em; max-width: 1200px; margin: 0 auto; }
footer { padding: 1em 2em; color: #718096; font-size: 0.85em; text-align: center; }
code { background: #edf2f7; padding: 0.1em 0.4em; border-radius: 3px; font-size: 0.9em; }

/* Liens : pas de violet sur visited (cohérence visuelle).
   `:where()` pour conserver une spécificité 0 sur le pseudo-class -> les
   classes .btn-primary / .btn-sm / .btn-cancel definies plus loin gardent
   leur couleur (white sur fond bleu, gris sur fond clair, etc.). */
a:where(:link, :visited) { color: #3182ce; }
a:where(:link, :visited):hover { color: #2c5282; text-decoration: underline; }
header nav a:where(:link, :visited) { color: #cbd5e0; }
header nav a:where(:link, :visited):hover { color: white; }
.btn-primary:where(:link, :visited),
.btn-primary:where(:link, :visited):hover { color: white; text-decoration: none; }

/* === Phase 2A.3 styles === */
header nav { display: flex; gap: 1.5em; align-items: center; }
header nav a { color: #cbd5e0; text-decoration: none; padding: 0.3em 0.6em; border-radius: 3px; }
header nav a:hover { background: rgba(255,255,255,0.1); color: white; }

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1em; }
.btn-primary { background: #3182ce; color: white; padding: 0.5em 1em; border: none; border-radius: 4px; text-decoration: none; cursor: pointer; font-size: 0.9em; display: inline-block; }
.btn-primary:hover { background: #2c5282; }
.btn-cancel { background: #e2e8f0; color: #4a5568; padding: 0.5em 1em; border-radius: 4px; text-decoration: none; }
.btn-sm { padding: 0.25em 0.6em; font-size: 0.8em; border-radius: 3px; text-decoration: none; cursor: pointer; border: 1px solid #cbd5e0; background: white; color: #2d3748; margin-right: 0.3em; }
.btn-sm:hover { background: #edf2f7; }
.btn-disable { color: #c53030; border-color: #fed7d7; }

.flash { padding: 0.7em 1em; border-radius: 4px; margin-bottom: 1em; }
.flash.success { background: #c6f6d5; color: #22543d; }
.flash.error { background: #fed7d7; color: #742a2a; }

.errors { background: #fed7d7; color: #742a2a; padding: 1em; border-radius: 4px; margin-bottom: 1em; }
.errors ul { margin: 0.4em 0 0 1.5em; padding: 0; }

.op-section { margin-bottom: 2em; }
.op-section .hint { color: #718096; font-size: 0.9em; margin: 0.3em 0 0.8em; }

table.data { width: 100%; border-collapse: collapse; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-radius: 4px; overflow: hidden; }
table.data th { background: #2d3748; color: white; text-align: left; padding: 0.7em; font-size: 0.85em; }
table.data td { padding: 0.7em; border-bottom: 1px solid #e2e8f0; }
table.data tr:hover { background: #f7fafc; }
table.data td.actions { white-space: nowrap; }

.form-card { max-width: 600px; background: white; padding: 2em; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.field { margin-bottom: 1.2em; }
.field label { display: block; font-weight: 500; margin-bottom: 0.3em; }
.field input, .field textarea, .field select { width: 100%; padding: 0.5em; border: 1px solid #cbd5e0; border-radius: 4px; font-family: inherit; font-size: 0.95em; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: #3182ce; box-shadow: 0 0 0 2px rgba(49,130,206,0.2); }
.required { color: #c53030; }
.actions { display: flex; gap: 0.5em; margin-top: 1.5em; }

/* === Phase 2A.4 styles === */
.breadcrumb { color: #718096; font-size: 0.9em; margin: 0 0 1em; }
.breadcrumb a { color: #4a5568; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.info-card { background: white; padding: 1em 1.5em; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 1.5em; border-left: 3px solid #3182ce; }
.info-card strong { color: #2d3748; display: block; margin-bottom: 0.4em; }
.info-card p { margin: 0; color: #4a5568; }

section { margin-bottom: 2em; }

.field-row { display: flex; gap: 1em; }
.field-row .field { flex: 1; }

.client-list { list-style: none; padding: 0; }
.client-list li { padding: 0.4em 0; border-bottom: 1px solid #e2e8f0; }
.client-list li:last-child { border-bottom: none; }

.badge { display: inline-block; padding: 0.1em 0.5em; border-radius: 10px; font-size: 0.75em; font-weight: 500; }
.badge.gray { background: #e2e8f0; color: #4a5568; }

/* === Phase 2A.5 styles === */
.disabled-row { opacity: 0.5; }
.filter-bar { background: white; padding: 0.7em 1em; border-radius: 4px; margin-bottom: 1em; }
.contracts-cell { font-size: 0.75em; }
.badge.green { background: #c6f6d5; color: #22543d; }
.badge.mini { background: #e2e8f0; color: #2d3748; padding: 0.05em 0.4em; font-size: 0.7em; margin-right: 0.2em; }
.btn-enable { color: #22543d; border-color: #c6f6d5; }

.form-large { max-width: 900px; }
fieldset { border: 1px solid #e2e8f0; border-radius: 4px; padding: 1.5em; margin-bottom: 1.5em; }
fieldset legend { padding: 0 0.5em; font-weight: 600; color: #2d3748; }
fieldset .hint { color: #718096; font-size: 0.85em; margin-top: -0.5em; margin-bottom: 1em; }

.checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5em; }
.checkbox { display: flex; align-items: center; gap: 0.5em; cursor: pointer; padding: 0.4em; border-radius: 3px; }
.checkbox:hover { background: #f7fafc; }
.checkbox input { width: auto; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1em; margin-bottom: 1.5em; }
.info-card dl { margin: 0; }
.info-card dt { font-size: 0.8em; color: #718096; margin-top: 0.6em; text-transform: uppercase; letter-spacing: 0.5px; }
.info-card dd { margin: 0.1em 0; font-weight: 500; }

.contracts-list { list-style: none; padding: 0; margin: 0; }
.contracts-list li { padding: 0.4em 0; }
.contracts-list li.active { color: #22543d; }
.contracts-list li.active span { background: #c6f6d5; color: #22543d; padding: 0 0.5em; border-radius: 2px; font-size: 0.7em; margin-right: 0.5em; font-weight: 600; }
.contracts-list li.inactive { color: #a0aec0; }
.contracts-list li.inactive span { color: #cbd5e0; margin-right: 0.5em; }

/* === Phase 2A.7 styles === */
.sub-list { list-style: none; padding: 0; margin: 0 0 1em; }
.sub-list li { display: flex; align-items: center; gap: 0.5em; padding: 0.5em 0; border-bottom: 1px solid #e2e8f0; }
.sub-list li form { margin-left: auto; }
.sub-list li button { padding: 0 0.5em; }

.inline-form { display: flex; gap: 0.5em; align-items: center; margin-top: 0.5em; }
.inline-form input, .inline-form select { width: auto; flex: 1; padding: 0.4em; border: 1px solid #cbd5e0; border-radius: 3px; }
.inline-form button { white-space: nowrap; }

.inline-form-multi { display: grid; grid-template-columns: 1fr 1fr 2fr auto; gap: 0.5em; margin-top: 0.5em; }
.inline-form-multi input { padding: 0.4em; border: 1px solid #cbd5e0; border-radius: 3px; }

.badge.orange { background: #feebc8; color: #7b341e; }

/* === Phase 2A.8 styles === */
.search-bar { display: flex; gap: 0.5em; align-items: center; }
.search-bar input { width: 320px; padding: 0.5em; border: 1px solid #cbd5e0; border-radius: 4px; }
.search-bar.large input { width: 100%; max-width: 600px; padding: 0.7em; font-size: 1.05em; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1em; margin-bottom: 2em; }
.stat-card { background: white; padding: 1.5em; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 0.4em; text-decoration: none; color: inherit; transition: transform 0.1s; }
.stat-card:hover:not(.stat-passive) { transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0,0,0,0.12); }
.stat-card.stat-passive { cursor: default; }
.stat-num { font-size: 2.4em; font-weight: 700; color: #1a365d; line-height: 1; }
.stat-label { color: #718096; font-size: 0.9em; }

.recent-list { list-style: none; padding: 0; margin: 0; }
.recent-list li { padding: 0.4em 0; border-bottom: 1px solid #e2e8f0; }
.recent-list li:last-child { border-bottom: none; }
.recent-list small { color: #718096; }

/* Flash warning + info (en plus de success/error) */
.flash.warning { background: #feebc8; color: #7b341e; border-left: 3px solid #dd6b20; }
.flash.info { background: #bee3f8; color: #2c5282; border-left: 3px solid #3182ce; }

/* === M365 expiration urgente === */
.expires-soon { color: #c53030; font-weight: 600; }
.expires-soon::before { content: "⚠ "; }

/* === Accordeons (fiche client : Microsoft 365 / Sites / Utilisateurs / Equipements) === */
details.accordion { margin-bottom: 0.8em; background: white; border: 1px solid #e2e8f0; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
details.accordion > summary { padding: 0.8em 1em; cursor: pointer; font-weight: 600; font-size: 1.05em; user-select: none; list-style: none; display: flex; align-items: center; gap: 0.6em; }
details.accordion > summary::-webkit-details-marker { display: none; }
details.accordion > summary::before { content: "▶"; font-size: 0.7em; color: #718096; transition: transform 0.15s; }
details.accordion[open] > summary::before { transform: rotate(90deg); }
details.accordion > summary:hover { background: #f7fafc; }
details.accordion[open] > summary { border-bottom: 1px solid #e2e8f0; background: #f7fafc; }
details.accordion .accordion-body { padding: 1em; }
details.accordion .accordion-header-actions { margin-left: auto; display: flex; gap: 0.4em; }
/* Pour eviter que le bouton dans le summary declenche l'ouverture/fermeture */
details.accordion .accordion-header-actions form, details.accordion .accordion-header-actions a.btn-sm { pointer-events: auto; }

/* === Phase 2B.1 : header user info + page login === */
.user-info { display: inline-flex; align-items: center; gap: 0.6em; margin-left: 1em; padding-left: 1em; border-left: 1px solid #4a5568; }
.user-info .user-name { color: #cbd5e0; font-size: 0.9em; display: inline-flex; align-items: center; gap: 0.4em; }
.user-info .user-name .badge { background: #2c5282; color: #cbd5e0; }
.user-info .logout-link, .login-link { font-size: 0.85em; }
header nav a.logout-link, header nav a.login-link { padding: 0.25em 0.6em; border: 1px solid #4a5568; border-radius: 3px; }

.login-card { max-width: 480px; margin: 3em auto; background: white; padding: 2em; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.login-card h2 { margin-top: 0; color: #1a365d; }
.login-card .hint { color: #718096; font-size: 0.95em; line-height: 1.5; }
.login-card .actions { justify-content: center; margin-top: 1.5em; }