/* Pour le site en entier */
html {
	scroll-behavior: smooth;
}

.navbar .dropdown-menu {
	background-color: #5B1F2F;  /* bordeaux doux */
	border: none;
	box-shadow: 0 8px 20px rgba(0,0,0,0.25);
	border-radius: 10px;
}

.navbar-light .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(232,209,189, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar .dropdown-item {
	color: #F8E8D8;  /* texte crème */
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
	background-color: #8B3A3A;  /* bordeaux plus chaud au survol */
	color: #FEFBFD;  /* blanc cassé */
}

.dropdown-title {
	font-weight: bold !important;
	text-decoration: underline !important;
	font-size: medium !important;
}



.navbar-light .navbar-nav .nav-link {
	color: #E8D1BD;
	font-family: Open Sans;
}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
	color: #FEFBFD !important;
}

.navbar.bg-wood .navbar-nav .nav-link:hover,
.navbar.bg-wood .navbar-nav .nav-link:focus,
.navbar-light.bg-wood .navbar-nav .nav-link:hover,
.navbar-light.bg-wood .navbar-nav .nav-link:focus {
	color: #FEFBFD !important; /* doré */
}

.line-red {
	width: 100%;
	height: 150px;
	background-color: #561326;
}

.color-or {
	color: #E8D1BD !important;
}

.btn {
	color: #E8D1BD !important;
}

.btn:hover {
	color: #FEFBFD  !important;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
.bg-wood {
	color: white;
	background-color: #561326;
}
.btn-wood {
	color: #fff;
	background-color: #786653;
	border-color: #786653;
}
.alert-info {
	background-color: #ffbf00 !important;
	border: 1px solid gold !important;
	font-weight: 600;
	color: black;
}
.bg-beige {
	background-color: #e8dbc4;
}
body {
	background-color: #e8dbc4;
}
.btn-outline-wood {
	color: white;
	background-color: #561326;
}

footer a {
	text-decoration: none;
	color: #e8dbc4;
}

.card-1 {
	width: 80%
}
.img-r-accueil1 {
	width: 50%;
}
.border-wood {
	border: 1px solid #561326;
}
/* Caroussel */
#caroussel_1 {
	text-align: center;
	margin: auto;
}
#caroussel_1 img {
	max-height: 80vh;
}
.carousel-caption {
	color: white; text-shadow: black 0.1em 0.1em 0.2em
}
.carousel-caption h5 {
	font-size: 38px;
}
.carousel-caption p {
	font-size: 20px;
}

h1 {
	font-size: 2rem;
}
h2 {
	font-size: 1.9rem;
}
h3 {
	font-size: 1.7rem;
}

footer a:hover {
	color: inherit;
	text-decoration: none;
}
/* Menu */
.navbar {
	font-size: 18px;
	font-family: 'Oswald',Helvetica,Arial,Lucida,sans-serif;
}

.paypal-button-logo-gold {
	background: #ffc439;
	color: #111;
}
.paypal-button-logo-gold img {
	height:22px;
}

.service-promo {
	background-color:  	#ffbf00!important;
	border: 2px solid gold!important;
}
/* Set the size of the div element that contains the map */
#map {
	height: 400px;
	/* The height is 400 pixels */
	width: 100%;
	/* The width is the width of the web page */
}

.services-luthier h3 {
	font-size: 20px;
}
.services-luthier ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}
.services-luthier li:before {
	content: "- ";
}

/* Extra large devices */
@media (max-width: 1200px) {
	.card-1 {
		width: 95%
	}
}

/* Large devices */
@media (max-width: 992px) {
	.card-1 {
		width: 95%
	}
}

/* Medium devices */
@media (max-width: 768px) {
	.card-1 {
		width: 60%;
	}
}

/* Small devices */
@media (max-width: 572px) {
	.card-1 {
		width: 80%
	}
	h1 {
		font-size: 1.7rem;
	}
	h2 {
		font-size: 1.5rem;
	}
	h2 {
		font-size: 1.4rem;
	}
}

/* ===== Palette & conteneur ===== */
:root{
	--ap-bg:#efe3cf;
	--ap-paper:#fffaf3;
	--ap-ink:#2b1e17;
	--ap-muted:#6b594f;
	--ap-brand:#6d0f22;
	--ap-border:#ead8c7;
	--ap-chip:#f6eee5;
	--ap-track:#faf7f2;
	--ap-thumb:#b38977;
	--ap-radius: 1rem;
	--ap-shadow: 0 10px 30px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.04);
}

