/* ----------------------------------------------------------------------------
   setup.lu : rafraichissement 2026, charge apres main.css.
   Retirer le <link> vers ce fichier rend a l'identique l'ancien rendu.
---------------------------------------------------------------------------- */

:root {
	--rose: #ec008c;
	--rose-fonce: #c20073;
	--turquoise: #26bfca;
	--turquoise-texte: #13939c;
	--encre: #16161d;
	--texte: #454552;
	--gris: #6f6f7c;
	--fond-doux: #f6f6f9;
	--ligne: #e8e8ee;
	--rayon: 16px;
	--ombre: 0 1px 2px rgba(22, 22, 29, .04), 0 8px 24px rgba(22, 22, 29, .06);
	--ombre-forte: 0 2px 4px rgba(22, 22, 29, .06), 0 16px 40px rgba(22, 22, 29, .12);
}

/* --- Base -------------------------------------------------------------- */

body {
	color: var(--texte);
	font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

h1, h2, h3 {
	color: var(--encre);
	font-family: 'Manrope', system-ui, sans-serif;
	letter-spacing: -.01em;
	line-height: 1.2;
	text-transform: none;
}
h1 { font-size: 2.5em; font-weight: 800; }
h1 em { color: var(--rose); font-weight: 800; }
h2 { font-size: 1.75em; font-weight: 800; }
h2:before { border-left-width: 12px; border-bottom-width: 12px; margin: 10px 12px 10px 0; }
h3 { color: var(--turquoise-texte); font-size: 1.2em; font-weight: 700; }

a, a:active, a:focus { color: var(--rose); }
a:hover { color: var(--rose-fonce); }
p { margin-bottom: 1em; }

/* Les ancres (#services...) s'arretent sous l'en-tete collant */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 110px; }
@media (min-width: 992px) { [id] { scroll-margin-top: 160px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- En-tete collant : logo a gauche, menu a droite -------------------- */

.site-top {
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--ligne);
	position: sticky;
	top: 0;
	z-index: 1030;
}
header .logo { margin: 14px 0; }
header .logo img { height: 42px; }
header .logo:after { color: var(--gris); font-size: 8px; letter-spacing: .08em; }

.switch_language { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.switch_language li a { color: var(--gris); }
.switch_language li.active a { color: var(--rose); }
.switch_language li:nth-child(n+2):before { color: var(--ligne); content: "|"; }

.navbar-default .navbar-toggle { border-radius: 10px; }
@media (max-width: 991px) { .switch_language { top: -84px; } }
.navbar-default .navbar-nav { border-top: 0; padding: 8px 0 16px; }
.navbar-default .navbar-nav > li > a {
	color: var(--encre);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li.active > a { color: var(--rose); }
.navbar-default .navbar-nav > li > a span { color: var(--rose); }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus { background: rgba(236, 0, 140, .08); background-image: none; box-shadow: none; color: var(--rose); }

@media (min-width: 992px) {
	/* Deux niveaux : logo + langues, puis la barre de menu */
	.navbar-default .navbar-header { display: none; }
	.navbar-default .navbar-nav {
		border-top: 1px solid var(--ligne);
		display: flex !important;
		flex-wrap: wrap;
		gap: 2px;
		margin: 0 -11px;
		padding: 6px 0;
	}
	.navbar-default .navbar-nav > li > a { border-radius: 999px; font-size: 15px; padding: 8px 11px; white-space: nowrap; }
	.navbar-default .navbar-nav > li > a:hover { background: var(--fond-doux); }
	.switch_language { display: flex; position: absolute; right: 15px; top: -48px; }
}

/* --- Contenu ------------------------------------------------------------ */

.content { padding-top: 32px; }
.content .row { margin-bottom: 3.5em; }
.content .textblock img { border: 0; border-radius: 12px; }
.content li { margin-bottom: 6px; }

.banner { border-radius: var(--rayon); }

.btn, .btn:active, .btn:focus {
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	padding: .75em 1.6em;
	transition: background .2s, color .2s, box-shadow .2s;
}
.btn:hover { box-shadow: var(--ombre); }

.products .carousel-inner { border: 0; border-radius: var(--rayon); box-shadow: var(--ombre); }
.products .carousel .item .p_info { backdrop-filter: blur(4px); background: rgba(22, 22, 29, .72); padding: 10px; }
.products .carousel .item .p_name { font-family: 'Manrope', sans-serif; font-weight: 800; }

.packages-grid table { border-collapse: separate; border-radius: var(--rayon); border-spacing: 0; box-shadow: var(--ombre); overflow: hidden; }
.packages-grid th { font-family: 'Manrope', sans-serif; font-weight: 700; }
.packages-grid th, .packages-grid td { border-color: var(--ligne); }

.content .form input, .content .form textarea, .content .form select { border: 1px solid var(--ligne); border-radius: 10px; }

/* --- Boutons de marque ---------------------------------------------------- */

.bouton {
	border-radius: 999px;
	display: inline-block;
	font-weight: 700;
	padding: .8em 1.7em;
	transition: transform .15s, box-shadow .2s, background .2s, color .2s;
}
.bouton:hover { box-shadow: var(--ombre-forte); transform: translateY(-1px); }
.bouton-rose, .bouton-rose:active, .bouton-rose:focus { background: var(--rose); color: #fff; }
.bouton-rose:hover { background: var(--rose-fonce); color: #fff; }
.bouton-clair, .bouton-clair:active, .bouton-clair:focus { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); color: #fff; }
.bouton-clair:hover { background: #fff; color: var(--encre); }

.surtitre {
	color: var(--turquoise);
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

/* --- Accueil : hero ------------------------------------------------------ */

.hero {
	background: var(--encre);
	border-radius: 24px;
	color: rgba(255, 255, 255, .82);
	overflow: hidden;
	padding: 56px 28px;
	position: relative;
}
.hero:before, .hero:after { content: ""; position: absolute; z-index: 0; }
.hero:before {
	border-bottom: 260px solid var(--rose);
	border-left: 260px solid transparent;
	bottom: 0;
	opacity: .95;
	right: 0;
}
.hero:after {
	border-left: 90px solid transparent;
	border-right: 90px solid transparent;
	border-top: 90px solid var(--turquoise);
	right: 220px;
	top: 0;
}
.hero-texte { max-width: 640px; position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: 2.2em; margin: 0 0 .5em; }
.hero h1 em { color: var(--rose); }
.hero p { font-size: 1.1em; margin-bottom: 1.8em; }
.hero .boutons { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 767px) {
	.hero:before { border-bottom-width: 90px; border-left-width: 90px; }
	.hero:after { display: none; }
}
@media (min-width: 768px) {
	.hero { padding: 88px 64px; }
	.hero h1 { font-size: 3.2em; }
}

/* --- Accueil : grille des services -------------------------------------- */

.services-grille {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.service {
	background: #fff;
	border: 1px solid var(--ligne);
	border-radius: var(--rayon);
	color: var(--texte);
	display: flex;
	flex-direction: column;
	padding: 24px;
	position: relative;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.service, .service:active, .service:focus { color: var(--texte); }
.service:hover { border-color: transparent; box-shadow: var(--ombre-forte); color: var(--texte); transform: translateY(-3px); }
.service .icone {
	align-items: center;
	background: rgba(236, 0, 140, .08);
	border-radius: 14px;
	color: var(--rose);
	display: flex;
	height: 48px;
	justify-content: center;
	margin-bottom: 18px;
	width: 48px;
}
.service:nth-child(even) .icone { background: rgba(38, 191, 202, .12); color: var(--turquoise-texte); }
.service .icone svg { height: 24px; width: 24px; }
.service h3 { color: var(--encre); font-size: 1.1em; margin: 0 0 6px; }
.service p { flex: 1; font-size: .95em; margin: 0 0 14px; }
.service .lien { color: var(--rose); font-size: .9em; font-weight: 700; }
.service .badge-nouveau {
	background: var(--turquoise);
	border-radius: 999px;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	padding: 3px 10px;
	position: absolute;
	right: 16px;
	text-transform: uppercase;
	top: 16px;
}

/* --- Accueil : bandeau Delova ------------------------------------------- */

.bandeau {
	background: var(--encre) no-repeat center / cover;
	border-radius: 24px;
	color: rgba(255, 255, 255, .85);
	overflow: hidden;
	padding: 48px 28px;
	position: relative;
}
.bandeau:before { background: linear-gradient(90deg, rgba(22, 22, 29, .92) 0%, rgba(22, 22, 29, .75) 55%, rgba(22, 22, 29, .35) 100%); content: ""; inset: 0; position: absolute; }
.bandeau > * { max-width: 560px; position: relative; }
.bandeau h2 { color: #fff; }
.bandeau h2:before { display: none; }
@media (min-width: 768px) { .bandeau { padding: 64px; } }

/* --- Page Applications mobiles ------------------------------------------ */

.container.mobile .banner {
	background: linear-gradient(120deg, var(--encre) 0%, #2a1030 55%, var(--rose) 130%);
	position: relative;
}
.container.mobile .banner:after {
	border-left: 180px solid transparent;
	border-bottom: 180px solid var(--turquoise);
	bottom: 0;
	content: "";
	opacity: .9;
	position: absolute;
	right: 0;
}
/* telephone stylise dans le bandeau */
.container.mobile .banner:before {
	border: 3px solid rgba(255, 255, 255, .85);
	border-radius: 22px;
	box-shadow: inset 0 -14px 0 -11px rgba(255, 255, 255, .85);
	content: "";
	height: 64%;
	left: 12%;
	position: absolute;
	top: 18%;
	aspect-ratio: 9 / 17;
}
.intro { font-size: 1.15em; max-width: 760px; }

.atouts {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	margin-top: 1.5em;
}
.atout { background: var(--fond-doux); border-radius: var(--rayon); padding: 24px; }
.atout .icone { color: var(--rose); display: block; margin-bottom: 14px; }
.atout:nth-child(even) .icone { color: var(--turquoise-texte); }
.atout .icone svg { height: 28px; width: 28px; }
.atout h3 { color: var(--encre); margin: 0 0 8px; }
.atout p { margin: 0; }

.exemple {
	border: 1px solid var(--ligne);
	border-left: 4px solid var(--rose);
	border-radius: var(--rayon);
	padding: 28px;
}
.exemple h2:before { display: none; }

.appel {
	background: var(--encre);
	border-radius: 24px;
	color: rgba(255, 255, 255, .82);
	padding: 40px 28px;
	text-align: center;
}
.appel h2 { color: #fff; }
.appel h2:before { display: none; }

/* --- Pied de page ------------------------------------------------------- */

footer { background: var(--encre); margin-top: 64px; }
footer .container { display: grid; gap: 32px; height: auto !important; padding: 48px 15px 56px; }
footer .container:before { display: none; }
footer .container .arr { display: none; }
footer .container .arr:nth-of-type(5) {
	border-bottom: 140px solid var(--rose) !important;
	border-left: 140px solid transparent !important;
	bottom: 0;
	display: block;
	opacity: .9;
	position: absolute;
	right: 15px;
}
footer .container .arr:nth-of-type(1) {
	border-left: 50px solid transparent !important;
	border-right: 50px solid transparent !important;
	border-top: 50px solid var(--turquoise) !important;
	display: block;
	position: absolute;
	right: 200px;
	top: 0;
}
footer .menu { font-family: 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; }
footer .menu ul { display: grid; gap: 10px 32px; grid-template-columns: repeat(2, minmax(0, max-content)); margin: 0 !important; width: auto !important; }
footer .menu li { clear: none !important; float: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; }
footer .menu li:before { display: none !important; }
footer .menu a { color: rgba(255, 255, 255, .85); font-size: 15px; font-weight: 600; }
footer .menu a:hover { color: #fff; }
footer .adresse { color: rgba(255, 255, 255, .6); display: block; font-size: 14px; max-width: 460px; position: relative; z-index: 5; }
footer .adresse strong { color: #fff; }
footer .adresse a { color: #fff; }
@media (min-width: 768px) {
	footer .container { grid-template-columns: 1.3fr 1fr; }
	footer .menu ul { grid-template-columns: repeat(3, minmax(0, max-content)); }
}

/* --- Accueil : grilles de produits (textiles, nouveautes) -------------------
   Meme langage que les cartes services : filet fin, pas d'ombre au repos.
   L'image mene, la reference reste discrete, le nom du produit porte le sens.
---------------------------------------------------------------------------- */

.section-tete { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-bottom: 18px; }
.section-tete h2 { margin: 0; }
.section-lien { font-size: .95em; font-weight: 700; white-space: nowrap; }

.produits-grille {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .produits-grille { gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.produit, .produit:active, .produit:focus {
	background: #fff;
	border: 1px solid var(--ligne);
	border-radius: var(--rayon);
	color: var(--texte);
	display: flex;
	flex-direction: column;
	padding: 10px 10px 16px;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.produit, .produit:hover, .produit:focus { text-decoration: none; }
.produit:hover { border-color: transparent; box-shadow: var(--ombre-forte); color: var(--texte); transform: translateY(-3px); }
.produit:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

.produit-image {
	aspect-ratio: 1 / 1;
	background: var(--fond-doux);
	border-radius: 12px;
	display: block;
	margin-bottom: 14px;
	overflow: hidden;
	position: relative;
}
.content .textblock .produit-image img, .produit-image img {
	border: 0;
	border-radius: 0;
	height: 100%;
	mix-blend-mode: multiply;   /* le fond blanc des photos se fond dans le gris doux */
	object-fit: contain;
	padding: 8%;
	transition: transform .35s;
	width: 100%;
}
.produit:hover .produit-image img { transform: scale(1.04); }

.produit-badge {
	background: var(--turquoise);
	border-radius: 999px;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	left: 10px;
	letter-spacing: .06em;
	padding: 3px 10px;
	position: absolute;
	text-transform: uppercase;
	top: 10px;
	z-index: 1;
}
.produit-badge.eco { background: #2f9e62; }

.produit-ref {
	color: var(--gris);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 0 6px;
	text-transform: uppercase;
}
.produit-nom {
	color: var(--encre);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	margin-top: 4px;
	padding: 0 6px;
}

/* --- Accueil : bandeau clients qui defile ---------------------------------
   Deux pistes identiques qui glissent en boucle ; pause au survol, figee
   (en grille) quand l'utilisateur limite les animations.
---------------------------------------------------------------------------- */

.clients-intro { color: var(--gris); margin: -6px 0 22px; max-width: 640px; }

.defilement {
	display: flex;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	overflow: hidden;
}
.defilement-piste {
	animation: defilement 170s linear infinite;
	display: flex;
	flex-shrink: 0;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0 12px 0 0;
}
.defilement:hover .defilement-piste { animation-play-state: paused; }
.content .defilement-piste li { margin: 0; padding: 0; }
.defilement-piste li {
	align-items: center;
	border: 1px solid var(--ligne);
	border-radius: 14px;
	display: flex;
	height: 96px;
	justify-content: center;
	width: 128px;
}
.content .textblock .defilement-piste img, .defilement-piste img {
	border: 0;
	border-radius: 0;
	height: 100%;
	object-fit: contain;
	opacity: .65;
	transition: opacity .2s;
	width: 100%;
}
.defilement-piste li:hover img { opacity: 1; }
@media (min-width: 768px) { .defilement-piste li { height: 112px; width: 150px; } }

@keyframes defilement { to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
	.defilement { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
	.defilement-piste { animation: none; flex-wrap: wrap; padding: 0; }
	.defilement-piste[aria-hidden] { display: none; }
}

/* --- Page Nos clients : grille reguliere de tuiles ------------------------ */

.container.partner .textblock ul {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	list-style: none;
	margin: 1.5em 0 0;
	overflow: visible;
	padding: 0;
}
.container.partner .textblock li,
.container.partner .textblock li:nth-child(n) {
	aspect-ratio: 4 / 3;
	border: 1px solid var(--ligne);
	border-radius: 14px;
	display: flex;
	float: none;
	margin: 0;
	padding: 6px;
	transition: border-color .2s, box-shadow .2s;
	width: auto;
}
.container.partner .textblock li:hover { border-color: transparent; box-shadow: var(--ombre); }
.container.partner .textblock li img {
	border: 0;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	opacity: .7;
	transition: opacity .2s;
	width: 100%;
}
.container.partner .textblock li:hover img { opacity: 1; }
@media (min-width: 992px) { .container.partner .textblock ul { gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* --- Accueil : realisations --------------------------------------------------
   Grandes vignettes : la capture du site mene (ecran avec barre de navigateur),
   le nom du client, une ligne, puis les prestations en discret.
   Grille reguliere : chaque capture garde ses proportions.
---------------------------------------------------------------------------- */

.realisations-grille { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .realisations-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .realisations-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.realisation, .realisation:hover, .realisation:focus, .realisation:active { color: var(--texte); text-decoration: none; }
.realisation { display: flex; flex-direction: column; }
.realisation:focus-visible { border-radius: var(--rayon); outline: 2px solid var(--rose); outline-offset: 4px; }

.realisation-ecran {
	background: var(--fond-doux);
	border: 1px solid var(--ligne);
	border-radius: 14px;
	display: block;
	overflow: hidden;
	transition: box-shadow .25s, transform .25s, border-color .25s;
}
.realisation:hover .realisation-ecran { border-color: transparent; box-shadow: var(--ombre-forte); transform: translateY(-3px); }
.realisation-barre { align-items: center; background: #fff; border-bottom: 1px solid var(--ligne); display: flex; gap: 6px; height: 26px; padding: 0 12px; }
.realisation-barre i { background: var(--ligne); border-radius: 50%; display: block; height: 8px; width: 8px; }
.content .textblock .realisation-ecran img, .realisation-ecran img {
	aspect-ratio: 1200 / 732;
	border: 0;
	border-radius: 0;
	display: block;
	height: auto;
	object-fit: cover;
	object-position: top;
	width: 100%;
}

.realisation-infos { display: flex; flex-direction: column; gap: 2px; padding: 14px 4px 0; }
.realisation-nom { color: var(--encre); font-size: 17px; font-weight: 800; }
.realisation-ligne { font-size: 15px; }
.realisation-tags { color: var(--turquoise-texte); font-size: 12px; font-weight: 700; letter-spacing: .06em; margin-top: 4px; text-transform: uppercase; }

/* --- Accueil : appel a l'action final -------------------------------------- */

.appel-final {
	background: var(--encre);
	border-radius: 24px;
	color: rgba(255, 255, 255, .82);
	overflow: hidden;
	padding: 56px 28px;
	position: relative;
	text-align: center;
}
.appel-final:before {
	border-bottom: 160px solid var(--rose);
	border-left: 160px solid transparent;
	bottom: 0;
	content: "";
	opacity: .9;
	position: absolute;
	right: 0;
}
.appel-final > * { position: relative; }
.appel-final h2 { color: #fff; font-size: 2.2em; }
.appel-final h2:before { display: none; }
.appel-final p { font-size: 1.1em; margin: 0 auto 1.8em; max-width: 620px; }
.appel-final .boutons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (min-width: 768px) { .appel-final { padding: 80px 64px; } .appel-final h2 { font-size: 2.8em; } }
@media (max-width: 767px) { .appel-final:before { border-bottom-width: 80px; border-left-width: 80px; } }