/*
 * Charte graphique Sydo (reprise de qr.sydo.fr/gestion.php)
 * Polices : Helvetica Neue / Arial pour le texte, Georgia pour titres et logo.
 * Les teintes de texte (--sydo-orange-text) sont assombries par rapport à l'orange de marque
 * afin de respecter le contraste minimal RGAA (4,5:1) sur fond blanc.
 */
:root {
    --sydo-orange: #f59c5e;
    --sydo-orange-text: #b34000;
    --sydo-orange-soft: #fff5ee;
    --sydo-green: #0e5233;
    --sydo-green-soft: #e8f3ec;
    --sydo-bg: #f5f5f5;
    --sydo-text: #3a3a3a;
    --sydo-muted: #6b6b6b;
    --sydo-border: #eee;
    --sydo-border-input: #ddd;
    --sydo-gray: #5f6b6c;
    --nc-color: #ce0500;
    --nc-soft: #fde8e8;
    --serif: Georgia, serif;
}

* { box-sizing: border-box; }

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0 20px;
    background: var(--sydo-bg);
    color: var(--sydo-text);
    line-height: 1.5;
}

h1, h2, h3 { font-family: var(--serif); font-weight: normal; color: var(--sydo-text); }
h1 { font-size: 1.8em; margin: 0 0 8px; }
h2 { font-size: 1.8em; margin: 10px 0 25px; text-align: left; }
h3 { font-size: 1.4em; margin: 0 0 15px; }

a { color: var(--sydo-orange-text); }

