/* ------------------------------ */
/* VARIABLES THEME CLAIR / SOMBRE */
/* ------------------------------ */

:root[data-theme="light"] {
	--bg-color: #ffffff;
	--text-color: #222222;
	--badge-text-color: #222222;
	--footer-bg: #f2f2f2;
	--link-color: #0a2e77;
	--link-campagne-color: #fff;
	--link-article-color: #0a2e77;
	--link-hover: #000;
	--link-hover-expo: #000;
	--heading-color: #000;
	--text-standard-color: #000;
	--header-standard-color: #000;
	--lien-annonce-color: #fff;
	--badge-parent-color: #000;

	--border-color: #e3e3e3;
	--border-dark: #ccc;

	--module-bg: #336699;
	--menu-bg: #0566ad;
	--menu-hover-bg: #f5f5f5;

	--block-bg: #f5f5f5;
	--badge-block-bg: #f5f5f5;
	--center-bg: #ffffff;

	--menu-text: #ffffff;
	--menu-text-hover: #fff;

	--beautifulck-text: #000;
	--beautifulck-text-hover: #000;

	--hamberger-link-bg: #fff;

	--nav-header-color: #000;
	--nav-header-bg: #a1cde3;
	--russian-blue-accent: #4f8cff;
	--russian-blue-accent-soft: rgba(79, 140, 255, 0.12);
	--section-article-hero: linear-gradient(135deg, #fff1f2, #eef5ff);
	--cfr-bg-main: #f8fafc;
    --cfr-card-bg: #ffffff;
    --cfr-text-main: #334155;
    --cfr-text-dark: #0f172a;
    --cfr-text-muted: #64748b;
    --cfr-accent: #2563eb;
    --cfr-accent-soft: #eff6ff;
    --cfr-border: #e2e8f0;
    --cfr-radius: 16px;
}


:root[data-theme="dark"] {
	--bg-color: #1a1a1a;
	--text-color: #e5e5e5;
	--badge-text-color: #222222;
	--footer-bg: #2a2a2a;

	--link-color: #8db3ff;
	--link-campagne-color: #fff;
	--link-article-color: #8db3ff;
	--link-hover: #fff;
	--link-hover-expo: #000;
	--heading-color: #fff;

	--border-color: #444;
	--border-dark: #666;

	--module-bg: #25496b;
	--menu-bg: #2a2a2a;
	--menu-hover-bg: #0566ad;

	--block-bg: #3a3a3a;
	--badge-block-bg: #f5f5f5;
	--center-bg: #1a1a1a;

	--menu-text: #9ecaff;
	--menu-text-hover: #fff;

	--beautifulck-text: #000;
	--beautifulck-text-hover: #000;

	--hamberger-link-bg: #fff;

	--nav-header-color: #fff;
	--nav-header-bg: #6c6f70;
	--text-standard-color: #000;
	--header-standard-color: #000;
	--lien-annonce-color: #fff;
	--badge-parent-color: #000;
	--bs-secondary-color: #fff;
	--russian-blue-accent: #4f8cff;
	--russian-blue-accent-soft: rgba(79, 140, 255, 0.12);
	--section-article-hero: linear-gradient(135deg, #2b2122, #353f4f);
}

/* ------------------------------ */
/* RESET + BODY */
/* ------------------------------ */

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html {
	height: 100%;
	scroll-behavior: smooth;
}


body {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	text-align: left;
	line-height: 20px;
	font-family: Segoe UI, sans-serif;
	background: var(--bg-color);
	color: var(--text-color);
	margin-bottom: 60px;
}

.example-wrapper {
	margin: 1em auto;
	width: 95%;
	font: 18px / 1.5 sans-serif;
}

.example-wrapper code {
	background: #F5F5F5;
	padding: 2px 6px;
}

/* ------------------------------ */
/* LOGO */
/* ------------------------------ */

.logo-wrapper {
	display: flex;
	justify-content: center;
	/* centre horizontalement */
	align-items: center;
	/* centre verticalement si wrapper a une hauteur */
	margin: 1rem 0;
}

.logo-wrapper img {
	max-width: 100%;
	height: auto;
	display: block;
	/* évite les espaces en dessous de l'image */
}

.img-sponsor {
	display: block;
	/* nécessaire pour margin auto */
	margin: 0 auto;
	/* centre horizontalement */
	max-width: 90%;
	/* responsive */
	height: auto;
	width: 100%;
}

.banner {
	vertical-align: middle;
	width: 100%;
}

/* ------------------------------ */
/* TEXTES */
/* ------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6,
.contentheading,
.componentheading {
	padding: 3px 0;
	margin: 0;
	line-height: 1.2;
	font-weight: bold;
	color: var(--heading-color);
}

h1 {
	font-size: 1.75em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.25em;
}

h4 {
	font-size: 1em;
}

p {
	padding: 5px 0;
	font-family: Georgia, Palatino, sans-serif;
	text-align: justify;
}

.text-quizz {
	color: var(--beautifulck-text);
}

/* LIENS */
a,
a:visited {
	color: var(--link-color);
}

a:hover {
	color: var(--link-hover);
}

.link-article {
	color: var(--link-article-color);
}

/* ------------------------------ */
/* IMAGES */
/* ------------------------------ */
.image-row-scroll {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	/* active le scroll horizontal */
	white-space: nowrap;
	/* empêche le retour à la ligne */
	padding: 10px;
	border: 1px solid #ccc;
	/* optionnel, juste pour voir le conteneur */
}

.image-row-scroll img {
	flex: 0 0 auto;
	/* empêche les images de rétrécir */
	width: auto;
	height: 200px;
	border-radius: 8px;
}

/* Masquer la scrollbar sur certains navigateurs (optionnel) */
.image-row-scroll::-webkit-scrollbar {
	height: 6px;
}

.image-row-scroll::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 3px;
}

/* ------------------------------ */
/* ANNONCE FORMULAIRE */
/* ------------------------------ */
/* CONTAINER */
.container-annonce {
	max-width: 1000px;
	margin: auto;
	padding: 20px;
}

/* CARD */
.card-annonce {
	background: var(--block-bg);
	padding: 30px;
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* HEADER */
.card-header-annonce {
	margin-bottom: 25px;
}

.card-header-annonce h2 {
	margin-bottom: 5px;
}

/* SECTION */
.form-section {
	margin-bottom: 30px;
}

.form-section h3 {
	font-size: 1.1rem;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 5px;
}

/* GRID */
.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.form-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* PHOTOS */
.photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 15px;
}

.photo-card {
	background: #fff;
	border-radius: 8px;
	padding: 10px;
	text-align: center;
	border: 1px solid var(--border-color);
}

.photo-card img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 10px;
}

/* ACTIONS */
.form-actions {
	display: flex;
	gap: 15px;
	margin-top: 20px;
}

/* BOUTONS */
.btn-save {
	background: #2e7d32;
	color: white;
	border: none;
	padding: 10px 18px;
	border-radius: 6px;
	cursor: pointer;
}

.btn-save:hover {
	background: #256628;
}

.btn-cancel {
	padding: 10px 18px;
	border-radius: 6px;
	border: 1px solid #aaa;
	text-decoration: none;
}



/* ------------------------------ */
/* CHAT */
/* ------------------------------ */
.chat-page {
	max-width: 1200px;
	margin: auto;
	padding: 30px;
}