.ap-card{
	background:var(--ap-paper);
	border-radius:calc(var(--ap-radius) + .25rem);
	box-shadow:var(--ap-shadow);
}

/* ===== Colonne gauche ===== */
.ap-left{ text-align:left; }

.ap-portrait{ aspect-ratio:4/5; object-fit:cover; display:block; }

/* Bloc repères rapides */
.ap-quick-title{
	font-weight:800; font-size:1.1rem; margin:0 0 .75rem; color:var(--ap-ink);
}
.ap-tags{
	list-style:none; margin:0; padding:0;
	display:grid; gap:.75rem;
}
.ap-tags li{
	display:flex; align-items:center; gap:.6rem;
	padding:.75rem .95rem; min-height:52px;
	background:var(--ap-chip);
	border:1px solid var(--ap-border);
	border-radius:999px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.04);
	font-size:.98rem;
}
.ap-dot{ width:.55rem; height:.55rem; border-radius:50%; background:var(--ap-brand); flex:0 0 .55rem; }

/* CTA en bas des repères */
.ap-cta{
	display:inline-block; margin-top:.9rem;
	background:var(--ap-brand); color:#fff; font-weight:700; font-size:.95rem;
	padding:.55rem 1rem; border:0; border-radius:999px; cursor:pointer;
	box-shadow:0 10px 18px rgba(109,15,34,.18);
}
.ap-cta:hover{ filter:brightness(.95); }

/* ===== Titre colonne droite ===== */
.ap-h2{ font-weight:800; letter-spacing:.2px; margin:0; color:var(--ap-ink); }
/* === Bouton "Lire tout" === */
.ap-link-btn {
	border: 2px solid #6d0f22;        /* contour bordeaux */
	color: #6d0f22 !important;                   /* texte bordeaux */
	background: transparent;          /* fond clair */
	font-weight: 700;
	font-size: .95rem;
	padding: .45rem 1rem;
	border-radius: 999px;             /* arrondi complet */
	transition: all .25s ease;
	text-transform: none;
}

/* Effet hover / focus */
.ap-link-btn:hover{
	background: #6d0f22;
	color: #fff;
	box-shadow: 0 4px 12px rgba(109,15,34,.25);
	text-decoration: none;
}

/* Option : état actif (quand on clique) */
.ap-link-btn:active {
	transform: scale(.97);
	box-shadow: 0 2px 6px rgba(109,15,34,.3);
}

/* ===== BIO zone scrollable ===== */
.ap-bio{
	max-height:420px;               /* hauteur fermée */
	overflow:auto;
	padding:1rem 1.1rem 1.1rem .9rem;
	background:#fff;
	border:1px solid var(--ap-border);
	border-radius:.9rem;
	box-shadow:0 6px 18px rgba(0,0,0,.06);
	color:var(--ap-ink);
}
@media (max-width: 576px){ .ap-bio{ max-height:340px; } }
@media (min-width:1200px){ .ap-bio{ max-height:460px; } }

.ap-bio p{ margin-bottom:1rem; }
.ap-subtitle{ font-size:1.05rem; font-weight:800; margin:1rem 0 .5rem; }
.ap-lead:first-letter{
	float:left; font-size:2.6rem; line-height:1;
	padding:.25rem .45rem 0 0; font-weight:800; color:var(--ap-brand);
}
.ap-hint{ color:var(--ap-muted); font-size:.95rem; }

/* Scrollbar (WebKit/Chromium) */
.ap-bio::-webkit-scrollbar{ width:10px; }
.ap-bio::-webkit-scrollbar-track{ background:var(--ap-track); border-radius:10px; }
.ap-bio::-webkit-scrollbar-thumb{ background:var(--ap-thumb); border-radius:10px; }
.ap-bio::-webkit-scrollbar-thumb:hover{ background:#9e7461; }
/* Scrollbar (Firefox) */
.ap-bio{ scrollbar-color: var(--ap-thumb) var(--ap-track); scrollbar-width: thin; }

/* État ouvert */
.ap-bio.open{ max-height:none; overflow:visible; }

/* Voile dégradé quand fermé */
.ap-fade{
	pointer-events:none; position:absolute; left:0; right:0; bottom:0; height:70px;
	background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 70%);
	border-bottom-left-radius:.9rem; border-bottom-right-radius:.9rem;
}
#bio.open + #bioFade{ display:none; }

