/**
 * Conciergerie Service Conseil — Widgets Elementor : styles front-end communs.
 * Ces règles servent de valeurs par défaut / repli (mise en page structurelle :
 * flex, position, overflow...). Couleurs, typographies, espacements, bordures,
 * ombres et rayons sont désormais entièrement pilotables depuis l'onglet Style
 * de chaque widget dans Elementor (voir "selectors" dans les classes PHP
 * correspondantes) ; le CSS généré par Elementor a une spécificité plus élevée
 * ({{WRAPPER}} = .elementor-element-<id>) et prend donc le dessus sur ce fichier.
 */

.csc-widget * {
	box-sizing: border-box;
}

/* ===================== Widget : Barre de recherche ===================== */

/* Contrairement aux autres widgets, .csc-search-form n'est pas enveloppé dans
   un conteneur .csc-widget — la règle ".csc-widget *" ci-dessus ne s'applique
   donc jamais ici. On répète le reset localement. Le champ texte (qui n'a pas
   de contrôle Elementor pour sa propre bordure) reste verrouillé en !important
   contre les styles globaux du thème sur les <input>. Le bouton, lui, expose
   désormais ses propres contrôles de bordure/rayon/padding : on ne force donc
   plus rien en !important sur lui — la spécificité {{WRAPPER}} d'Elementor
   suffit à passer devant le CSS de base ci-dessous en usage normal. */
.csc-search-form,
.csc-search-form * {
	box-sizing: border-box;
}

.csc-search-form {
	display: flex;
	align-items: stretch;
	width: 100%;
	margin: 0;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	overflow: hidden;
	background: #ffffff;
}

.csc-search-input {
	appearance: none;
	-webkit-appearance: none;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	border: none !important;
	border-radius: 0 !important;
	outline: none;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.3;
	color: #333333;
	background: transparent;
	box-shadow: none !important;
}

.csc-search-input::placeholder {
	color: #aaaaaa;
	opacity: 1;
}

.csc-search-button {
	appearance: none;
	-webkit-appearance: none;
	width: 44px;
	flex: 0 0 44px;
	margin: 0;
	border: none;
	border-radius: 0;
	background: #0e7c8a;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	box-shadow: none;
	transition: background-color 0.2s ease;
}

.csc-search-button:hover {
	background: #0c6975;
}

.csc-search-button svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: #ffffff;
	stroke-width: 2;
	transition: stroke 0.2s ease;
}

/* Conteneur positionné : ancre le dropdown de résultats sous le champ. */
.csc-search-wrapper {
	position: relative;
	width: 100%;
}

.csc-search-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 9999;
	background: #ffffff;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	max-height: 320px;
	overflow-y: auto;
	padding: 6px 0;
	text-align: left;
}

.csc-search-results[hidden] {
	display: none;
}

.csc-search-result-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	text-decoration: none;
	color: #333333;
	font-size: 14px;
	line-height: 1.3;
}

.csc-search-result-item:hover,
.csc-search-result-item.is-active {
	background: #f4f6f7;
}

.csc-search-result-thumb {
	width: 36px;
	height: 36px;
	border-radius: 4px;
	object-fit: cover;
	flex-shrink: 0;
	background: #eeeeee;
}

.csc-search-result-title {
	flex: 1 1 auto;
	min-width: 0;
}

.csc-search-no-results,
.csc-search-loading {
	padding: 10px 14px;
	font-size: 13px;
	color: #999999;
}

/* ===================== Titre de bloc (commun) ===================== */

.csc-widget-title {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.03em;
	color: #222222;
	padding-bottom: 10px;
	margin: 0 0 16px 0;
	border-bottom: 1px solid #e0e0e0;
}

/* ===================== Widget : Derniers articles ===================== */

.csc-articles-list {
	display: flex;
	flex-direction: column;
}

.csc-article-card {
	position: relative;
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(31, 58, 95, 0.1);
	text-align: center;
	padding: 0;
	margin-bottom: 24px;
}

.csc-article-card:last-child {
	margin-bottom: 0;
}

/* L'image est collée aux bords (haut/gauche/droite) de la carte : le rayon visuel
   du haut vient du overflow:hidden + border-radius de .csc-article-card ci-dessus,
   pas de l'image elle-même. En bas, la courbe en "vague" (et non un simple angle
   arrondi) est produite par un clip-path SVG appliqué en ligne sur cet élément
   dans le rendu PHP (voir render(), attribut style clip-path: url(#csc-wave-clip-...)).
   Le border-radius ci-dessous n'est qu'un repli pour les très rares navigateurs
   sans support de clip-path — il n'a aucun effet visible dès que le clip-path
   s'applique. */