.chat-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.chat-header h2 {
	font-size: 28px;
	font-weight: 600;
}

.alert-text {
	color: #b91c1c;
	margin-bottom: 25px;
}

.btn-add {
	background: #3b82f6;
	color: white;
	padding: 10px 18px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 500;
}

.btn-add:hover {
	background: #2563eb;
}

.chat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 25px;
}

.chat-card {
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	transition: 0.3s;
}

.chat-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.chat-photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	/* garde une proportion stable */
	overflow: hidden;
	position: relative;
}

.chat-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* remplit la zone sans déformer */
	display: block;
}

.chat-badge {
	position: absolute;
	bottom: 10px;
	left: 10px;
	background: rgba(0, 0, 0, 0.6);
	color: white;
	padding: 5px 10px;
	border-radius: 20px;
	font-size: 13px;
}

.chat-content {
	padding: 18px;
}

.chat-content h3 {
	margin-bottom: 10px;
	font-size: 20px;
}

.chat-info p {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	font-size: 14px;
	color: var(--text-standard-color);
}

.chat-info span {
	font-weight: 600;
	color: var(--text-standard-color);
}

.chat-actions {
	margin-top: 15px;
	display: flex;
	gap: 10px;
}

.btn-edit {
	flex: 1;
	background: #10b981;
	color: white;
	text-align: center;
	padding: 8px;
	border-radius: 6px;
	text-decoration: none;
}

.btn-edit:hover {
	background: #059669;
}

.btn-delete {
	flex: 1;
	background: #ef4444;
	color: white;
	text-align: center;
	padding: 8px;
	border-radius: 6px;
	text-decoration: none;
}

.btn-delete:hover {
	background: #dc2626;
}

.no-chat {
	font-size: 18px;
	color: #666;
}

.chat-parents {
	margin-top: 15px;
}

.parents-row {
	display: flex;
	gap: 15px;
}

.parent-card {
	flex: 1;
	background: #f7f7f7;
	padding: 10px;
	border-radius: 8px;
	font-size: 14px;
}

.parent-card strong {
	display: block;
	margin-bottom: 5px;
}

.chat-parents {
	margin-top: 20px;
}

/* GRID RESPONSIVE */
.parents-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* CARD */
.parent-card {
	padding: 12px;
	border-radius: 10px;
	border: 1px solid var(--border-color);
	transition: 0.2s;
}

/* HOVER léger */
.parent-card:hover {
	transform: translateY(-2px);
}

/* TITRE */
.parent-title {
	font-size: 0.8rem;
	font-weight: 600;
	margin-bottom: 6px;
	text-transform: uppercase;
	opacity: 0.7;
}

/* NOM */
.parent-name {
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 4px;
}

/* DETAILS */
.parent-details {
	font-size: 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* COULEURS SEXE */
.parent-card.mother {
	border-left: 4px solid #e91e63;
}

.parent-card.father {
	border-left: 4px solid #2196f3;
}

/* MOBILE */
@media (max-width: 600px) {
	.parents-grid {
		grid-template-columns: 1fr;
	}
}

.eleveur-chat-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.eleveur-chat-card {
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
}

/* ------------------------------ */
/* FOOTER */
/* ------------------------------ */
.footer {
	background: var(--footer-bg);
	padding: 1rem 2rem;
	display: flex;
	justify-content: space-between;
	border-top: 1px solid var(--border-dark);
	width: 100%;
	z-index: 99999;
}

/* ------------------------------ */
/* NAVIGATION */
/* ------------------------------ */

#nav ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav ul.menu>li {
	float: left;
	border-right: 1px solid var(--border-dark);
}

#nav ul.menu>li>a {
	padding: 15px 20px;
	display: block;
	text-decoration: none;
	background: var(--menu-bg);
	color: var(--menu-text);
}

#nav ul.menu>li:hover>a,
#nav ul.menu>li.active>a {
	background: var(--menu-hover-bg);
	color: var(--menu-text-hover);
}

.nav {
	display: block;
}

/* Sous-menus */
#nav ul.menu li ul {
	position: absolute;
	left: -999em;
	z-index: 999;
	margin: 0;
	padding: 0;
	background: var(--menu-bg);
	border: 1px solid var(--border-dark);
}

#nav ul.menu li:hover>ul {
	left: auto;
}

.nav-header {
	color: var(--nav-header-color);
	background-color: var(--nav-header-bg);
}

.rounded {
	margin-bottom: 500px;
}

#menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 20px;
}

#menu li {
	position: relative;
}

#menu a {
	text-decoration: none;
	color: #fff;
	padding: 10px;
	display: block;
}

#menu a:hover {
	color: #000;
}

/* Sous-menu caché */
.submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: rgb(72, 128, 212);
	list-style: none;
	padding: 0;
	margin: 0;
	min-width: 180px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	width: 50%;
}

.submenu li a {
	padding: 10px;
	white-space: nowrap;
}

/* Affichage au survol */
.has-submenu:hover .submenu {
	display: block;
}

/* Optionnel : effet hover */
.submenu li a:hover {
	background: #fff;
}

.hidden {
	display: none !important;
}

/* ------------------------------ */
/* LAYOUT: LEFT / CENTER / RIGHT */
/* ------------------------------ */

#left,
#right,
#center {
	float: left;
	background: var(--center-bg);
}

#left {
	width: 20%;
}

#center {
	width: 60%;
}

#right {
	width: 20%;
	float: right;
}

/* Left, Center, Right */
#left {
	flex: 1 1 25%;
	/* flex-grow 1, flex-shrink 1, base 25% */
	min-width: 150px;
	/* évite qu'il devienne trop petit */
	max-width: 40%;
	width: 20%;
}

#center {
	flex: 1 1 50%;
	/* flexible à 50% */
	display: block;
	justify-content: left;
	min-width: 200px;
	/* évite chevauchement */
}

#right {
	flex: 1 1 25%;
	min-width: 150px;
}

/* Marges internes */
#left>div.inner,
#right>div.inner {
	padding: 15px;
}

/* ------------------------------ */
/* ENCARTS / PRESSE */
/* ------------------------------ */
.card-presse {
	transition: transform .2s ease, box-shadow .2s ease;
	border-radius: 12px;
}

.card-presse:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ------------------------------ */
/* ENCARTS / BLOCS */
/* ------------------------------ */

.encart-article,
.encart-connect,
.encart-elevage,
.encart-adhesion,
.encart-campagne {
	border: 1px solid var(--border-dark);
	padding: 7px;
	background-color: var(--block-bg);
	border-radius: 12px;
	margin: 10px;
}

.encart-connect,
.encart-elevage {
	max-width: 50%;
}

.encart-campagne {
	max-width: 70%;
}

.encart-adhesion {
	max-width: 100%;
}

/* ------------------------------ */
/* BOUTONS */
/* ------------------------------ */

.btn-primary,
.btn-danger,
.btn-success {
	color: #fff !important;
}

#theme-toggle {
	padding: 9px;
	margin-top: 4px;
	float: right;
	margin-right: 2%;
}

/* ------------------------------ */
/* BEAUTIFULCK */
/* ------------------------------ */

.beautifulck.banner.blue .beautifulck_title {
	background: var(--menu-bg);
}