/* ===== Chips des phrases favorites ===== */
.ap-chips{ display:flex; flex-wrap:wrap; gap:.55rem .65rem; }
.ap-chip{
	display:inline-flex; align-items:center; gap:.5rem;
	padding:.5rem .85rem; border-radius:999px;
	background:var(--ap-chip); border:1px solid var(--ap-border);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.04);
	font-size:.98rem; white-space:nowrap;
}
.ap-chip::before{
	content:""; width:.45rem; height:.45rem; border-radius:50%; background:var(--ap-brand);
}
.ap-chip:hover{ background:#f0e6da; }
.ap-chip:focus-visible{ outline:none; box-shadow:0 0 0 .2rem rgba(109,15,34,.15); }


/* ===== MOBILE ONLY : ≤ 576 px ===== */
@media (max-width: 576px){

	/* on cache le titre de droite et on montre celui ajouté à gauche */
	.col-md-8 .ap-h2{ display:none; }           /* cache le H2 de droite */
	.ap-h2-mobile{ display:block; margin:0 0 .5rem; }

	.ap-left{
		text-align: center !important; /* centre tout le contenu de la colonne gauche */
	}

	/* Force le centrage du bloc <figure> */
	.ap-left figure.ap-photo{
		display: flex;
		justify-content: center;
		margin: 0 auto !important;
	}

	/* Photo bien centrée et réduite */
	.ap-left .ap-portrait{
		width: 130px;
		height: auto;
		margin: 0.5rem auto 0.75rem;
		border-radius: .6rem;
		box-shadow: 0 6px 16px rgba(0,0,0,.12);
		border: 1px solid #ead8c7;
	}

	/* sous-titre sous la photo (dans la colonne gauche) un peu plus doux */
	.ap-quick-title{
		font-size: 1.05rem;
		margin-bottom: .6rem;
	}

	/* un peu d'air avant la bio à droite */
	.ap-bio-wrap{ margin-top: .75rem !important; }

	/* bouton “Lire tout” bordeaux bien lisible sur mobile */
	#bioToggle{
		display: block;
		margin: 1rem auto; /* centre horizontalement */
		background: transparent;             /* fond vide */
		color: #6d0f22 !important;           /* texte bordeaux */
		border: 2px solid #6d0f22 !important;/* contour bordeaux */
		border-radius: 999px;
		font-weight: 700;
		padding: .55rem 1.2rem;
		box-shadow: 0 10px 18px rgba(109,15,34,.18);
	}
	#bioToggle:hover{
		background: #6d0f22;                 /* fond bordeaux au survol */
		color: #fff !important;              /* texte blanc */
	}

	/* bio plus confortable sur mobile (si pas déjà réglé) */
	.ap-bio{ max-height:500px; font-size:1rem; line-height:1.6; }
	.ap-bio.open{ max-height:none; overflow:auto; }
	#bio.open + #bioFade{ display:none !important; }
}

/* ===== Services – cartes modernes ===== */
:root{
	--svc-brand:#6d0f22;      /* bordeaux */
	--svc-ink:#2b1e17;
	--svc-muted:#5b4942;
	--svc-border:#e6d6c8;
}

.services-grid{ /* juste un petit gap propre */
	row-gap: 1.5rem;
}