:focus-visible { outline: 3px solid var(--sydo-green); outline-offset: 2px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* En-tête */
.site-header { max-width: 1200px; margin: 0 auto; padding: 30px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo { font-family: var(--serif); font-size: 1.8em; font-weight: bold; color: var(--sydo-text); text-decoration: none; letter-spacing: -1px; }
.logo span { font-weight: normal; color: var(--sydo-orange); }
.tagline { margin: 0; color: var(--sydo-muted); font-size: 0.9em; }

/* Conteneurs : une "carte" blanche par bloc */
.container { max-width: 1200px; margin: 0 auto 30px; }
.card,
.report-toolbar,
.rgaa-summary-card,
.lh-card,
.rgaa-controls,
.report-notes,
#results-container > .table-responsive {
    background: #fff;
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
    margin-bottom: 30px;
}
.rgaa-controls { padding: 20px 40px; }
#results-container > .table-responsive { padding: 15px 40px; }

/* Formulaire compact (comme "Nouveau QR Code") */
.compact-form-box { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.compact-form-box h1 { font-size: 1.4em; margin: 0; min-width: 180px; }
.form-row { display: flex; gap: 10px; flex: 1; min-width: 300px; }

input[type="url"], input[type="text"], input[type="search"], textarea, .text-field {
    flex: 1;
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--sydo-border-input);
    border-radius: 4px;
    font: inherit;
    font-size: 0.95em;
    color: var(--sydo-text);
    background: #fafafa;
    transition: border 0.2s;
}
input:focus, textarea:focus { border-color: var(--sydo-orange); background: #fff; }
label { font-weight: bold; color: #555; font-size: 0.9em; }

/* Boutons */
.btn-primary, .btn-secondary, .btn-danger, .btn-filter {
    padding: 8px 16px;
    border-radius: 4px;
    font: inherit;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.btn-primary { background: var(--sydo-orange); color: #fff; font-weight: bold;  letter-spacing: 0.5px; }
.btn-secondary { background: var(--sydo-gray); color: #fff; }
.btn-danger { background: transparent; color: var(--nc-color); border-color: var(--sydo-border-input); }
.btn-danger:hover { background: var(--nc-soft); }
.btn-filter { background: transparent; color: var(--sydo-text); border-color: var(--sydo-border-input); }
.btn-filter:hover { background: var(--sydo-bg); }
.btn-filter.active { background: var(--sydo-green); color: #fff; border-color: var(--sydo-green); }
.btn-primary:hover, .btn-secondary:hover { opacity: 0.9; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* Messages */
.error-alert { max-width: 1200px; margin: 0 auto 30px; padding: 15px; background: var(--sydo-orange-soft); border-left: 4px solid var(--sydo-orange); color: var(--sydo-text); border-radius: 4px; font-size: 0.9em; }
.error-alert[hidden], [hidden] { display: none !important; }
.loader { font-style: italic; color: var(--sydo-muted); margin: 15px 0 0; font-size: 0.95em; }
.empty-home { color: var(--sydo-muted); font-style: italic; font-size: 0.95em; margin: 15px 0; }

/* Tableaux */
.table-responsive { overflow-x: auto; }
.rgaa-results-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.95em; }
.rgaa-results-table th { font-size: 0.8em; text-transform: uppercase; letter-spacing: 1px; color: var(--sydo-muted); padding: 15px 10px; border-bottom: 1px solid var(--sydo-border); font-weight: normal; }
.rgaa-results-table td { padding: 18px 10px; border-bottom: 1px solid var(--sydo-border); vertical-align: top; }
.rgaa-results-table tr:hover td { background: #fcfcfc; }
.text-center { text-align: center; }
.font-bold { font-weight: bold; }

.audit-name { font-weight: bold; margin: 0; }
.audit-url { color: var(--sydo-muted); font-size: 0.85em; word-break: break-all; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Statuts RGAA */
.badge { display: inline-block; padding: 4px 10px; border-radius: 3px; font-size: 0.75em; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; border: 0; }
.badge-c { background: var(--sydo-green); color: #fff; }
.badge-nc { background: var(--nc-color); color: #fff; }
.badge-na { background: #e0e0e0; color: #444; }
.badge-manuel { background: var(--sydo-orange); color: var(--sydo-text); }
.score-chip-good { background: var(--sydo-green-soft); color: var(--sydo-green); }
.score-chip-avg { background: var(--sydo-orange-soft); color: var(--sydo-orange-text); }
.score-chip-poor { background: var(--nc-soft); color: var(--nc-color); }

.status-select { max-width: 100%; padding: 6px 8px; cursor: pointer; font-family: inherit; }
.status-select option { background: #fff; color: var(--sydo-text); }
.status-print-label { display: none; }
.status-print-label.status-readonly { display: inline-block; }

/* Rapport */
#results-container > .report-toolbar-actions { margin-bottom: 15px; }
.report-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.report-toolbar h1 { margin: 0 0 8px; }
.report-toolbar p { margin: 0 0 4px; }
.report-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.report-notes { white-space: pre-wrap; }

.rgaa-summary-card { display: flex; align-items: center; gap: 32px; }
.score-display { text-align: center; min-width: 180px; padding: 16px; border-radius: 8px; }
.score-num { display: block; font-family: var(--serif); font-size: 2.8rem; font-weight: bold; line-height: 1; }
.score-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.score-good { background: var(--sydo-green-soft); color: var(--sydo-green); }
.score-avg { background: var(--sydo-orange-soft); color: var(--sydo-orange-text); }
.score-poor { background: var(--nc-soft); color: var(--nc-color); }

.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; flex: 1; }
.metric-item { background: #fafafa; border: 1px solid var(--sydo-border); padding: 14px; border-radius: 6px; font-size: 0.9rem; }
.m-val { display: block; font-family: var(--serif); font-size: 1.8rem; font-weight: bold; }
.metric-item.c .m-val { color: var(--sydo-green); }
.metric-item.nc .m-val { color: var(--nc-color); }
.metric-item.na .m-val { color: var(--sydo-muted); }
.metric-item.manuel .m-val { color: var(--sydo-orange-text); }
.audit-status-count { font-weight: bold; }
.audit-status-count.c { color: var(--sydo-green); }
.audit-status-count.nc { color: var(--nc-color); }
.audit-status-count.na { color: var(--sydo-muted); }
.audit-status-count.manuel { color: var(--sydo-orange-text); }

.rgaa-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.filter-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.rgaa-controls .search-field { flex: 0 1 380px; }

.theme-tag { display: inline-block; background: var(--sydo-orange-soft); color: var(--sydo-orange-text); padding: 3px 8px; border-radius: 3px; font-size: 0.75em; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; }
.criterion-title { margin: 0; font-weight: 500; }
.diag-message { margin-bottom: 6px; }
.remediation-box { background: var(--sydo-orange-soft); border-left: 4px solid var(--sydo-orange); padding: 10px 14px; font-size: 0.9em; margin-top: 8px; border-radius: 4px; }
.snippets-details { margin-top: 8px; font-size: 0.85em; }
.snippets-details summary { cursor: pointer; color: var(--sydo-orange-text); font-weight: 500; }
.snippets-details pre { background: #2b2b2b; color: #eee; padding: 10px; border-radius: 4px; overflow-x: auto; margin-top: 6px; }

/* Bloc Lighthouse */
.lh-header-title { font-size: 1.4em; margin: 0 0 20px; }
.lh-badges-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-bottom: 20px; }
.lh-badge { text-align: center; padding: 16px; border-radius: 8px; }
.lh-score { display: block; font-family: var(--serif); font-size: 2.2rem; font-weight: bold; line-height: 1; }
.lh-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.lh-pass { background: var(--sydo-green-soft); color: var(--sydo-green); }
.lh-average { background: var(--sydo-orange-soft); color: var(--sydo-orange-text); }
.lh-fail { background: var(--nc-soft); color: var(--nc-color); }
.lh-na { background: #eee; color: var(--sydo-muted); }
.lh-failed-details summary { cursor: pointer; margin-bottom: 10px; }
.lh-issues-list { padding-left: 20px; }
.lh-issue-desc { margin: 4px 0; color: var(--sydo-muted); }
.lh-issues-list pre { background: #2b2b2b; color: #eee; padding: 10px; border-radius: 4px; overflow-x: auto; }
.lh-perfect { margin: 0; color: var(--sydo-green); font-weight: 500; }
.lh-notice { max-width: 1200px; margin: 0 auto 30px; padding: 15px; background: var(--sydo-orange-soft); border-left: 4px solid var(--sydo-orange); border-radius: 4px; font-size: 0.9em; }

/* Fenêtre de modification */
dialog { border: 0; border-radius: 8px; padding: 40px; width: min(520px, 92vw); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); color: var(--sydo-text); }
dialog::backdrop { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); }
dialog h2 { font-size: 1.5em; margin: 0 0 20px; }
dialog p { margin: 0 0 16px; }
dialog label { display: inline-block; margin-bottom: 6px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Smartphone */
@media (max-width: 768px) {
    body { padding: 0 10px; }
    .site-header { padding: 20px 0; }
    .card, .report-toolbar, .rgaa-summary-card, .lh-card, .rgaa-controls, .report-notes,
    #results-container > .table-responsive { padding: 20px 15px; margin-bottom: 20px; }
    h2 { font-size: 1.4em; margin-bottom: 15px; }
    .compact-form-box { flex-direction: column; align-items: stretch; gap: 15px; }
    .form-row { flex-direction: column; min-width: 100%; }
    .form-row .btn-primary { width: 100%; padding: 12px; }
    .rgaa-summary-card { flex-direction: column; align-items: stretch; gap: 20px; }
    .rgaa-controls .search-field { flex: 1 1 100%; }
    dialog { padding: 30px 15px; }
}

/* Impression / export PDF */
@media print {
    body { background: #fff; padding: 0; }
    .container { max-width: none; }
    .site-header, .compact-form-box, .rgaa-controls, .report-toolbar-actions, .error-alert { display: none !important; }
    .report-toolbar, .rgaa-summary-card, .lh-card, .report-notes, #results-container > .table-responsive { box-shadow: none; padding: 0; margin-bottom: 16px; }
    .report-toolbar { display: block; }
    .rgaa-summary-card, #results-container > .table-responsive { break-inside: avoid; }
    .table-responsive { overflow: visible; }
    .rgaa-results-table { font-size: 10pt; }
    .rgaa-results-table th, .rgaa-results-table td { padding: 6px 8px; }
    .status-select { display: none !important; }
    .status-print-label { display: inline-block !important; }
    .badge, .score-display, .metric-item, .theme-tag, .lh-badge {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}