body {
 background: white;
 color: var(--color-blue-dark);
 min-height: 100vh;
}

a {
 color: inherit;
 text-decoration: none;
}

.required {
 color: var(--danger);
 font-family: var(--font-title);
}

/* ── Layout ── */
.layout {
 display: grid;
 grid-template-rows: auto 1fr;
 min-height: 100vh;
}

/* ── Header ── */
.header {
 padding: 1rem 0;
 color: white;
 background-color: var(--color-blue-light);

 .inner {
	gap: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
 }

 .btn-primary:hover {
	border-color: white !important;
 }

 .btn-primary.revert {
	border-color: white;
 }
}

.logo {
 font-weight: 600;
 font-size: 1.2rem;
 letter-spacing: 0.02em;
 font-family: var(--font-title);
}

.btn-primary {
 width: fit-content;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 border: 1px solid var(--color-green);
 background-color: var(--color-green);
 border-radius: .3rem;
 padding: .4rem .6rem;
 text-decoration: none;
 color: white;
 font-size: 1rem;
 line-height: 1;
 font-family: var(--font-title);
 transition: all .2s linear;
 cursor: pointer;

 svg {
	width: 1.1rem;
	height: auto;
 }

 &.revert {
	background-color: var(--color-blue-light);
	border-color: var(--color-blue-light);

	&:hover {
	 color: var(--color-blue-light);
	 background-color: white;
	}
 }

 &.big {
	padding: .5rem .8rem;
	font-size: 1.2rem;
 }

 &:hover {
	background-color: var(--color-blue-light);
	border-color: var(--color-blue-light) !important;
 }

 &.danger {
	color: white;
	border-color: var(--danger) !important;
	background-color: var(--danger);

	&:hover {
	 color: white;
	 background-color: var(--danger-dark);
	 border-color: var(--danger-dark) !important;
	}
 }
}

strong, b {
 font-family: var(--font-title);
}

.main {
 padding: 2rem 0;
 overflow-y: auto;
}

/* ── Flash messages ── */
.flash {
 padding: 1rem;
 border-radius: .5rem;
 margin-bottom: 1.5rem;
 font-size: 1rem;
 line-height: normal;
 display: flex;
 align-items: center;
 font-family: var(--font-title);
 color: white;
 border: 1px solid var(--color-blue-dark);
 background-color: var(--color-blue-light);
}
.flash.success {
 background: rgba(45,206,130,0.12);
 border-color: var(--success);
 color: var(--success);
}

/* ── Table liste ── */
.table-wrap { overflow-x: auto; }

.table {
 width: 100%;
 border-collapse: collapse;
}

.table th {
 font-family: var(--font-title);
 text-align: left;
 padding: .8rem .9rem;
 font-size: .8rem;
 line-height: 1;
 text-transform: uppercase;
 color: var(--color-grey);
 border-bottom: 1px solid var(--color-grey);
}

.table tr {
 border-bottom: 1px solid var(--color-grey);
}

.table td {
 padding: .7rem .8rem;
 vertical-align: middle;
 font-size: .9rem;
}

.tag {
 display: flex;
 width: fit-content;
 align-items: center;
 justify-content: center;
 font-size: .8rem;
 line-height: 1;
 color: var(--color-blue-dark);
 background-color: white;
 border-radius: 1rem;
 padding: .4rem .6rem;
 border: 1px solid var(--color-blue-dark);
}

/* Toggle switch */
.toggle {
 position: relative;
 display: inline-block;
 width: 36px;
 height: 20px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
 position: absolute;
 cursor: pointer;
 top: 0; left: 0; right: 0; bottom: 0;
 background: var(--color-blue-light);
 border-radius: 20px;
 border: 1px solid var(--color-blue-light);
 transition: background 0.2s;
}
.toggle-slider::before {
 content: '';
 position: absolute;
 height: 13px;
 width: 13px;
 left: 3px;
 bottom: 3px;
 background: #fff;
 border-radius: 50%;
 transition: transform 0.2s;
}
.toggle input:checked + .toggle-slider { background: var(--success); border-color: var(--success) }
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); }