/* Carte */
.svc-card{
	background:#fff;
	border:1px solid var(--svc-border);
	border-radius:16px;
	overflow:hidden;
	position:relative;
	display:grid;
	grid-template-rows:auto 1fr;
	box-shadow:0 8px 18px rgba(0,0,0,.06);
	transition:transform .25s ease, box-shadow .25s ease;
}
.svc-card::before{
	content:"";
	position:absolute; left:0; right:0; top:0; height:4px;
	background:linear-gradient(90deg, var(--svc-brand), #8b2a3a);
}
.svc-card:hover{
	transform: translateY(-6px);
	box-shadow: 0 16px 28px rgba(0,0,0,.12);
}

/* Vignette avec ratio stable */
.svc-media{ aspect-ratio: 16/10; background:#000; }
.svc-media img{
	width:100%; height:100%; object-fit:cover; display:block;
	transform:scale(1.02);
	transition:transform .5s ease, filter .5s ease;
}
.svc-card:hover .svc-media img{
	transform:scale(1.07);
	filter:contrast(1.03) saturate(1.03);
}

/* Corps */
.svc-body{ padding:16px 16px 18px; gap:10px; }
.svc-title{ margin:2px 0 4px; font-size:1.15rem; font-weight:800; color:var(--svc-ink); }
.svc-text{ margin:0; color:var(--svc-muted); font-size:.97rem; line-height:1.55; }

/* Bouton harmonisé (contour bordeaux, rempli au survol) */
.svc-btn{
	display:inline-flex; align-items:center; justify-content:center;
	padding:.52rem 1.1rem; border-radius:999px; font-weight:700; font-size:.95rem;
	color:var(--svc-brand); background:transparent; border:2px solid var(--svc-brand);
	text-decoration:none; transition: all .2s ease;
}
.svc-btn:hover{
	background:var(--svc-brand); color:#fff;
	box-shadow:0 10px 18px rgba(109,15,34,.18);
}

/* Responsive finitions */
@media (max-width: 576px){
	.svc-title{ font-size:1.08rem; }
	.svc-text{ font-size:.95rem; }
}

/* ===== Services : correctifs & look propre ===== */
.services-modern .card-1{
	width: 100% !important;              /* annule tes widths 80/95/60% */
}

.services-modern .card{
	border: 1px solid #e6d6c8;           /* liseré doux plutôt que bordeaux dur */
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 18px rgba(0,0,0,.06);
	transition: transform .25s ease, box-shadow .25s ease;
}

.services-modern .card:hover{
	transform: translateY(-6px);
	box-shadow: 0 16px 28px rgba(0,0,0,.12);
}

/* Images au ratio fixe — F I N I  les débordements */
.services-modern .card-img-top{
	aspect-ratio: 16/10;                 /* garde une belle proportion */
	width: 100%;
	height: auto;
	object-fit: cover;                    /* coupe proprement si besoin */
	display: block;
}

/* Fallback si aspect-ratio n'est pas supporté (vieux navigateurs) */
@supports not (aspect-ratio: 1 / 1){
	.services-modern .card-img-top{ height: 200px; }
}

.services-modern .card-body{
	padding: 16px;
	display: flex;
	flex-direction: column;
}

.services-modern .card-title{
	font-weight: 800;
	margin-bottom: 8px;
	color: #2b1e17;
}

.services-modern .card-text{
	color: #5b4942;
	font-size: .97rem;
	line-height: 1.55;
	margin-bottom: 0;
}

/* Pied de carte : bouton calé en bas & style harmonisé */
.services-modern .card-footer{
	background: #fff;
	border-top: 0;
	padding: 0 16px 16px;
}

/* Bouton au style “site” (contour bordeaux, rempli au hover) */
.services-modern .btn-outline-wood{
	background: transparent;
	color: #6d0f22 !important;
	border: 2px solid #6d0f22 !important;
	border-radius: 999px;
	font-weight: 700;
	padding: .52rem 1.1rem;
	transition: all .2s ease;
}

.services-modern .btn-outline-wood:hover{
	background: #6d0f22;
	color: #fff !important;
	box-shadow: 0 10px 18px rgba(109,15,34,.18);
}

/* petits ajustements responsive */
@media (max-width: 576px){
	.services-modern .card-title{ font-size: 1.08rem; }
	.services-modern .card-text{ font-size: .95rem; }
}

/* ===== Location d'instruments – thème local ===== */
:root{
	--rent-brand:#6d0f22;
	--rent-ink:#2b1e17;
	--rent-muted:#5b4942;
	--rent-border:#e6d6c8;
	--rent-paper:#fffaf3;
}

.rent{ color:var(--rent-ink); }

/* En-tête */
.rent-hero{ text-align:center; margin-bottom:1.25rem; }
.rent-title{
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.2rem);
	font-weight:800; margin:0 0 .35rem;
}
.rent-kicker{ color:var(--rent-muted); margin:0 auto .5rem; max-width: 60ch; }

/* Intro / carte */
.rent-intro{ margin:1rem 0 1.5rem; }
.rent-card{
	background:var(--rent-paper);
	border:1px solid var(--rent-border);
	border-radius:1rem;
	padding:1.25rem 1.1rem;
	box-shadow:0 10px 30px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.04);
}
.rent-h2{ font-size:1.25rem; font-weight:800; margin:0 0 .6rem; }
.rent-text p{ margin:0 0 .7rem; }
.rent-bullets{
	list-style:none; padding:0; margin:.5rem 0 0;
	display:grid; gap:.4rem;
}
.rent-bullets li{
	display:flex; align-items:center; gap:.55rem;
}
.rent-bullets li::before{
	content:""; width:.5rem; height:.5rem; border-radius:50%;
	background:var(--rent-brand); flex:0 0 .5rem;
}