.csc-article-image-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 0 0 70px 70px;
	overflow: hidden;
	background: #d8dde0;
	margin: 0 0 10px 0;
	display: block;
}

/* Le padding de la carte (titre, badge/extrait, méta) vit ici, jamais sur
   .csc-article-card, afin que l'image reste full-bleed. */
.csc-article-content {
	padding: 24px 20px 48px;
}

.csc-article-image,
.csc-article-image-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.csc-category-badge {
	display: inline-block;
	background: #1B9AAA;
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 20px;
	line-height: 1.2;
	margin: 0 0 10px 0;
}

.csc-article-arrow {
	position: absolute;
	right: 20px;
	bottom: 18px;
	color: #1B9AAA;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	display: inline-block;
	flex-shrink: 0;
	transition: color 0.2s ease;
}

.csc-article-arrow:hover {
	color: #15737f;
}

.csc-article-title {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	margin: 0 0 6px 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.csc-article-title a {
	color: #1B9AAA;
	text-decoration: none;
}

.csc-article-title a:hover {
	text-decoration: underline;
}

.csc-article-excerpt {
	font-size: 13px;
	color: #777777;
	line-height: 1.45;
	margin: 0 0 10px 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Pas de position:relative ici : quand la flèche est en position:absolute
   (bas-droite/gauche/centre), elle doit s'ancrer sur .csc-article-card
   (déjà position:relative) et non sur ce footer, dont la hauteur suit
   simplement le texte de la méta — sinon la flèche chevauche la date. */
.csc-article-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}

.csc-article-meta {
	display: inline-block;
	font-size: 12px;
	color: #999999;
	margin: 0;
}

.csc-no-posts,
.csc-no-categories {
	font-size: 13px;
	color: #999999;
	margin: 0;
}

/* ===================== Widget : Catégories ===================== */

.csc-category-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.csc-category-list li {
	margin-bottom: 9px;
}

.csc-category-list li:last-child {
	margin-bottom: 0;
}

.csc-category-list a {
	font-size: 14px;
	color: #1F3A5F;
	text-decoration: none;
}

.csc-category-list a:hover {
	color: #1B9AAA;
	text-decoration: underline;
}

.csc-category-list .children {
	list-style: none;
	margin: 8px 0 0 14px;
	padding: 0;
}

/* ===================== Widget : Étiquettes (Tags) ===================== */

.csc-tag-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.csc-tag-list-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.csc-tag-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: #ffffff;
	color: #5c6b47;
	border: 1px solid #dcdcdc;
	border-radius: 5px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.csc-tag-item:hover {
	background-color: #5c6b47;
	color: #ffffff;
	border-color: #5c6b47;
}

.csc-tag-item .csc-tag-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	fill: currentColor;
	color: inherit;
}

.csc-no-tags {
	font-size: 13px;
	color: #999999;
	margin: 0;
}

/* ===== Widget : Navigation Article Précédent/Suivant ===== */

.csc-post-nav {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.csc-post-nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 50%;
	min-width: 0;
	background-color: #ffffff;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	padding: 18px;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

/* Un seul bloc disponible (premier ou dernier article du blog) : il occupe
   alors toute la largeur au lieu de laisser un espace vide à côté. */
.csc-post-nav-single .csc-post-nav-item {
	flex: 1 1 100%;
}

.csc-post-nav-prev {
	justify-content: flex-start;
	text-align: left;
}

.csc-post-nav-next {
	justify-content: flex-end;
	text-align: right;
}

.csc-post-nav-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.csc-post-nav-label {
	font-size: 12px;
	font-weight: 700;
	color: #c9820a;
	line-height: 1.2;
}

.csc-post-nav-title {
	font-size: 15px;
	font-weight: 600;
	color: #1F3A5F;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.csc-post-nav-item:hover .csc-post-nav-title {
	color: #1B9AAA;
}

.csc-post-nav-arrow {
	flex-shrink: 0;
	font-size: 20px;
	line-height: 1;
	color: #1F3A5F;
}

.csc-post-nav-editor-notice {
	font-size: 13px;
	color: #856404;
	background: #fff3cd;
	border: 1px solid #ffeeba;
	border-radius: 4px;
	padding: 12px 14px;
}

/* Repli structurel : empilement sur mobile si le contrôle Elementor
   "Disposition" n'a pas déjà fixé flex-direction en ligne via {{WRAPPER}}. */
@media ( max-width: 767px ) {
	.csc-post-nav {
		flex-direction: column;
	}
}

/* ===================== Accessibilité ===================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}