/* ── Formulaire ── */

#contentForm {
position: relative;
 padding-bottom: 6rem;
}

.form-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1rem;
 margin-bottom: 2rem;

 @media (max-width: 991px) {
	display: flex;
	flex-direction: column;
 }
}

.form-row--full { grid-template-columns: 1fr; }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }

.form-group {
 display: flex;
 flex-direction: column;
 gap: .5rem;
}

.form-group label {
 font-size: .9rem;
 color: var(--color-blue-dark);
}

.form-control {
 background: white;
 border: 1px solid var(--color-blue-dark);
 border-radius: .4rem;
 padding: 9px 12px;
 color: var(--color-blue-dark);
 font-size: 1rem;
 line-height: normal;
 width: 100%;
 font-family: var(--font-base);
}
.form-control:focus {
 outline: none;
 border-color: var(--accent);
}

textarea.form-control { resize: vertical; min-height: 100px; }

select.form-control { cursor: pointer; }

#poleColorPreview {
 width: 2rem;
 min-width: 2rem;
 height: 2rem;
 min-height: 2rem;
 border-radius: 50%;
 border: 1px solid var(--color-blue-dark);
 overflow: hidden;
}

#poleColorLabel {
 font-family: var(--font-title);
 font-size: .9rem;
 color: var(--color-blue-dark);
 text-transform: uppercase;
}

.form-check {
 display: flex;
 align-items: center;
 gap: .6rem;
 padding: .5rem 0;
}
.form-check input[type="checkbox"] {
 width: 1.2rem;
 height: 1.2rem;
 cursor: pointer;
 accent-color: var(--accent);
}
.form-check label { cursor: pointer; font-size: 1rem;}

/* Sections conditionnelles par type */
.type-section { display: none; }
.type-section.visible { display: block; }

.section-label {
 font-size: .8rem;
 font-family: var(--font-title);
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--accent);
 margin-bottom: .9rem;
}

.form-footer {
 position: fixed;
 z-index: 999;
 bottom: 0;
 left: 0;
 width: 100%;
 background-color: white;
 padding: 1.5rem 0;
 gap: 2rem;
 box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);

 .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
 }
}

.btn {
 padding: 9px 20px;
 border-radius: 7px;
 border: none;
 font-size: 14px;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.15s;
 text-decoration: none;
 display: inline-block;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--color-grey); border: 1px solid var(--border2); }
.btn--ghost:hover { color: var(--text); background: var(--surface2); }

/* Upload zone */
.upload-zone {
 border: 2px dashed var(--color-blue-dark);
 border-radius: 8px;
 padding: 1.2rem;
 text-align: center;
 font-size: .9rem;
 transition: all 0.15s;
 cursor: pointer;
}
.upload-zone:hover {
 border-color: var(--accent);
}
.upload-zone input[type="file"] { display: none; }

/* Image preview */
.img-preview {
 max-width: 12rem;
 max-height: 9rem;
 object-fit: contain;
 border-radius: .5rem;
 border: 1px solid var(--color-green);
 margin-top: .5rem;
}

/* Page title */
.page-title {
 margin-bottom: .5rem;
}
.page-subtitle {
 font-size: 1rem;
 margin-bottom: 2rem;
}

/* Content types colors */
.type-citation    { background: #a78bfa; }
.type-texte       { background: #60a5fa; }
.type-texte_image { background: #34d399; }
.type-image       { background: #f97316; }
.type-galerie     { background: #f43f5e; }

/* Radio group styling */
.radio-group {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}

.radio-label {
 display: flex;
 align-items: center;
 gap: 0.6rem;
 cursor: pointer;
 font-size: 1rem;
}

.radio-label input[type="radio"] {
 cursor: pointer;
 accent-color: var(--accent);
}