/* Tailles */
.rent-sizes{ margin:1.75rem 0 1.25rem; }
.rent-h3{ font-size:1.15rem; font-weight:800; margin:0 0 .5rem; }
.rent-chips{
	list-style:none; padding:0; margin:0;
	display:flex; flex-wrap:wrap; gap:.5rem;
}
.rent-chip{
	background:#f6eee5; border:1px solid var(--rent-border); border-radius:999px;
	padding:.35rem .75rem; font-size:.95rem;
}
.rent-hint{ margin:.5rem 0 0; color:var(--rent-muted); font-size:.95rem; }

/* Tarifs : “tableau” responsive */
.rent-pricing{ margin-top:1.25rem; }
.rent-table{
	background:#fff; border:1px solid var(--rent-border); border-radius:1rem;
	overflow:hidden; box-shadow:0 8px 18px rgba(0,0,0,.06);
}

.rent-row{
	display:grid;
	grid-template-columns: 2.2fr 1fr 1fr 1fr auto;
	align-items:center;
}
.rent-row--head{ background:#2f363d; color:#fff; font-weight:700; }

.rent-cell{ padding:.85rem 1rem; border-top:1px solid var(--rent-border); }
.rent-thead .rent-cell{ border-top:0; }
.rent-cell--head{ padding:.9rem 1rem; }

/* Bouton */
.rent-btn{
	display:inline-flex; align-items:center; justify-content:center;
	padding:.45rem .9rem; border-radius:999px;
	border:2px solid var(--rent-brand); background:transparent;
	color:var(--rent-brand); font-weight:700; text-decoration:none;
	transition: all .2s ease;
}
.rent-btn:hover{ background:var(--rent-brand); color:#fff;
	box-shadow:0 10px 18px rgba(109,15,34,.18);
}

.rent-note{ color:var(--rent-muted); font-size:.95rem; margin:.75rem 0 0; }

/* Alternance visuelle */
.rent-tbody .rent-row:nth-child(odd){ background:#fff; }
.rent-tbody .rent-row:nth-child(even){ background:#fbf7f2; }

/* ===== Mobile : table -> cartes empilées ===== */
@media (max-width: 768px){
	.rent-row{
		grid-template-columns: 1fr;
		grid-row-gap:.35rem;
		padding:.65rem 0;
	}
	.rent-row > .rent-cell{
		border-top:0; border-bottom:1px dashed var(--rent-border);
		padding:.35rem 1rem;
	}
	.rent-row > .rent-cell:last-child{ border-bottom:0; }

	.rent-row--head{ display:none; } /* cache l’en-tête classique */

	.rent-cell[data-label]{
		position:relative; padding-left: 7.5rem;
	}
	.rent-cell[data-label]::before{
		content: attr(data-label);
		position:absolute; left:1rem; top:.35rem;
		font-weight:700; color:var(--rent-muted);
	}

	.rent-btn{ width:100%; }
}

/* ===== Scrollbar personnalisée Bordeaux (avec bordure plus claire) ===== */

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: #f1e7d5;       /* beige clair du site */
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background-color: #5c0b1a; /* bordeaux principal */
	border-radius: 10px;
	border: 2px solid #8a2436; /* bordeaux plus clair autour du pouce */
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
}

::-webkit-scrollbar-thumb:hover {
	background-color: #73152a; /* un peu plus lumineux au survol */
	border-color: #a03a48;     /* bordure légèrement rosée au hover */
}

/* Firefox */
html {
	scrollbar-width: thin;
	scrollbar-color: #5c0b1a #f1e7d5; /* thumb | track */
}