.beautifulck_content ul li a {

	color: var(--beautifulck-text);
	text-decoration: none;
	padding-left: 14px;
	font-size: 1rem;
}

.beautifulck_content ul li a:hover,
.beautifulck_content ul li a:visited,
.beautifulck_content ul li a:focus {

	color: var(--beautifulck-text-hover);
	text-decoration: none;
}

/* ------------------------------ */
/* INPUT */
/* ------------------------------ */
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
	min-height: 25px !important;
	height: 30px;
}

textarea {
	height: 100px;
}


/* ------------------------------ */
/* LISTES */
/* ------------------------------ */
ul,
ol {
	margin: 0 !important;
}

.form-control,
.form-control:disabled,
select:disabled {
	height: auto !important;
}

/* ------------------------------ */
/* Lien "Nouvelle campagne" */
/* ------------------------------ */
.campaign-new {
	display: inline-block;
	margin-bottom: 15px;
	padding: 10px 16px;
	background: #0566ad;
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	transition: background 0.2s ease;
}

.campaign-new:hover,
.campaign-new:visited {
	background: #0566ad;
	color: var(--link-campagne-color);
}

/* Liste */
.campaign-list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 800px;
}

.campaign-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 16px;
	margin-bottom: 10px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}

/* Texte */
.campaign-info {
	flex: 1;
	color: #374151;
}

.campaign-info strong {
	color: #111827;
}

.campaign-sent {
	color: #16a34a;
	font-weight: 600;
	margin-left: 6px;
}

/* Actions */
.campaign-actions a {
	margin-left: 8px;
	padding: 6px 10px;
	text-decoration: none;
	border-radius: 6px;
	font-size: 0.9rem;
	transition: background 0.2s ease;
}

.campaign-actions a.edit {
	background: #e0e7ff;
	color: #3730a3;
}

.campaign-actions a.edit:hover {
	background: #c7d2fe;
}

.campaign-actions a.send {
	background: #dcfce7;
	color: #166534;
}

.campaign-actions a.send:hover {
	background: #bbf7d0;
}

/* ------------------------------ */
/* FORMULAIRE */
/* ------------------------------ */

input[type="radio"],
input[type="checkbox"] {
	margin: 12px !important;
}

.formulaire {
	color: var(--text-color);
}

.text-ri {
	font-size: 1rem;
}

.formulaire-titre {
	color: var(--text-color);
	text-align: center;
}

.form-check {
	display: inline-flex !important;
	align-items: center;
	margin-right: 1rem;
	white-space: nowrap;
}

/* ------------------------------ */
/* DEMANDES */
/* ------------------------------ */
.demande-text {
	font-size: 0.75rem;
}

.cadre-info {
	width: 100%;
	margin: auto;
	font-size: 1rem
}

.cadre-formulaire {
	width: 90%;
	margin: auto;
	font-size: 1rem
}

.cadre-titre-formulaire {
	border: solid;
	width: 100%;
	margin: auto;
}

/* hamburger */
.hamburger {
	display: none;
	width: 30px;
	cursor: pointer;
}

.hamburger div {
	height: 3px;
	margin: 6px 0;
}

/* menu base */
#menu {
	display: none;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 20px;
	background: var(--menu-bg);
}

/* menu visible quand ouvert */
#menu:not(.hidden) {
	display: flex;
}

.accueil p,
.accueil ul li {
	font-size: 1rem;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Galerie */
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
	padding: 20px;
}

.gallery-thumb {
	width: 100%;
	height: 140px;
	object-fit: cover;
	cursor: pointer;
	border-radius: 6px;
}

/* Lightbox */
.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	z-index: 1000;
}

.lightbox.active {
	opacity: 1;
	pointer-events: auto;
}

.lightbox-image {
	max-width: 95vw;
	max-height: 90vh;
	object-fit: contain;
}

/* Croix */
.lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	font-size: 32px;
	background: none;
	border: none;
	color: white;
	cursor: pointer;
	padding: 10px;
}

legend {
	font-size: 1.25rem;
}

/* ------------------------------ */
/* EXPOSITIONS */
/* ------------------------------ */

.expo-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.5rem;
}

.expo-card {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1rem;
	background: #fff;
}

.expo-meta {
	color: #555;
	font-size: 0.95rem;
}

.titre-expo {
	color: #000;
	font-size: 0.9rem;
	text-transform: uppercase;
}

.source-expo {
	font-size: 0.75rem;
}

.lien-expo:hover,
.lien-expo:visited {
	color: var(--link-hover-expo);
}

.nom-orga-expo {
	font-size: 0.8rem;
	text-transform: uppercase;
}

.city-expo {
	font-size: 0.75rem;
	text-transform: uppercase;
}

#month-filter-form {
	margin-bottom: 1rem;
}

#month-select {
	padding: 0.3rem 0.5rem;
	font-size: 1rem;
}

/* ------------------------------ */
/* ANNONCES LISTE
/* ------------------------------ */
/* ===== LISTE ===== */
.annonce-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.5rem;
}

/* ===== CARTE ===== */
.annonce-card {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
}

/* ===== TITRE ===== */
.titre-annonce {
	font-size: 0.9rem;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 0.5rem;
}

/* ===== IMAGE ===== */
.annonce-img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 0.6rem;
}

.annonce-img-default {
	object-fit: contain;
	background: #f5f5f5;
}

/* ===== META ===== */
.annonce-meta {
	font-size: 0.8rem;
	color: #555;
	margin-bottom: 0.5rem;
}

/* ===== DESCRIPTION ===== */
.annonce-description {
	font-size: 0.85rem;
	color: #333;
	margin-bottom: 0.4rem;
}

