/* Fichier : SEO .CSS
	Version By sync - Boulette (V8.0.0) - (V2.0) - Edition 1
	By sync for https://feuille-heures-angelique.neocities.org
*/

:root {
	--bg-main:#121212;
	--bg-panel:#1e1e1e;
	--text-main:#e0e0e0;
	--border-color:#333;
	--accent-color:#007bff;
	--success:#28a745;
	--warning:#ffc107;
	--danger:#dc3545;
	--code-bg:#2d2d2d;
}

html, body{ margin:0; padding:0; width:100%; height:100%; font-family:'Segoe UI',sans-serif; background:var(--bg-main); color:var(--text-main); display:flex; flex-direction:column;}
/* bloque les smartphones!
html, body{ user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none;}
*/
header{ background:var(--bg-panel); padding:15px 30px; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center;}

.header{ background:var(--bg-panel); padding:15px 30px; border-bottom:1px solid var(--border-color); display:flex; justify-content:center; align-items:center;}

.container{ display:flex; flex:1; min-height:0; width:100%; overflow:hidden; /* 🔥 important */}

h1 {font-size:24px;}
h3 {font-size:16px; text-align: center; display:flex; justify-content: center; align-items:center;}

/* 1. CONTAINER */
.container{ display:flex; flex:1; min-height:0; width:100%; overflow:hidden;}

/* 2. PANELS (structure commune) */
.editor-panel, .results-panel{ flex:1; min-width:0; /* 🔥 évite que ça déborde */}

/* 3. PANEL GAUCHE */
.editor-panel{ display:flex; flex-direction:column; padding:20px; border-right:1px solid var(--border-color); gap:15px; /* espace entre textarea + bouton */
}

/* 4. PANEL DROIT */
.results-panel{padding:20px; overflow-y:auto; background:#181818;}

textarea{
	flex:1;
	width:100%; /* ❌ pas 90% */
	min-height:0;
	box-sizing:border-box;
	background:#0d0d0d;
	color:#00ff41;
	border:1px solid var(--border-color);
	border-radius:5px;
	padding:15px;
	font-family:monospace;
	/* margin-bottom:15px; pas bon! */
	resize:none;
}

button{background:var(--accent-color); color:#fff; border:none; padding:15px; font-size:16px; border-radius:5px; cursor:pointer; font-weight:bold; width:100%; max-width:300px; margin:0 auto; display:block;}

.card{background:var(--bg-panel); border:1px solid var(--border-color); border-radius:5px; padding:15px; margin-bottom:20px;}
.card h2{margin:0 0 10px; border-bottom:1px solid var(--border-color); padding-bottom:10px;}
.result-item{margin-bottom:15px; border-left:3px solid transparent; padding-left:10px;}
.status-error{border-color:var(--danger);}
.status-warn{border-color:var(--warning);}
.status-ok{border-color:var(--success);}
.explanation{font-size:.9rem; color:#bbb;}

pre{background:var(--code-bg); padding:10px; border-radius:4px; font-size:.8rem; color:#ffcc00; overflow-x:auto; border:1px dashed #555;}

@media(max-width:800px){
	.container{flex-direction:column;}
	.editor-panel,.results-panel{height:50%;}
}

/* fin du CSS */