/* =====================================================================
   Fab Presence — réglages du thème d'origine (anciennement générés en PHP)
   et ajustements pour Joomla 5.
   ===================================================================== */

/* --- Polices (paramètres du style « FAB Cuisines Maquette ») --- */
body { font-family: "PT Sans", Arial, sans-serif; font-size: 14px; }
h2 { font-family: "PT Sans", Arial, sans-serif; }
.module h3, .module_menu h3 { font-family: "PT Sans", Arial, sans-serif; }
#hornav, #hornav a, .slicknav_menu { font-family: "Droid Sans", "PT Sans", Arial, sans-serif !important; }

/* --- Logo --- */
.logo a { left: 0; top: 0; }

/* --- Couleurs des titres et liens --- */
h2, h2 a:link, h2 a:visited, .content_header, .articleHead { color: #333333; border-color: #333333; }
.module h3, .module_menu h3, h3 { color: #666666; }
a, .module ul.tweets a, #hornav ul a:hover, #hornav ul ul a:hover { color: #a5250e; }
p.site-slogan { color: #e9e9e9; }

/* --- Menu horizontal --- */
#hornav ul li a { color: #000000; }
#sidecol_a { width: 25%; float: left; }
#sidecol_b { width: 25%; float: right; }
#content_remainder { float: left; }
.wrapper960 { width: 960px; }

/* --- Menu Joomla 5 : retrouver le rendu du menu d'origine --- */
#hornav ul.mod-menu, #footermenu ul.mod-menu { list-style: none; margin: 0; padding: 0; }
#hornav ul.mod-menu > li { position: relative; }
#hornav ul.mod-menu ul { display: none; position: absolute; top: 100%; left: 0; z-index: 1000;
	min-width: 210px; margin: 0; padding: 6px 0; list-style: none; background-color: #f1f1f1;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
#hornav ul.mod-menu li:hover > ul,
#hornav ul.mod-menu li:focus-within > ul { display: block; }
#hornav ul.mod-menu ul li { float: none; display: block; margin: 0; background: none; }
#hornav ul.mod-menu ul li a { display: block; padding: 7px 14px; white-space: nowrap; line-height: 1.4;
	text-transform: none; letter-spacing: 0; background: none; }
#hornav ul.mod-menu ul li a:hover, #hornav ul.mod-menu ul li a:focus { background-color: #e4e4e4; }
#hornav .mod-menu__toggle-sub, #hornav .mod-menu__toggle-sub + * { display: none; }

/* --- Recherche (Smart Search de Joomla 5 à la place de l'ancienne recherche) --- */
#search form { margin: 0; }
#search label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#search .awesomplete { display: inline-block; }
#search input.js-finder-search-query { box-sizing: content-box; width: 168px; height: 17px; margin: 0; padding: 4px 5px 7px 30px;
	background: url("../images/searchBox.png") no-repeat left top transparent; border: 0; border-radius: 0; box-shadow: none;
	color: #dddddd; font-size: 13px; line-height: 17px; }
#search input.js-finder-search-query::placeholder { color: #dddddd; opacity: 1; }
#search input.js-finder-search-query:focus { outline: 2px solid #a5250e; outline-offset: 1px; }
#search .btn, #search button { display: none; }

/* --- Vignettes « image + lien » (anciennement module J51 Image Link Hover) --- */
.j51container, .j51container .mask, .j51container .content { width: 285px; height: 149px; }
.j51container img { width: 285px; height: 149px; object-fit: cover; }
.j51container a.info:focus-visible { opacity: 1; outline: 3px solid #a5250e; outline-offset: -3px; }
.effect a.info:focus-visible, .effect:focus-within .mask { opacity: 1; }

/* --- Classes utilitaires de Joomla 5 absentes de l'ancien Bootstrap --- */
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
	position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
	margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important; border: 0 !important; }
.float-start { float: left; }
.float-end { float: right; }
.d-none { display: none !important; }
.list-unstyled { list-style: none; padding-left: 0; }
.com-content-article__body img, .item-page img { max-width: 100%; height: auto; }

/* --- Formulaires (contact) --- */
.maincontent form .control-group, .maincontent form .mb-3 { margin-bottom: 12px; }
.maincontent form input[type="text"], .maincontent form input[type="email"],
.maincontent form textarea, .maincontent form select { box-sizing: border-box; max-width: 100%; height: auto; padding: 6px 8px; }
.maincontent form textarea { width: 100%; min-height: 140px; }
.maincontent form .btn-primary, .maincontent form button[type="submit"] {
	background: #a5250e; color: #fff; border: 0; padding: 8px 18px; border-radius: 3px; cursor: pointer; }
.maincontent form .btn-primary:hover, .maincontent form button[type="submit"]:hover { background: #7e1c0a; }

/* --- Messages système de Joomla 5 --- */
#system-message-container joomla-alert { margin: 0 0 15px; }

/* --- Responsive : ne jamais déborder sur petit écran --- */
@media (max-width: 979px) {
	.wrapper960 { width: auto; max-width: 100%; }
}
@media (max-width: 767px) {
	.top-1, .top-2, .top-3, .bottom-1, .bottom-2, .base-1, .base-2, .contenttop, .contentbottom { width: 100% !important; float: none !important; }
	.j51imagelinkhover_border { display: block; width: fit-content; max-width: 100%; margin: 0 auto; }
	#sidecol_a, #sidecol_b, #content_remainder { width: 100%; float: none; }
}

/* --- Carrousel « Étude, plan, devis gratuit » (remplace Carousel CK) --- */
.fab-carousel { position: relative; overflow: hidden; background: #000; margin: 10px 0; }
.fab-carousel__track { display: flex; transition: transform .6s ease; }
.fab-carousel__slide { flex: 0 0 100%; margin: 0; position: relative; }
.fab-carousel__slide img { display: block; width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }
@media (max-width: 767px) { .fab-carousel__slide img { aspect-ratio: 4 / 3; } }
.fab-carousel__slide figcaption { position: absolute; left: 0; bottom: 40px; max-width: 70%; padding: 10px 16px;
	background: rgba(0, 0, 0, .65); color: #fff; font-size: 15px; line-height: 1.4; }
.fab-carousel__slide figcaption strong { display: block; font-size: 20px; margin-bottom: 3px; }
.fab-carousel__prev, .fab-carousel__next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
	border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 26px; line-height: 38px; cursor: pointer; }
.fab-carousel__prev { left: 10px; }
.fab-carousel__next { right: 10px; }
.fab-carousel__prev:hover, .fab-carousel__next:hover, .fab-carousel__prev:focus-visible, .fab-carousel__next:focus-visible { background: #a5250e; }
.fab-carousel__dots { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; }
.fab-carousel__dots button { width: 11px; height: 11px; margin: 0 4px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; }
.fab-carousel__dots button[aria-current="true"] { background: #fff; }
@media (max-width: 767px) {
	.fab-carousel__slide figcaption { position: static; max-width: none; }
	.fab-carousel__dots { bottom: auto; top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .fab-carousel__track { transition: none; } }

/* --- Images à effet (anciennement plugin « Image Effect CK », effet Goliath) --- */
figure[class*="effectck"] { position: relative; overflow: hidden; display: inline-block; margin: 10px 1%; max-width: 100%;
	background: #3085a3; text-align: center; cursor: pointer; }
figure[class*="effectck"] > .imageeffectck_img { position: relative; overflow: hidden; height: 100%; }
figure[class*="effectck"] img { position: relative; display: block; width: 100%; max-width: 100%; height: auto; margin: 0; opacity: .8; }
figure[class*="effectck"] figcaption { position: absolute; inset: 0; z-index: 1; padding: 2em; color: #fff;
	text-transform: uppercase; font-size: 1.25em; backface-visibility: hidden; }
figure[class*="effectck"] .imageeffectck_title { margin: 0; font-family: "Open Sans", Arial, sans-serif; font-weight: 300;
	font-size: 1.5em; line-height: 24px; word-spacing: -.15em; }
figure[class*="effectck"] .imageeffectck_desc { margin: 0; letter-spacing: 1px; font-size: 68.5%; }
figure.effectck-goliath { background: #df4e4e; }
figure.effectck-goliath img, figure.effectck-goliath .imageeffectck_title { transition: transform .35s; }
figure.effectck-goliath img { backface-visibility: hidden; }
figure.effectck-goliath .imageeffectck_title, figure.effectck-goliath .imageeffectck_desc { position: absolute; left: 0; bottom: 0; padding: 15px 30px; text-align: left; }
figure.effectck-goliath .imageeffectck_desc { text-transform: none; font-size: 90%; opacity: 0;
	transition: opacity .35s, transform .35s; transform: translate3d(0, 50px, 0); }
figure.effectck-goliath:hover img, a:focus-visible > figure.effectck-goliath img { transform: translate3d(0, -80px, 0); }
figure.effectck-goliath:hover .imageeffectck_title, a:focus-visible > figure.effectck-goliath .imageeffectck_title { transform: translate3d(0, -100px, 0); }
figure.effectck-goliath:hover .imageeffectck_desc, a:focus-visible > figure.effectck-goliath .imageeffectck_desc { opacity: 1; transform: translate3d(0, 0, 0); }
a:focus-visible > figure[class*="effectck"] { outline: 3px solid #a5250e; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { figure[class*="effectck"] * { transition: none !important; } }

/* --- Formulaire de connexion du pied de page (mod_login de Joomla 5) --- */
#footer-1 .mod-login .form-group { margin-bottom: 6px; }
#footer-1 .mod-login label { display: block; font-size: 11px; font-weight: bold; color: #fff; margin: 0 0 2px; }
#footer-1 .mod-login input.form-control { box-sizing: border-box; width: 160px; height: auto; padding: 4px 6px; font-size: 13px;
	border: 1px solid #ccc; border-radius: 3px; }
#footer-1 .mod-login .input-group { display: flex; align-items: center; gap: 4px; }
#footer-1 .mod-login .input-password-toggle { padding: 2px 6px; font-size: 11px; line-height: 1.4; border: 1px solid #ccc; border-radius: 3px; background: #eee; }
#footer-1 .mod-login .form-check, #footer-1 .mod-login .mod-login__remember { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 11px; }
#footer-1 .mod-login .mod-login__remember label { display: inline; margin: 0; }
#footer-1 .mod-login .plg_system_webauthn_login_button { display: inline-flex; align-items: center; gap: 6px; width: auto; max-width: 220px;
	margin: 4px 0; padding: 4px 10px; font-size: 12px; line-height: 1.3; border: 1px solid #ccc; border-radius: 3px; background: #eee; color: #333; }
#footer-1 .mod-login .plg_system_webauthn_login_button svg, #footer-1 .mod-login .plg_system_webauthn_login_button img { width: 16px !important; height: 16px !important; }
#footer-1 .mod-login button[type="submit"], #footer-1 .mod-login .btn-primary { margin: 4px 0; padding: 4px 12px; font-size: 13px;
	border: 1px solid #ccc; border-radius: 3px; background: #f5f5f5; color: #333; cursor: pointer; }
#footer-1 .mod-login ul, #footer-1 .mod-login__options { list-style: none; margin: 6px 0 0; padding: 0; }
#footer-1 .mod-login ul a { color: #bbbbbb; font-size: 11px; }

/* --- Pages de catégories en mode « blog » : mosaïque comme sous Joomla 3 --- */
.blog-items { display: grid; grid-template-columns: 1fr; gap: 10px 20px; margin: 0 0 15px; }
@media (min-width: 768px) {
	.blog-items.columns-2, .blog-items.masonry-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.blog-items.columns-3, .blog-items.masonry-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.blog-items.columns-4, .blog-items.masonry-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.blog-item { min-width: 0; }
.blog-item .item-image, .blog-featured .item-image { display: inline-block; float: none; box-sizing: border-box; max-width: 100%;
	margin: 0 0 12px; padding: 4px; border: 1px solid #dddddd; border-bottom-width: 2px; }
.blog-item .item-image img, .blog-featured .item-image img { display: block; max-width: 100%; height: auto; }
.blog-item .item-image a:focus-visible { outline: 3px solid #a5250e; outline-offset: 2px; }
.blog-item .readmore { margin: 0 0 9px; }

/* Pagination de Joomla 5 */
.com-content-category-blog__navigation, .pagination { margin: 10px 0 20px; }
ul.pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
ul.pagination .page-link { display: block; padding: 4px 10px; color: #000; }
ul.pagination .page-item.active .page-link { font-weight: bold; color: #a5250e; }
ul.pagination .page-item.disabled .page-link { color: #999999; }
.com-content-category-blog__counter, .counter { float: right; margin: 0 0 6px; color: #777777; }
/* Flèches de pagination : l'ancien Bootstrap du thème affiche une image cassée pour ces icônes */
.pagination [class^="icon-angle"], .pagination [class*=" icon-angle"] { display: inline; width: auto; height: auto;
	margin: 0; background: none !important; vertical-align: baseline; line-height: inherit; font-style: normal; }
.pagination .icon-angle-double-left::before { content: "\00AB"; }
.pagination .icon-angle-left::before { content: "\2039"; }
.pagination .icon-angle-right::before { content: "\203A"; }
.pagination .icon-angle-double-right::before { content: "\00BB"; }
.pagination .page-link [class^="icon-angle"]::before { font-size: 16px; font-weight: bold; }
ul.pagination li.page-item { display: block; float: none; margin: 0; padding: 0; }
ul.pagination li.page-item .page-link { float: none; min-width: 12px; margin: 0; padding: 5px 10px; text-align: center;
	line-height: 18px; border: 0; background: none; box-shadow: none; }
ul.pagination .page-link span[class*="icon-angle"] { display: inline !important; padding: 0 !important; width: auto !important; }
ul.pagination .page-link span[class*="icon-angle"]::before { font-family: inherit !important; }