/* ===== EFFECTIF ===== */
.annonce-effectif-inline {
	font-size: 0.8rem;
	margin-bottom: 0.6rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.effectif-femelle,
.effectif-male {
	background: #f5f5f5;
	border-radius: 12px;
	padding: 0.2rem 0.5rem;
	font-weight: 600;
}

.effectif-femelle {
	color: #a03a6f;
}

.effectif-male {
	color: #2f5fa7;
}

/* ===== TABLEAU PARENTS ===== */
.annonce-parents {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8rem;
	margin-bottom: 0.8rem;
}

.annonce-parents th {
	text-align: left;
	color: #666;
	font-weight: 600;
	padding: 0.3rem 0;
	width: 35%;
}

.annonce-parents td {
	padding: 0.3rem 0;
	color: #333;
}

.annonce-parents tr:not(:last-child) {
	border-bottom: 1px dashed #ddd;
}

/* ===== LIEN ===== */
.lien-annonce {
	margin-top: auto;
	font-size: 0.8rem;
	text-align: center;
	padding: 0.4rem;
	border-radius: 4px;
	text-decoration: none;
	color: var(--lien-annonce-color);
	border: 1px solid #ccc;
	background: #0088cc;
}


a.lien-annonce:hover,
a.lien-annonce:focus,
a.lien-annonce:visited {
	background: #0088cc;
	color: var(--lien-annonce-color);
}

.lien-annonce:hover,
.lien-annonce:focus,
.lien-annonce:visited {
	background: #0088cc;
}

/* ===== GALERIE ===== */
.annonce-galerie {
	margin-bottom: 0.6rem;
	overflow: hidden;
	border-radius: 6px;
}

.galerie-main {
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

/* Images */
.galerie-main img {
	height: 220px;
	width: auto;
	object-fit: cover;
	border-radius: 8px;
	scroll-snap-align: start;
	flex-shrink: 0;
}

/* Desktop un peu plus haut */
@media (min-width: 768px) {
	.galerie-main img {
		height: 260px;
	}
	.cfr-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    /* Côte à côte pour "Marie Aillaud" (2/3 texte, 1/3 image) */
    .cfr-grid-3 {
        grid-template-columns: 2fr 1fr;
        gap: 32px;
    }
    .cfr-reverse-mobile {
        grid-template-columns: 1fr 2fr;
    }

    /* On remet l'image à sa hauteur normale sur grand écran */
    .cfr-media {
        max-height: none;
    }
}

/* Scrollbar visible */
.galerie-main::-webkit-scrollbar {
	height: 10px;
}

.galerie-main::-webkit-scrollbar-track {
	background: #eee;
	border-radius: 10px;
}

.galerie-main::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: 10px;
}

.galerie-main::-webkit-scrollbar-thumb:hover {
	background: #444;
}

.effectif-femelle,
.effectif-male {
	font-weight: bold;
	font-size: 1.2rem;
	/* augmente la taille */
	margin-right: 0.3rem;
}

.effectif-femelle {
	color: #e74c3c;
	/* rouge / rose */
	font-weight: bold;
	font-size: 1.3rem;
	/* plus visible */
	margin-right: 0.5rem;
}

.effectif-male {
	color: #3498db;
	/* bleu */
	font-weight: bold;
	font-size: 1.3rem;
	/* plus visible */
	margin-left: 0.2rem;
}




/* ------------------------------ */
/* STANDARD */
/* ------------------------------ */
/* ------------------------------ */
/* BLEU RUSSE – STYLES SPÉCIFIQUES */
/* ------------------------------ */
.bleu-russe .race-page {
	display: block;
	max-width: 1200px;
	margin: auto;
	padding: 20px;
}

.bleu-russe .race-content {
	width: 100%;
}

/* supprime les règles race-menu */
.bleu-russe .race-menu {
	display: none;
}

.bleu-russe .race-menu ul {
	list-style: none;
	padding: 0;
}

.bleu-russe .race-menu li {
	margin-bottom: 8px;
}

.bleu-russe .race-menu a {
	text-decoration: none;
	color: #333;
	font-size: 0.9rem;
}

.bleu-russe .race-menu a:hover {
	color: #336699;
}

/* CONTENT */
.bleu-russe .race-section {
	margin-bottom: 40px;
}

/* GRID STANDARD */
.bleu-russe .standard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

/* CARD */
.bleu-russe .standard-card {
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: 0.25s;
}

.bleu-russe .standard-card:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-3px);
}

.bleu-russe .standard-card img {
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.bleu-russe .standard-header {
	background: #f3f3f3;
	padding: 10px 14px;
	font-weight: bold;
	font-size: 0.9rem;
	letter-spacing: 0.5px;
	color: var(--header-standard-color);
}

.bleu-russe .standard-body {
	padding: 14px;
}

.bleu-russe .standard-body h3 {
	margin-top: 0;
	font-size: 1rem;
}

.bleu-russe .standard-body ul {
	margin: 0;
	padding-left: 18px;
	line-height: 1.6;
}

.bleu-russe .standard-body li {
	margin-bottom: 4px;
	color: var(--text-standard-color)
}

/* ALERTES */
.bleu-russe .standard-warning {
	padding: 15px;
	border-left: 4px solid #336699;
	background: #eef5ff;
	border-radius: 6px;
	margin-bottom: 15px;
	color: var(--text-standard-color);
}

.bleu-russe .standard-danger {
	padding: 15px;
	border-left: 4px solid #c0392b;
	background: #fdecea;
	border-radius: 6px;
	margin-bottom: 15px;
	color: var(--text-standard-color);
}

.bleu-russe .standard-primary {
	padding: 15px;
	border-left: 4px solid #4a9c51;
	background: #cbeec9;
	border-radius: 6px;
	color: var(--text-standard-color);
}

/* ------------------------------ */
/* COULEURS BLEU RUSSE */
/* ------------------------------ */
.bleu-russe .color-card {
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fff;
	padding: 15px;
	margin-bottom: 30px;
}

/* grille des 4 couleurs */
.bleu-russe .color-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 10px;
}

/* bloc photo */
.bleu-russe .color-item {
	text-align: center;
}

/* image */
.bleu-russe .color-item img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 6px;
	transition: 0.25s;
}

.bleu-russe .color-item img:hover {
	transform: scale(1.05);
}

/* titre sous image */
.bleu-russe .color-item figcaption {
	margin-top: 6px;
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
	color: #333;
}

.cfr-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--cfr-text-main);
    line-height: 1.6;
}

/* Cartes principales */
.cfr-card {
    background: var(--cfr-card-bg);
    border-radius: var(--cfr-radius);
    border: 1px solid var(--cfr-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
    overflow: hidden;
}

.cfr-card-padded {
    padding: 40px 32px;
}

/* Grilles & Disposition */
.cfr-grid {
    display: grid;
    gap: 32px;
    align-items: center;
}
.cfr-grid-2,
.cfr-grid-3 {
    display: grid;
    grid-template-columns: 1fr; /* Une seule colonne prenant 100% de la largeur */
    gap: 20px; /* Espace aéré entre l'image et le texte */
}

/* Typographie & Titres */
.cfr-title {
    color: var(--cfr-text-dark);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 8px 0 16px 0;
}

.cfr-header-center {
    text-align: center;
    margin-bottom: 40px;
}

.cfr-divider {
    width: 48px;
    height: 4px;
    background: var(--cfr-accent);
    margin: 8px auto 0 auto;
    border-radius: 2px;
}

.cfr-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--cfr-border);
    color: var(--cfr-text-dark);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 50px;
}

.cfr-badge-alt {
    background: var(--cfr-accent-soft);
    color: var(--cfr-accent);
}

/* Images */
.cfr-media {
    width: 100%;
    height: 100%;
    min-height: 250px;
}

.cfr-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cfr-media-center {
    text-align: center;
}

.cfr-img-rounded {
    max-width: 100%;
    max-height: 220px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    object-fit: cover;
}

/* Éléments de contenus */
.cfr-body {
    padding: 32px;
}

.cfr-footer-note {
    background: var(--cfr-bg-main);
    padding: 20px 32px;
    border-top: 1px solid var(--cfr-border);
    font-size: 0.95rem;
}

.cfr-highlight-text {
    font-weight: 600;
    color: var(--cfr-text-dark);
}

.cfr-quote {
    margin: 16px 0 0 0;
    padding: 12px 16px;
    background: var(--cfr-bg-main);
    border-left: 4px solid var(--cfr-accent);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--cfr-text-muted);
    border-radius: 0 8px 8px 0;
}

/* Bloc d'hommage final */
.cfr-hommage-block {
    border-top: 1px solid var(--cfr-border);
    padding-top: 32px;
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
}

.cfr-thank-you {
    margin-top: 20px;
    background: var(--cfr-accent-soft);
    padding: 20px;
    border-radius: 12px;
}

.cfr-thank-you-bold {
    display: block;
    margin-top: 10px;
    color: var(--cfr-accent);
    font-weight: 700;
    font-size: 1.1rem;
}

