@media (max-width: 767px) {

	/* COMMON */

	body {
		font-size: 0.9rem;
	}

	h1 {
		font-size: 2.2rem;
		line-height: 2.3rem;
		letter-spacing: 2px;
	}

	h2 {
		font-size: 1.5rem;
		line-height: 2rem;
		letter-spacing: 1px;
	}

	.sous-titre-hero {
		font-size: 0.9rem;
		line-height: 1.3rem;
		letter-spacing: 0.2px;
	}

	h3 {
		font-size: 1.1rem;
		line-height: 1.4rem;
		letter-spacing: 0.2px;
	}

	.petit-texte {
		font-size: 0.8rem;
		line-height: 1.2rem;
	}

	.chiffre {
		font-size: 1.6rem;
		line-height: 2rem;
	}

	.tel-link {
		pointer-events: auto;
		cursor: pointer;
	}

	.sous-titre {
		font-size: 1.1rem;
		line-height: 1.4rem;
		letter-spacing: 0.2px;
	}


	/* LINKS + BTNS */

	p {
		font-size: 0.9rem;
		line-height: 1.4rem;
		margin-bottom: 1rem;
	}

	.btn-brand {
		padding: 0.4rem 1rem;
		font-size: 0.7rem;
	}

	.btn-main {
		height: 3rem;
		padding: 0 2rem;
		border-radius: 1.5rem;
		font-size: 0.9rem;
		line-height: 1.4rem;
	}


	/* HEADER */

	header.main,
	header.main.light {
		position: relative;
		z-index: 1060;
	}

	header.main {
		flex-wrap: nowrap;
		justify-content: space-between;
		height: auto;
		padding: 1.2rem;
		background: var(--brun-fonce);
	}

	header.main .logo {
		position: relative;
		z-index: 1060;
		width: 9rem;
	}

	/* Panneau de menu ouvert : fond sombre, donc toujours le logo pâle. */
	html.menu-open header.main.light .logo-fonce {
		display: none;
	}

	html.menu-open header.main.light .logo-pale {
		display: block;
	}


	/* Bouton hamburger */

	header.main .hamburger {
		display: block;
		position: relative;
		z-index: 1060;
	}

	.hamburger-box {
		width: 2rem;
		height: 1.4rem;
	}

	.hamburger-inner,
	.hamburger-inner::before,
	.hamburger-inner::after {
		width: 2rem;
		height: 2px;
		border-radius: 2px;
		background-color: var(--beige);
	}

	.hamburger-inner::before {
		top: -0.6rem;
	}

	.hamburger-inner::after {
		bottom: -0.6rem;
	}

	header.main.light .hamburger-inner,
	header.main.light .hamburger-inner::before,
	header.main.light .hamburger-inner::after {
		background-color: var(--brun-fonce);
	}

	header.main .hamburger.is-active .hamburger-inner,
	header.main .hamburger.is-active .hamburger-inner::before,
	header.main .hamburger.is-active .hamburger-inner::after,
	header.main.light .hamburger.is-active .hamburger-inner,
	header.main.light .hamburger.is-active .hamburger-inner::before,
	header.main.light .hamburger.is-active .hamburger-inner::after {
		background-color: var(--blanc);
	}


	/* Panneau de menu */

	header.main #menu_panel {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1050;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3rem;
		width: 100%;
		height: 100%;
		background: var(--brun-fonce);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-1rem);
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
	}

	header.main #menu_panel.open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	#menu_panel .nav-brands {
		flex-direction: column;
		gap: 1rem;
	}

	#menu_panel .nav-main {
		flex-direction: column;
		gap: 1.8rem;
	}

	#menu_panel .btn-brand {
		display: block;
		width: 13rem;
		padding: 0.8rem 1rem;
		font-size: 0.9rem;
		color: var(--beige);
		text-align: center;
	}

	#menu_panel .btn-brand.active {
		background: var(--brun);
		border-color: var(--brun);
		color: var(--blanc);
	}

	#menu_panel .nav-main a {
		font-size: 1.1rem;
		color: var(--beige);
	}

	#menu_panel .nav-main .lang i {
		font-size: 0.8rem;
		margin-left: 0.3rem;
	}


	/* FOOTER */

	footer.main {
		padding: 3rem 1.5rem;
	}

	footer.main .nav-brands {
		gap: 0.5rem;
		margin-bottom: 1.5rem;
	}

	footer.main .btn-brand {
		padding: 0.4rem 1rem;
	}

	footer.main .footer-links {
		flex-wrap: wrap;
		gap: 1rem;
		width: 100%;
		height: auto;
		padding: 1.2rem 0;
	}

	footer.main .footer-links > a {
		font-size: 0.8rem;
	}

	footer.main .footer-links .sep {
		height: 1.2rem;
	}

	footer.main .socials {
		gap: 0.8rem;
	}

	footer.main .socials a {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 0.9rem;
	}

	footer.main .logo {
		width: 12rem;
		margin-top: 2rem;
	}


	/* HOME */

	/* Bascule sur l'image mobile si elle est renseignée, sinon on garde celle du desktop. */
	#home #hero {
		align-items: flex-start;
		height: auto;
		min-height: 34rem;
		padding: 2rem 1.5rem;
		background-image: var(--hero-img-mobile, var(--hero-img));
		background-position: 75% center;
		background-size: cover;
	}

	/* Le texte est calé en haut sur mobile : pas de décalage à compenser. */
	#home #hero .hero-content {
		width: 50%;
		margin-bottom: 0;
	}

	#home #hero h1 {
		font-size: 1.8rem;
		line-height: 2rem;
		letter-spacing: 1px;
	}

	#home #hero .sous-titre-hero {
		font-size: 0.8rem;
		line-height: 1.1rem;
	}

	#home #hero h1 {
		margin-bottom: 1.5rem;
	}

	#home #about {
		height: auto;
		padding: 4rem 1.5rem;
	}

	#home #about .about-content {
		gap: 2rem;
		width: 100%;
	}

	#home #about .crest {
		width: 8rem;
	}

	#home #about h2 {
		margin-bottom: 1.2rem;
	}

	#home #about .texte-gras {
		margin-top: 0.8rem;
	}

	#home .collection {
		display: block;
		height: auto;
		padding-bottom: 3rem;
	}

	#home .collection .zoom {
		position: static;
		width: 100%;
		height: auto;
	}

	#home .collection .img {
		position: relative;
		display: block;
		top: auto;
		width: 55%;
		margin-top: -6rem;
	}

	#home .collection.img-left .img {
		margin-left: 1.5rem;
	}

	#home .collection.img-right .img {
		margin-left: auto;
		margin-right: 1.5rem;
	}

	#home .collection .collection-texte {
		width: auto;
		padding: 2.5rem 1.5rem 0;
	}

	#home .collection.img-left .collection-texte,
	#home .collection.img-right .collection-texte {
		margin-left: 0;
	}

	#home .collection h3 {
		margin-bottom: 0.5rem;
	}

	#home .collection .collection-texte .sous-titre {
		margin-bottom: 1.5rem;
	}

	#home .collection .btn-main {
		margin-top: 2rem;
	}

	.cta-detaillant {
		height: auto;
		padding: 4rem 1.5rem;
	}

	/* Pas de parallaxe sur mobile : le calque colle à la section. */
	.cta-detaillant .cta-bg {
		top: 0;
		height: 100%;
		will-change: auto;
	}

	.cta-detaillant .cta-content {
		width: 100%;
	}

	.cta-detaillant .cta-content .sous-titre {
		margin-bottom: 1.2rem;
	}

	.cta-detaillant .btn-main {
		margin-top: 2rem;
	}


	/* À PROPOS */

	/* L'image est calée en bas à sa taille naturelle ;
	   le ::after réserve sa hauteur pour la faire descendre sous le contenu.
	   Bascule sur l'image mobile si elle est renseignée, sinon on garde celle du desktop. */
	#a-propos #hero {
		height: auto;
		padding: 2.5rem 1.5rem 0;
		background-image: var(--hero-img-mobile, var(--hero-img));
		background-position: center bottom;
		background-size: 100% auto;
	}

	/* Réserve la place de l'image sous le texte. Le ratio doit correspondre à
	   l'image réellement affichée, sinon elle remonte derrière le titre :
	   1920 × 996 pour l'image desktop, 4:5 dès qu'une image mobile est choisie
	   (la classe est posée par le gabarit). */
	#a-propos #hero::after {
		content: '';
		display: block;
		aspect-ratio: 2880 / 1494;
		margin: 3rem -1.5rem 0;
	}

	#a-propos #hero.hero-mobile::after {
		aspect-ratio: 4 / 5;
	}

	#a-propos #hero h1 {
		max-width: none;
		margin-bottom: 2rem;
	}

	#a-propos #hero .sous-titre-hero {
		max-width: none;
	}

	#a-propos #hero .hero-bas {
		display: flex;
		align-items: center;
		gap: 1.2rem;
	}

	#a-propos #hero .badge {
		position: static;
		flex: 0 0 6rem;
		width: 6rem;
		height: 6rem;
	}

	#a-propos #hero .sous-titre-hero {
		flex: 1;
		margin-bottom: 0;
	}

	#a-propos #hero .badge-label {
		font-size: 0.6rem;
		line-height: 0.9rem;
	}

	#a-propos #hero .badge-annee {
		font-size: 1.8rem;
		padding-top: 0.6rem;
	}

	#a-propos #intro {
		padding: 3rem 1.5rem;
	}

	#a-propos #intro .intro-content {
		width: 100%;
	}

	#a-propos #valeurs {
		display: block;
		height: auto;
	}

	#a-propos #valeurs .valeurs-img {
		width: 100%;
		height: auto;
	}

	#a-propos #valeurs .valeurs-content {
		width: 100%;
		margin-left: 0;
		padding: 3rem 1.5rem;
	}

	#a-propos #valeurs h2 {
		margin-bottom: 2rem;
	}

	#a-propos #valeurs .valeur {
		padding: 1rem 0;
	}

	#a-propos #valeurs .valeur .chiffre {
		flex: 0 0 3.5rem;
	}

	#a-propos #valeurs .valeur .sous-titre {
		margin-bottom: 0.5rem;
	}

	#a-propos #collections {
		height: auto;
		padding: 3rem 1.5rem;
	}

	#a-propos #collections h2 {
		margin-bottom: 2rem;
	}

	#a-propos #collections .collections-liste {
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	}

	#a-propos #collections .collection-card {
		width: 100%;
		max-width: 20rem;
	}

	#a-propos #collections .collection-card .btn-main {
		width: 85%;
		height: 3rem;
		margin: 1rem auto 0;
		padding: 0;
	}

	#a-propos #cta {
		display: block;
		height: auto;
		padding: 3rem 1.5rem;
	}

	#a-propos #cta .cta-m {
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	#a-propos #cta .cta-titre,
	#a-propos #cta .cta-texte {
		width: 100%;
	}

	#a-propos #cta .cta-texte {
		margin: 2rem 0 0;
	}

	#a-propos #cta .sous-titre-hero {
		margin-bottom: 2rem;
	}


	/* PAGES COLLECTION */

	.page-collection #intro {
		padding: 3rem 1.5rem;
	}

	.page-collection #intro .intro-content {
		width: 100%;
	}

	.page-collection #intro .logo-collection {
		width: auto;
		height: 4.5rem;
		max-width: 100%;
		margin-bottom: 1.5rem;
	}

	.page-collection #intro h2 {
		margin-bottom: 1.5rem;
	}

	.page-collection #galerie {
		gap: 1rem;
		padding: 0 2rem 2rem;
	}

	/* Largeurs calculées sur la gouttière de 1rem : chaque vignette cède
	   sa part des espaces, soit gap × (colonnes - 1) / colonnes. */
	/* Pas de survol au doigt : le voile n'a pas lieu d'être. */
	.page-collection #galerie .galerie-img::after {
		display: none;
	}

	/* La loupe reste affichée en permanence, calée dans le coin inférieur droit :
	   sans survol ni curseur « zoom-in », c'est le seul indice que la photo
	   s'agrandit. Les règles de survol du desktop sont neutralisées ici, sinon
	   un appui recentrerait la pastille sur certains navigateurs tactiles. */
	.page-collection #galerie .galerie-zoom,
	.page-collection #galerie .galerie-img:hover .galerie-zoom {
		top: auto;
		left: auto;
		right: 0.6rem;
		bottom: 0.6rem;
		width: 1.8rem;
		height: 1.8rem;
		font-size: 0.75rem;
		opacity: 1;
		transform: none;
	}

	.page-collection #galerie.cols-mobile-1 .galerie-img {
		width: 100%;
	}

	.page-collection #galerie.cols-mobile-2 .galerie-img {
		width: calc(50% - 0.5rem);
	}

	.page-collection #galerie.cols-mobile-3 .galerie-img {
		width: calc(33.3% - 0.7rem);
	}

	.lightbox {
		padding: 1.5rem;
	}

	.lightbox .lightbox-close {
		top: 1rem;
		right: 1rem;
		font-size: 1.5rem;
	}


	/* CONTACT */

	#contact #formulaire {
		padding: 3rem 1.5rem;
	}

	#contact #formulaire .formulaire-inner {
		display: block;
		width: 100%;
	}

	#contact #formulaire .formulaire-infos,
	#contact #formulaire .formulaire-form {
		width: 100%;
	}

	#contact #formulaire .formulaire-form {
		margin-top: 3rem;
	}

	#contact #formulaire h1 {
		margin-bottom: 1.5rem;
	}

	#contact #formulaire .sous-titre {
		margin-bottom: 2rem;
	}

	#contact #formulaire .infos-cols > div {
		width: 50%;
	}

	#contact #formulaire .infos-bloc {
		margin-top: 1.5rem;
	}


	#contact #detaillants {
		height: auto;
		padding: 3rem 1.5rem;
		background: none;
	}

	#contact #detaillants .detaillants-inner {
		width: 100%;
		margin-left: 0;
	}

	#contact #detaillants h2 {
		margin-bottom: 1.2rem;
	}

	/* Pas de scroll interne en mobile : la liste complète est affichée */
	#contact #detaillants .detaillants-liste {
		direction: ltr;
		max-height: none;
		margin: 2rem 0 0;
		padding-left: 0;
		overflow-y: visible;
	}

	#contact #detaillants .detaillant + .detaillant {
		margin-top: 2rem;
		padding-top: 2rem;
	}

	#contact #detaillants .detaillant h3 {
		margin-bottom: 0.5rem;
	}

	#contact #detaillants .detaillant .sous-titre {
		margin-bottom: 1rem;
	}

	#contact #detaillants .detaillants-liste::-webkit-scrollbar {
		display: none;
	}


	/* WPFORMS */

	#contact .wpforms-form .wpforms-field {
		padding: 0 0 1rem 0 !important;
	}

	#contact .wpforms-form input[type=text],
	#contact .wpforms-form input[type=email],
	#contact .wpforms-form input[type=tel],
	#contact .wpforms-form textarea {
		padding: 0 1rem !important;
		font-size: 0.9rem !important;
		line-height: 1.4rem !important;
	}

	#contact .wpforms-form input[type=text],
	#contact .wpforms-form input[type=email],
	#contact .wpforms-form input[type=tel] {
		height: 3rem !important;
	}

	#contact .wpforms-form textarea {
		height: 12rem !important;
		padding: 0.8rem 1rem !important;
	}

	#contact .wpforms-form .wpforms-submit-container {
		margin-top: 1rem !important;
	}

	#contact .wpforms-form button[type=submit] {
		height: 3rem !important;
		padding: 0 2rem !important;
		border-radius: 1.5rem !important;
		font-size: 0.9rem !important;
		line-height: 1.4rem !important;
	}


	/* ERREUR 404 */

	#erreur-404 {
		min-height: 60vh;
		padding: 9rem 2rem 4rem;
	}

	#erreur-404 h1 {
		margin-bottom: 1rem;
		font-size: 2.2rem;
		line-height: 2.6rem;
	}

	#erreur-404 p {
		margin-bottom: 2rem;
		font-size: 0.9rem;
		line-height: 1.4rem;
	}


	/* PAGE SIMPLE */

	.page-simple {
		padding: 8rem 0 3rem;
	}

	.page-simple-inner {
		max-width: 100%;
		padding: 0 2rem;
	}

	.page-simple h1 {
		margin-bottom: 2rem;
	}

	.page-contenu h2 {
		margin: 2rem 0 1rem;
		font-size: 1.5rem;
		line-height: 1.9rem;
	}

	.page-contenu h3 {
		margin: 1.8rem 0 0.8rem;
		font-size: 1.2rem;
		line-height: 1.6rem;
	}

	.page-contenu h4,
	.page-contenu h5,
	.page-contenu h6 {
		margin: 1.5rem 0 0.6rem;
		font-size: 1rem;
		line-height: 1.4rem;
	}

	.page-contenu p {
		margin: 0 0 1rem;
	}

	.page-contenu a {
		text-underline-offset: 0.2rem;
	}

	.page-contenu ul,
	.page-contenu ol {
		margin: 0 0 1rem;
		padding-left: 1.2rem;
	}

	.page-contenu li {
		margin-bottom: 0.4rem;
		font-size: 0.9rem;
		line-height: 1.4rem;
	}

	.page-contenu li > ul,
	.page-contenu li > ol {
		margin: 0.4rem 0 0;
	}

	.page-contenu blockquote {
		margin: 1.5rem 0;
		padding: 0.4rem 0 0.4rem 1.2rem;
	}

	.page-contenu hr {
		margin: 2rem 0;
	}

	.page-contenu img {
		margin: 1rem 0;
	}

	.page-contenu figure {
		margin: 1.5rem 0;
	}

	.page-contenu figcaption {
		margin-top: 0.5rem;
		font-size: 0.8rem;
		line-height: 1.2rem;
	}

	/* Les tableaux larges défilent au lieu de déborder. */
	.page-contenu table {
		display: block;
		width: 100%;
		margin: 1.5rem 0;
		overflow-x: auto;
		font-size: 0.85rem;
		line-height: 1.3rem;
		white-space: nowrap;
	}

	.page-contenu th,
	.page-contenu td {
		padding: 0.6rem 0.8rem;
	}


	.page-contenu .wp-block-button__link {
		height: 3rem;
		padding: 0 2rem;
		border-radius: 1.5rem;
		font-size: 0.9rem;
		line-height: 1.4rem;
	}

	/* Pas de texte habillé sur petit écran. */
	.page-contenu .alignleft,
	.page-contenu .alignright {
		float: none;
		display: block;
		margin: 1rem auto;
	}

}