.cfr-img-cover {
    max-width: 100%;
    height: auto; /* Maintient les proportions de l'image pour ne pas la déformer */
    display: block; /* Optionnel, mais recommandé pour éviter les petits espaces sous l'image */
}

/* responsive mobile */
@media(max-width:768px) {
	.bleu-russe .color-grid {
		grid-template-columns: 1fr;
	}

	.bleu-russe .color-item img {
		height: 220px;
	}

}

/* responsive général race-page */
@media(max-width:900px) {
	.bleu-russe .race-page {
		grid-template-columns: 1fr;
	}

	.bleu-russe .race-menu {
		position: relative;
	}
}

/* ------------------------------ */
/* BLEU RUSSE ARTICLE (MODERNE SAFE) */
/* ------------------------------ */

/* ------------------------------ */
/* BLEU RUSSE ARTICLE – VERSION FINALE */
/* ------------------------------ */

/* VARIABLES ACCENT */
:root {
	--russian-blue-accent: #4f8cff;
	--russian-blue-accent-soft: rgba(79, 140, 255, 0.12);
}

/* DARK MODE AJUSTEMENT */
:root[data-theme="dark"] {
	--russian-blue-accent-soft: rgba(79, 140, 255, 0.18);
}

/* CONTAINER */
.bleu-russe-article .race-page {
	max-width: 1100px;
	margin: auto;
	padding: 30px 20px;
}

/* HERO */
.bleu-russe-article .race-section:first-child {
	text-align: center;
	padding: 40px 20px;
	border-radius: 16px;
	background: linear-gradient(135deg,
			var(--russian-blue-accent-soft),
			var(--block-bg));
	border: 1px solid var(--border-color);
	margin-bottom: 40px;
}

/* TITRE PRINCIPAL */
.bleu-russe-article h1 {
	font-size: 2.2rem;
	margin-bottom: 15px;
	color: var(--heading-color);
}

/* DÉGRADÉ SAFE */
@supports (-webkit-background-clip: text) {
	.bleu-russe-article h1 {
		background: linear-gradient(90deg, #4f8cff, #8db3ff);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

/* SECTIONS = CARDS */
.bleu-russe-article .race-section {
	background: var(--block-bg);
	border: 1px solid var(--border-color);
	border-radius: 16px;
	padding: 25px;
	margin-bottom: 25px;

	position: relative;
	overflow: hidden;
	transition: all 0.25s ease;
}

/* LIGHT MODE AMÉLIORATION */
:root[data-theme="light"] .bleu-russe-article .race-section {
	background: #ffffff;
}

/* DARK MODE AMÉLIORATION */
:root[data-theme="dark"] .bleu-russe-article .race-section {
	background: #2a2a2a;
}

/* HOVER */
.bleu-russe-article .race-section:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
	border-color: var(--russian-blue-accent);
}

/* BARRE LATÉRALE DESIGN */
.bleu-russe-article .race-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: linear-gradient(to bottom,
			#4f8cff,
			#8db3ff);
	opacity: 0.9;
}

/* TITRES SECTIONS */
.bleu-russe-article h2 {
	font-size: 1.4rem;
	margin-bottom: 10px;
	color: var(--russian-blue-accent);
	font-weight: 600;
}

/* TEXTE */
.bleu-russe-article p {
	line-height: 1.7;
	font-size: 1.05rem;
	color: var(--text-color);
}

/* ESPACEMENT TEXTE */
.bleu-russe-article p+p {
	margin-top: 10px;
	opacity: 0.9;
}

/* SÉPARATEUR DISCRET */
.bleu-russe-article .race-section:not(:first-child)::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	height: 1px;
	background: linear-gradient(to right,
			transparent,
			var(--border-color),
			transparent);
}


/* -------------------------------- */
/* GENETIQUE */
/* -------------------------------- */

.genetique-nebelung .race-page {
	max-width: 1100px;
	margin: auto;
	padding: 30px 20px;
}

/* -------------------------------- */
/* HERO */
/* -------------------------------- */

.hero-section {
	text-align: center;
}

.hero-icon {
	width: 90px;
	height: 90px;

	margin: 0 auto 20px;

	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	background: linear-gradient(135deg, #336699, #4f8cff);

	color: white;

	font-size: 2.4rem;

	box-shadow: 0 12px 35px rgba(79, 140, 255, 0.25);
}

.article-badge {
	display: inline-block;

	padding: 8px 14px;

	border-radius: 999px;

	background: var(--russian-blue-accent-soft);

	color: var(--link-color);

	font-size: 0.78rem;

	font-weight: 600;

	text-transform: uppercase;

	letter-spacing: 1px;

	margin-bottom: 18px;
}

.hero-intro {
	max-width: 760px;
	margin: auto;

	font-size: 1.08rem;
	padding: 2%;
	line-height: 1.9;
}

/* -------------------------------- */
/* SECTIONS */
/* -------------------------------- */

.genetique-nebelung .race-section {
	background: var(--block-bg);

	border: 1px solid var(--border-color);

	border-radius: 18px;

	padding: 28px;

	margin-bottom: 28px;

	position: relative;

	overflow: hidden;

	transition: all 0.25s ease;
}

.genetique-nebelung .race-section:hover {
	transform: translateY(-4px);

	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);

	border-color: var(--russian-blue-accent);
}

.genetique-nebelung .race-section::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 5px;
	height: 100%;

	background: linear-gradient(to bottom,
			#336699,
			#4f8cff);
}

/* -------------------------------- */
/* SECTION TITLES */
/* -------------------------------- */

.section-title-flex {
	display: flex;
	align-items: center;
	gap: 14px;

	margin-bottom: 18px;
}

.section-icon {
	width: 46px;
	height: 46px;

	border-radius: 14px;

	display: flex;
	align-items: center;
	justify-content: center;

	background: var(--russian-blue-accent-soft);

	color: var(--russian-blue-accent);

	font-size: 1.2rem;

	flex-shrink: 0;

	transition: 0.25s ease;
}

.race-section:hover .section-icon {
	transform: rotate(-6deg) scale(1.08);
}

.section-title-flex h2 {
	margin: 0;
}

/* -------------------------------- */
/* GENOTYPE BOX */
/* -------------------------------- */

.genotype-box {
	margin-top: 24px;

	padding: 20px;

	border-radius: 16px;

	background: var(--russian-blue-accent-soft);

	border: 1px solid var(--border-color);

	text-align: center;
}

.genotype-box strong {
	display: block;

	font-size: 2rem;

	margin-top: 10px;

	color: var(--russian-blue-accent);
}

/* -------------------------------- */
/* CARDS */
/* -------------------------------- */

.genetic-grid {
	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

	gap: 20px;

	margin: 30px 0;
}

.genetic-card {
	background: var(--bg-color);

	border: 1px solid var(--border-color);

	border-radius: 18px;

	overflow: hidden;

	transition: 0.25s ease;
}

.genetic-card:hover {
	transform: translateY(-4px);

	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.genetic-header {
	background: linear-gradient(135deg,
			#336699,
			#4f8cff);

	color: white;

	padding: 16px;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	font-weight: 600;
}

.genetic-body {
	padding: 24px;

	text-align: center;
}

.genetic-value {
	margin-top: 14px;

	font-size: 1.8rem;

	font-weight: bold;

	color: var(--russian-blue-accent);
}

/* -------------------------------- */
/* TABLE */
/* -------------------------------- */

.table-wrapper {
	overflow-x: auto;
}

.genetic-table {
	width: 100%;

	border-collapse: collapse;

	margin-top: 12px;
}

.genetic-table th {
	background: linear-gradient(135deg,
			#336699,
			#4f8cff);

	color: white;

	padding: 14px;

	text-align: left;
}

.genetic-table td {
	padding: 14px;

	border-bottom: 1px solid var(--border-color);
}

.genetic-table tr:hover {
	background: rgba(79, 140, 255, 0.05);
}

/* -------------------------------- */
/* PUNNETT */
/* -------------------------------- */

.punnett-grid {
	display: grid;

	grid-template-columns: repeat(3, 1fr);

	gap: 12px;

	margin: 30px 0;
}

.punnett-cell {
	padding: 18px;

	border-radius: 14px;

	text-align: center;

	font-weight: 700;

	border: 1px solid var(--border-color);
}

.punnett-header {
	background: linear-gradient(135deg,
			#336699,
			#4f8cff);

	color: white;
}

.punnett-good {
	background: rgba(34, 197, 94, 0.12);

	color: #16a34a;
}

.punnett-warning {
	background: rgba(245, 158, 11, 0.12);

	color: #d97706;
}

.punnett-danger {
	background: rgba(239, 68, 68, 0.12);

	color: #dc2626;
}

/* -------------------------------- */
/* STATS */
/* -------------------------------- */

.stats-grid {
	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

	gap: 20px;

	margin-top: 30px;
}

.stats-card {
	background: var(--bg-color);

	border: 1px solid var(--border-color);

	border-radius: 18px;

	padding: 24px;

	text-align: center;

	transition: 0.25s ease;
}

.stats-card:hover {
	transform: translateY(-4px);
}

.stats-card i {
	display: block;

	font-size: 1.8rem;

	margin-bottom: 12px;

	color: var(--russian-blue-accent);

	transition: 0.25s ease;
}

.stats-card:hover i {
	transform: translateY(-3px);
}

.stats-card strong {
	display: block;

	font-size: 2rem;

	margin-bottom: 8px;

	color: var(--russian-blue-accent);
}

.final-warning {
	margin-top: 30px;
}

/* -------------------------------- */
/* ICONS */
/* -------------------------------- */

.hero-icon i,
.section-icon i,
.stats-card i {
	line-height: 1;

	filter: drop-shadow(0 2px 6px rgba(79, 140, 255, 0.25));
}

/* -------------------------------- */
/* RESPONSIVE */
/* -------------------------------- */

@media(max-width:768px) {

	.genetique-nebelung .race-page {
		padding: 20px 12px;
	}

	.hero-icon {
		width: 70px;
		height: 70px;

		font-size: 1.8rem;
	}

	.section-icon {
		width: 40px;
		height: 40px;

		font-size: 1rem;
	}

	.hero-intro {
		font-size: 1rem;
	}

	.punnett-grid {
		gap: 8px;
	}

	.punnett-cell {
		padding: 12px;

		font-size: 0.9rem;
	}

	.genetic-value {
		font-size: 1.5rem;
	}

	.stats-card strong {
		font-size: 1.6rem;
	}

}

/* ------------------------------ */
/* ELEVEUR CARDS */
/* ------------------------------ */
.eleveur-card {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1rem;
	background: #fff;
	margin-bottom: 20px;
	color: var(--text-standard-color);
}

.eleveur-header {
	background: #f3f3f3;
	padding: 10px 14px;
	font-weight: bold;
	font-size: 1.2rem;
	color: var(--header-standard-color);
}

.eleveur-header small {
	font-size: 0.8rem;
	color: var(--header-standard-color);
}

.eleveur-body {
	padding: 14px;
}

.eleveur-body h3 {
	color: var(--text-standard-color);
	font-weight: bold;
	font-size: 1rem;
}

.eleveur-form-section {
	margin-bottom: 15px;
}

.eleveur-form-actions {
	display: flex;
	gap: 15px;
	margin-top: 15px;
}

.form-label {
	font-size: 1rem;
}

.btn-ajout-chat {
	margin: 14px 10px;
}

.veto-section {
	padding: 80px 20px;
	background: linear-gradient(to bottom, #f9fafb, #ffffff);
	text-align: center;
}

.section-title {
	font-size: 2.2rem;
	font-weight: 700;
	margin-bottom: 30px;
	color: #111827;
}

.sub-title {
	margin-top: 60px;
	font-size: 1.6rem;
	font-weight: 600;
	color: #1f2937;
}

/* 🚨 Bloc urgence */
.emergency-box {
	background: #fff1f2;
	border: 1px solid #fecaca;
	padding: 30px;
	border-radius: 20px;
	margin-bottom: 50px;
}

.emergency-box h3 {
	color: #b91c1c;
	margin-bottom: 10px;
}

.emergency-text {
	color: #7f1d1d;
	margin-bottom: 20px;
}

/* GRID */
.resources-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	max-width: 1000px;
	margin: 0 auto;
}

/* CARTES */
.resource-card {
	background: white;
	padding: 20px;
	border-radius: 16px;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
	transition: all 0.25s ease;
}

.resource-card h4 {
	margin-bottom: 10px;
	font-size: 1.1rem;
	color: #111827;
}

.resource-card p {
	font-size: 0.9rem;
	color: #6b7280;
}

.resource-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Carte importante */
.resource-card.important {
	border: 2px solid #ef4444;
	background: #fff5f5;
}

/* ------------------------------ */
/* BADGES TITRES PARENTS – VERSION DOUCE */
/* ------------------------------ */

.badge-mere,
.badge-pere {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: var(--badge-block-bg);
	border: 1px solid var(--border-color);
	color: var(--badge-text-color);
	transition: all 0.2s ease;
}

/* Légère couleur différente mais discrète */
.badge-mere {
	border-left: 3px solid #c96b8f;
	/* rose doux */
}

.badge-pere {
	border-left: 3px solid #6b8fc9;
	/* bleu doux */
}

/* Petit effet hover subtil */
.badge-mere:hover,
.badge-pere:hover {
	background: rgba(163, 156, 156, 0.03);
	transform: translateY(-1px);
	color: var(--badge-parent-color);
}


/* ------------------------------ */
/* NOM DES PARENTS PLUS MARQUÉS */
/* ------------------------------ */

.parent-name {
	font-weight: 700;
	font-size: 1rem;
	color: var(--heading-color);
	letter-spacing: 0.3px;
	transition: all 0.2s ease;
}

/* Option : petit effet discret au survol */
.parent-name:hover {
	color: var(--link-color);
}

.bloc-departement {
	margin-bottom: 2.5rem;
}

/* Titre département */
.titre-departement {
	font-size: 1.3rem;
	margin-bottom: 1rem;
	padding: 8px 12px;
	border-left: 5px solid #336699;
	background: var(--block-bg);
	border-radius: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* compteur */
.titre-departement .count {
	font-size: 0.9rem;
	opacity: 0.6;
}

/* effet séparation visuelle */
.bloc-departement:not(:last-child) {
	border-bottom: 1px dashed var(--border-color);
	padding-bottom: 1.5rem;
}

.bloc-departement {
	margin-bottom: 2.5rem;
}

/* HEADER */
.header-departement {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 18px;
	margin-bottom: 15px;

	background: linear-gradient(135deg, #336699, #4f8cff);
	color: white;

	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* GAUCHE */
.dept-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dept-icon {
	font-size: 1.4rem;
}

.dept-label {
	font-size: 0.7rem;
	opacity: 0.8;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.dept-name {
	font-size: clamp(0.95rem, 2.5vw, 1.2rem);
	font-weight: 700;
}

/* DROITE */
.dept-count {
	background: rgba(255, 255, 255, 0.2);
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 600;
}

/* SEPARATION */
.bloc-departement:not(:last-child) {
	border-bottom: 1px dashed var(--border-color);
	padding-bottom: 1.5rem;
}

@media (max-width: 600px) {

	.header-departement {
		padding: 10px 12px;
	}

	.dept-name {
		font-size: 1rem;
	}

	.dept-count {
		font-size: 0.75rem;
		padding: 4px 8px;
	}

	.dept-icon {
		font-size: 1.1rem;
	}
}


/* ------------------------------ */
/* LOGIN */
/* ------------------------------ */
/* ========================= */
/* LOGIN MODERNE */
/* ========================= */

.login-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-color);
	padding: 20px;
}

/* WRAPPER */
.login-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* CARD */
.login-card {
	width: 100%;
	max-width: 420px;

	background: var(--block-bg);
	border: 1px solid var(--border-color);
	border-radius: 18px;

	padding: 32px;

	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);

	transition: 0.3s ease;
}

.login-card:hover {
	transform: translateY(-3px);
}

/* HERO */
.login-hero {
	text-align: center;
	margin-bottom: 25px;
}

.login-icon {
	width: 70px;
	height: 70px;
	margin: auto;

	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.8rem;

	margin-bottom: 10px;
}

.login-hero h1 {
	font-size: 1.4rem;
	margin-bottom: 5px;
}

.login-hero p {
	font-size: 0.9rem;
	opacity: 0.7;
}

/* INPUTS */
.login-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.login-form label {
	font-size: 0.9rem;
	opacity: 0.8;
}

.login-form input {
	padding: 12px 14px;
	border-radius: 10px;

	border: 1px solid var(--border-color);
	background: var(--bg-color);
	color: var(--text-color);

	outline: none;
	transition: 0.2s;
}

.login-form input:focus {
	border-color: var(--russian-blue-accent);
	box-shadow: 0 0 0 3px var(--russian-blue-accent-soft);
}

/* PASSWORD */
.password-wrapper {
	position: relative;
}

.password-wrapper span {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	opacity: 0.6;
}

/* BUTTON */
.login-btn {
	margin-top: 10px;

	padding: 12px;
	border-radius: 10px;
	border: none;

	background: var(--russian-blue-accent);
	color: white;

	font-weight: 600;
	cursor: pointer;

	transition: 0.25s ease;
}

.login-btn:hover {
	transform: translateY(-2px);
	background: #3b82f6;
}

/* LINKS */
.login-links {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
	font-size: 0.85rem;
}

.login-links a {
	color: var(--link-color);
	text-decoration: none;
}

.login-links a:hover {
	color: var(--link-hover);
}

/* FLASH */
.login-flash {
	max-width: 420px;
	margin: 10px auto;
}

/* ------------------------------ */
/* INSCRIPTION COMPTE */
/* ------------------------------ */
.auth-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-color);
	padding: 20px;
}

.auth-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* CARD */
.auth-card {
	width: 100%;
	max-width: 460px;

	background: var(--block-bg);
	border: 1px solid var(--border-color);
	border-radius: 18px;

	padding: 32px;

	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);

	transition: 0.3s ease;
}

.auth-card:hover {
	transform: translateY(-3px);
}

/* HERO */
.auth-hero {
	text-align: center;
	margin-bottom: 20px;
}

.auth-icon {
	width: 70px;
	height: 70px;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;

	color: white;
	font-size: 1.8rem;
	margin-bottom: 10px;
}

.auth-hero h1 {
	font-size: 1.4rem;
	margin-bottom: 5px;
}

.auth-hero p {
	font-size: 0.9rem;
	opacity: 0.7;
}

/* FORM */
.auth-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Symfony form spacing fix */
.auth-form .form-group>div {
	margin-bottom: 10px;
}

/* INPUTS */
.auth-form input {
	padding: 12px 14px;
	border-radius: 10px;

	border: 1px solid var(--border-color);
	background: var(--bg-color);
	color: var(--text-color);

	width: 100%;
	outline: none;

	transition: 0.2s;
}

.auth-form input:focus {
	border-color: var(--russian-blue-accent);
	box-shadow: 0 0 0 3px var(--russian-blue-accent-soft);
}

/* PASSWORD */
.password-wrapper {
	position: relative;
}

.password-wrapper span {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	opacity: 0.6;
}

/* CAPTCHA */
.captcha-box {
	margin-top: 10px;
	padding: 12px;

	border: 1px solid var(--border-color);
	border-radius: 12px;

	background: var(--bg-color);
}

.captcha-img {
	display: block;
	margin: auto;
	max-width: 100%;
	border-radius: 8px;
	margin-bottom: 10px;
}

.captcha-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.captcha-reload {
	padding: 6px 10px;
	border-radius: 8px;

	border: 1px solid var(--border-color);
	background: transparent;

	cursor: pointer;

	color: var(--text-color);
	transition: 0.2s;
}

.captcha-reload:hover {
	background: var(--russian-blue-accent-soft);
}

/* BUTTON */
.auth-btn {
	margin-top: 10px;

	padding: 12px;
	border-radius: 10px;
	border: none;

	background: var(--russian-blue-accent);
	color: white;

	font-weight: 600;
	cursor: pointer;

	transition: 0.25s ease;
}

.auth-btn:hover {
	transform: translateY(-2px);
	background: #3b82f6;
}

/* FLASH */
.auth-flash {
	max-width: 460px;
	margin: 10px auto;
}


/* ------------------------------ */
/* LOGO CFBR */
/* ------------------------------ */
.login-icon,
.auth-icon {
	width: 70px;
	height: 70px;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* important pour PNG */
	padding: 10px;
}

/* IMAGE */
.login-icon img,
.auth-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ========================= */
/* RESET PASSWORD UX */
/* ========================= */

.auth-form label {
	font-size: 0.9rem;
	opacity: 0.8;
	margin-top: 5px;
}

.password-wrapper {
	position: relative;
}

.password-wrapper input {
	padding-right: 40px;
}

/* eye icon */
.password-wrapper span {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	opacity: 0.6;
	transition: 0.2s;
}

.password-wrapper span:hover {
	opacity: 1;
}

/* spacing between fields */
.auth-form {
	gap: 14px;
}

/* ========================= */
/* FORGOT PASSWORD CLEAN */
/* ========================= */

.auth-form label {
	font-size: 0.9rem;
	opacity: 0.8;
}

.auth-form input {
	margin-top: 6px;
	margin-bottom: 10px;
}

/* UX helper */
.auth-card p {
	font-size: 0.9rem;
	opacity: 0.7;
	margin-bottom: 15px;
	text-align: center;
}

/* ========================= */
/* SECURITE ARTICLE STYLE */
/* ========================= */

.securite-article .hero-section {
	background: var(--section-article-hero);
	border: 1px solid var(--border-color);
}

.securite-article .hero-icon {
	background: linear-gradient(135deg, #dc2626, #f97316);
}

.securite-article .standard-danger {
	border-left: 5px solid #dc2626;
}

.securite-article .standard-warning {
	border-left: 5px solid #f59e0b;
}

.securite-article .links {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.securite-article .links a {
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--block-bg);
	border: 1px solid var(--border-color);
	text-decoration: none;
	transition: 0.2s;
}

.securite-article .links a:hover {
	transform: translateY(-3px);
	border-color: var(--russian-blue-accent);
}

/* RESPONSIVE */
@media (max-width: 768px) {
	.bleu-russe-article h1 {
		font-size: 1.8rem;
	}

	.bleu-russe-article .race-section {
		padding: 20px;
	}
}

.insecticide-article .hero-section {
	background: var(--section-article-hero);
}

.insecticide-article .hero-icon {
	background: linear-gradient(135deg, #f97316, #ef4444);
}

.article-subtitle {
	font-size: 1.2rem;
	margin-bottom: 10px;
	color: var(--russian-blue-accent);
	font-weight: 600;
}

.quote-box {
	background: var(--russian-blue-accent-soft);
	padding: 16px;
	border-radius: 12px;
	margin: 15px 0;
	font-style: italic;
}

.insecticide-article .stats-card strong {
	color: #ef4444;
}

.encart-article {
	background: var(--center-bg);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 24px;
	max-width: 900px;
	margin: 20px auto;
	line-height: 1.7;
}

.article-titre h1 {
	font-size: 28px;
	margin-bottom: 20px;
	color: var(--heading-color);
	border-bottom: 3px solid var(--russian-blue-accent);
	padding-bottom: 10px;
}

.style-justify {
	text-align: justify;
	font-size: 16px;
}

/* Images plus propres que float */
.encart-article img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 10px 0;
}

/* images inline gauche (remplace float) */
.img-left {
	float: left;
	margin: 0 15px 10px 0;
	max-width: 160px;
}

/* bloc danger */
.danger-box {
	background: rgba(255, 0, 0, 0.08);
	border-left: 5px solid #e53935;
	padding: 15px;
	border-radius: 8px;
	margin: 20px 0;
	font-weight: 600;
}

/* séparation visuelle */
.separator {
	height: 1px;
	background: var(--border-color);
	margin: 20px 0;
}

.encart-article {
	background: var(--center-bg);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 24px;
	max-width: 900px;
	margin: 20px auto;
	line-height: 1.7;
}

.article-titre h1 {
	font-size: 28px;
	margin-bottom: 20px;
	color: var(--heading-color);
	border-bottom: 3px solid var(--russian-blue-accent);
	padding-bottom: 10px;
}

.style-indent {
	text-indent: 20px;
	margin-bottom: 14px;
}

.style-justify {
	text-align: justify;
	font-size: 16px;
	margin-bottom: 14px;
}

/* bloc lien */
.link-article {
	display: inline-block;
	background: var(--block-bg);
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	margin: 10px 0;
}

.link-article a {
	color: var(--link-color);
	font-weight: bold;
	text-decoration: none;
}

.link-article a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

/* bloc important */
.danger-box {
	background: rgba(255, 0, 0, 0.08);
	border-left: 5px solid #e53935;
	padding: 15px;
	border-radius: 8px;
	margin: 20px 0;
	font-weight: 600;
}

/* Conteneur aligné à droite */
.lang-switcher-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
	padding: 10px;
}

/* Bouton moderne en pilule (Pill button) */
.lang-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background-color: #f8f9fa;
    color: #2b2d42;
    border: 1px solid #e0e1dd;
    border-radius: 50px;
    text-decoration: none;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease-in-out;
}

/* Effet survol */
.lang-switch-btn:hover {
    background-color: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    color: #0f172a;
}

/* Conteneur et arrondi du drapeau */
.flag-icon {
    display: flex;
    align-items: center;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.flag-icon svg {
    display: block;
    object-fit: cover;
}

/* ------------------------------ */
/* RESPONSIVE */
/* ------------------------------ */

/* menu desktop */
@media screen and (min-width: 901px) {
	#menu:not(.hidden) {
		flex-direction: row;
	}

	.hamburger {
		display: none;
	}
}

@media screen and (max-width: 900px) {

	.cadre-info {
		width: 100%;
	}

	.cadre-titre-formulaire {
		width: 92%;
	}

	.cadre-formulaire {
		width: 90%;
	}


	.hidden {
		display: none !important;
	}

	#header {
		flex-direction: column;
		text-align: center;
	}

	#left,
	#center,
	#right {
		flex: 1 1 100%;
		min-width: 0;
		margin: 5px 0;
	}

	#center {
		margin: auto;
		width: 95%;
	}

	#right {
		display: none;
	}

	#left {

		display: none;
	}

	#center {
		width: 96%;
		margin: auto;
		padding: 2%;
	}

	h1 {
		font-size: 1.5rem;
	}

	h2 {
		font-size: 1.25rem;
	}

	h3 {
		font-size: 1.15rem;
	}

	.card-header {
		font-size: 1rem;
	}

	.encart-article p {
		font-size: 1rem;
	}

	.encart-article img {
		width: 100%;
	}

	.beautifulck_content ul li a {
		font-size: 0.75rem;
	}

	div.inner {
		margin: 5px 0 !important;
	}

	.encart-connect {
		max-width: 78%;
	}

	.img-sponsor {
		width: 100%;
	}

	.banner {
		width: 96%;
	}

	.image-row-scroll {
		display: flex;
		flex-direction: column;
		/* empilement vertical */
		overflow-x: hidden;
		/* supprime le scroll horizontal */
		width: 100vw;
		/* largeur de la fenêtre, pas plus */
		max-width: 100%;
		/* empêche tout débordement */
		margin: 0;
		/* supprime les marges qui causent le scroll */
		padding: 0;
		/* supprime padding horizontal */
		box-sizing: border-box;
		/* inclut padding et border dans la largeur */
	}

	.image-row-scroll img {
		width: 100%;
		/* occupe toute la largeur dispo */
		height: auto;
		/* garde les proportions */
		margin: 0 0 10px 0;
		/* marge verticale seulement */
		display: block;
		/* évite l’espace blanc sous l’image */
	}

	/* Supprimer complètement la scrollbar */
	.image-row-scroll::-webkit-scrollbar {
		display: none;
	}

	.hamburger {
		display: block;
	}

	#menu:not(.hidden) {
		flex-direction: column;
		width: 100%;
	}

	#menu li {
		border-bottom: 1px solid var(--border-dark);
	}

	#menu a {
		padding: 15px;
	}

}



@media (max-width: 640px) {

	.campaign-new {
		width: 100%;
		text-align: center;
		padding: 12px;
	}

	.campaign-list li {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.campaign-info {
		width: 100%;
		font-size: 0.95rem;
		line-height: 1.4;
	}

	.campaign-actions {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		gap: 8px;
	}

	.campaign-actions a {
		flex: 1;
		text-align: center;
		padding: 10px 0;
		font-size: 0.95rem;
	}

}