/**
 * Breakpoints & Responsive Utilities - Habari Theme
 * Approche Mobile First (min-width)
 * Breakpoints alignés sur UIkit (https://getuikit.com/docs/visibility)
 */

/* =============================================
   VARIABLES DE BREAKPOINTS (Référence)
   ============================================= */
:root {
	/* Breakpoints UIkit */
	--habari-bp-s: 640px;
	/* Small  - @s  */
	--habari-bp-m: 960px;
	/* Medium - @m  */
	--habari-bp-l: 1200px;
	/* Large  - @l  */
	--habari-bp-xl: 1600px;
	/* XLarge - @xl */

	/* Margins conteneur */

	--habari-margin-s: 1rem;
	--habari-margin-m: 2rem;
	--habari-margin-l: 3rem;
	--habari-margin-xl: 4rem;

	--habari-padding-s: 1rem;
	--habari-padding-m: 2rem;
	--habari-padding-l: 3rem;
	--habari-padding-xl: 4rem;

	/* Conteneur */
	--habari-container-max-width: 1200px;

}

/* =============================================
   TABLETTE & MOBILE — max-width: 959px
   ============================================= */
@media screen and (max-width: 959px) {

	/* -- Section Communes Home -- */
	.habari-communes-home {
		padding: 1.5rem 0;
	}

	.habari-communes-home__grid--layout-4,
	.habari-communes-home__grid--layout-5 {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: unset;
	}

	.habari-communes-home__grid--layout-4 .habari-communes-home__card,
	.habari-communes-home__grid--layout-5 .habari-communes-home__card {
		grid-column: unset !important;
		grid-row: unset !important;
		height: 200px;
	}

	.habari-communes-home__grid--layout-2 {
		grid-template-rows: 220px 220px;
	}

	/* -- Hero -- */
	.habari-hero {
		min-height: auto;
		background-image: none !important;
	}

	.habari-hero__inner {
		flex-direction: column;
		min-height: auto !important;
		gap: 0 !important;
		padding: 1.5rem !important;
	}

	.habari-hero__intro {
		padding: 2rem 1.5rem;
		width: 100% !important;
		box-sizing: border-box;
	}

	.habari-hero__title {
		font-size: 1.65rem;
	}

	.habari-hero__trending {
		width: 100% !important;
		box-sizing: border-box;
	}

	.habari-trending-item {
		border-bottom-color: rgba(233, 233, 233, 0.12);
	}

	.habari-trending-item__cat {
		color: var(--habari-primary-brand);
	}

	/* -- Section Explore -- */
	.habari-explore__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		height: auto;
	}

	.habari-explore__card {
		min-height: 220px;
	}

	.habari-explore__card:nth-child(1) {
		grid-column: 1 / 3;
		grid-row: auto;
	}

	.habari-explore__card:nth-child(2) {
		grid-column: 1 / 3;
		grid-row: auto;
	}

	.habari-explore__card:nth-child(3),
	.habari-explore__card:nth-child(4) {
		grid-column: auto;
		grid-row: auto;
	}

	.habari-explore__title {
		font-size: 1.6rem;
	}

	/* Excerpt toujours visible sur touch (pas de hover) */
	.habari-explore__card-excerpt {
		max-height: 5rem;
		opacity: 1;
		transform: translateY(0);
	}

	/* -- Section Spotlight -- */
	.habari-spotlight__content {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.habari-spotlight__featured-img {
		height: 260px;
	}

	.habari-spotlight__title {
		font-size: 1.4rem;
	}

	/* -- Subscribe CTA -- */
	.habari-subscribe-cta__inner {
		flex-direction: column;
		text-align: center;
	}

	.habari-subscribe-cta__title {
		font-size: 1.35rem;
	}

	.habari-subscribe-cta__social {
		border: none;
		padding-left: 0;
		width: 100%;
		text-align: center;
	}

	.habari-subscribe-cta__social-list {
		justify-content: center;
	}

	/* -- Navigation tablette -- */
	.main-navigation {
		display: none;
	}

	.site-header__inner {
		padding-left: var(--habari-padding-m);
		padding-right: var(--habari-padding-m);
		position: relative;
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}

	.nav-mobile-toggle {
		display: flex;
	}

	/* -- User menu : label masqué, logo centré, dropdown full-width -- */
	.habari-user-menu__label {
		display: none;
	}

	.site-branding {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		flex: unset;
	}

	.habari-user-menu .uk-dropdown {
		left: 0 !important;
		right: 0 !important;
		top: 82px !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}

	/* Single — zone paysage : pleine largeur quand la colonne droite est cachée */
	body.single .habari-single-landscape-zone {
		width: 100%;
	}

	/* Single — layout en colonne, colonne droite cachée */
	.habari-single-layout {
		flex-direction: column;
	}

	.habari-single-left-col {
		width: 100%;
	}

	.habari-single-right-col {
		display: none;
	}

	.habari-single-title {
		font-size: 1.85rem;
	}

	.habari-article-meta {
		white-space: normal;
		text-align: left;
	}

	/* Single — Explore more : 2 colonnes fixes sur tablette */
	body.single .habari-explore-more__grid {
		gap: 1.25rem;
	}

	body.single .habari-explore-more__card {
		flex: 0 0 calc((100% - 1.25rem) / 2);
		max-width: calc((100% - 1.25rem) / 2);
	}

	body.single .habari-explore-more__image {
		height: 180px;
	}

	/* -- Section Proverbes Home -- */
	.habari-proverbes-home {
		padding: 1.5rem 0;
	}

	.habari-proverbes-home__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}

	/* Masquer les cartes 4 à 6 sur tablette/mobile */
	.habari-proverbes-home__card--hide-sm {
		display: none;
	}

	/* -- Section Apprendre Home -- */
	.habari-home-apprendre {
		padding: 1.5rem 0;
	}

	.habari-home-apprendre__grid {
		gap: 1.25rem;
	}

	.habari-home-apprendre__card {
		width: calc((100% - 1.25rem) / 2);
		flex: 0 0 calc((100% - 1.25rem) / 2);
	}

	.habari-home-apprendre__title {
		font-size: 1.6rem;
	}

	.habari-home-apprendre__card-thumb {
		height: 160px;
	}

	/* -- Headers : fil d'ariane en haut à droite, titre en dessous -- */
	.habari-home-header .uk-grid,
	.habari-page-hero .uk-grid,
	.habari-category-hero .uk-grid {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.habari-home-header .uk-grid > .uk-width-expand,
	.habari-page-hero .uk-grid > .uk-width-expand,
	.habari-category-hero .uk-grid > .uk-width-expand {
		width: 100%;
		flex: none;
	}

	.habari-home-header .uk-grid > .uk-width-auto,
	.habari-page-hero .uk-grid > .uk-width-auto,
	.habari-category-hero .uk-grid > .uk-width-auto {
		width: 100%;
		flex: none;
		display: flex;
		justify-content: flex-end;
	}

	/* -- Commune / Proverbe single : fil d'ariane en haut, titre en dessous -- */
	.commune-single-prehead .uk-grid,
	.proverbe-single-prehead .uk-grid {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.commune-single-prehead .uk-grid > .uk-width-expand,
	.commune-single-prehead .uk-grid > .uk-width-auto,
	.proverbe-single-prehead .uk-grid > .uk-width-expand,
	.proverbe-single-prehead .uk-grid > .uk-width-auto {
		width: 100%;
		flex: none;
	}

	/* -- Onglets communes : défilement horizontal sur petits écrans -- */
	.commune-tabs-nav-wrap {
		position: relative;
	}

	.commune-tabs-nav.uk-tab {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-right: 2rem;
	}

	.commune-tabs-nav.uk-tab::-webkit-scrollbar {
		display: none;
	}

	.commune-tabs-nav.uk-tab > li > a {
		white-space: nowrap;
	}

	.commune-tabs-chevron {
		position: absolute;
		right: 0;
		top: 0;
		height: 1.62rem; /* = font-size 1.35rem × line-height 1.2 des liens onglets */
		display: flex;
		align-items: center;
		padding: 0 0.4rem 0 1.25rem;
		background: linear-gradient(to right, transparent, var(--habari-secondary-navy-off) 55%);
		font-size: 1.5rem;
		color: var(--habari-primary-brand);
		pointer-events: none;
		user-select: none;
	}

	.commune-tabs-nav-wrap.at-end .commune-tabs-chevron {
		background: linear-gradient(to left, transparent, var(--habari-secondary-navy-off) 55%);
		right: auto;
		left: 0;
		padding: 0 1.25rem 0 0.4rem;
	}
}

/* =============================================
   MOBILE — max-width: 640px
   ============================================= */
@media screen and (max-width: 640px) {

	/* -- Hero : marges harmonisées avec les autres sections (1rem) -- */
	.habari-hero__inner {
		padding: 1rem 1.25rem !important;
	}

	.habari-hero__intro {
		padding: 0;
		width: 100% !important;
		margin-bottom: 1rem;
	}

	.habari-hero__desc {
		text-align: justify;
	}

	/* -- Section Communes Home -- */
	.habari-communes-home {
		padding: 1rem 0;
	}

	.habari-communes-home__grid--layout-4,
	.habari-communes-home__grid--layout-5 {
		grid-template-columns: 1fr;
	}

	.habari-communes-home__grid--layout-4 .habari-communes-home__card,
	.habari-communes-home__grid--layout-5 .habari-communes-home__card {
		height: 180px;
	}

	.habari-communes-home__grid--layout-2 {
		grid-template-rows: 180px 180px;
	}

	.habari-communes-home__title {
		font-size: 1.35rem;
	}

	/* -- Hero -- */
	.habari-hero__title {
		font-size: 1.4rem;
	}

	.habari-trending-item__thumb {
		width: 80px;
		height: 62px;
	}

	.habari-trending-item__title {
		font-size: 0.85rem;
	}

	/* -- Section Explore -- */
	.habari-explore {
		padding: 1rem 0;
	}

	.habari-explore__grid {
		grid-template-columns: 1fr;
	}

	.habari-explore__card,
	.habari-explore__card:nth-child(1),
	.habari-explore__card:nth-child(2),
	.habari-explore__card:nth-child(3),
	.habari-explore__card:nth-child(4) {
		grid-column: 1;
		grid-row: auto;
		min-height: 200px;
	}

	.habari-explore__title {
		font-size: 1.35rem;
	}

	/* -- Section Spotlight -- */
	.habari-spotlight {
		padding: 1rem 0;
	}

	.habari-spotlight__featured-img {
		height: 210px;
	}

	.habari-spotlight__item-thumb {
		width: 80px;
		height: 60px;
	}

	.habari-spotlight__title {
		font-size: 1.25rem;
	}

	/* -- Subscribe CTA -- */
	.habari-subscribe-cta {
		padding: 1rem 0;
	}

	.habari-subscribe-cta__title {
		font-size: 1.2rem;
	}

	/* -- Category Grid -- */
	.habari-articles-grid {
		gap: 1rem;
	}

	.habari-article-card {
		flex: 1 1 100%;
	}

	.habari-card-image {
		height: 220px;
		object-fit: cover;
	}

	/* -- Publicités -- */
	.habari-article-card--ad .habari-ad-zone {
		height: calc(374px + 1.5rem); /* hauteur totale + 1.5rem supplémentaire */
	}

	.habari-article-card--ad .habari-ad__img {
		height: 100%; /* l'image remplit toute la hauteur de la zone */
		object-fit: cover;
	}

	/* -- Controls -- */
	.habari-controls-wrapper {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}

	.habari-search-container {
		width: 100%;
		max-width: 100% !important;
	}

	.filter {
		width: 100%;
		justify-content: flex-end;
	}

	/* -- Navigation mobile -- */
	.main-navigation {
		display: none;
	}

	/* Single — zone paysage : pleine largeur sur mobile */
	body.single .habari-single-landscape-zone {
		width: 100%;
	}

	.site-header__inner {
		padding-left: var(--habari-padding-s);
		padding-right: var(--habari-padding-s);
	}

	.nav-mobile-toggle {
		display: flex;
	}

	/* -- Footer -- */
	footer {
		padding: 0 var(--habari-padding-m);
	}

	footer hr.once {
		width: 60%;
		margin: var(--habari-margin-m) auto;
	}

	footer hr.twice {
		width: 30%;
		margin: var(--habari-margin-m) auto;
	}

	.top__footer,
	.follow__us {
		display: flex;
		justify-content: space-evenly;
		gap: 20px;
		flex-direction: column;
	}

	.follow__us {
		display: flex;
		flex-direction: column;
	}

	.follow__us>.follow__website {
		order: -1;
	}

	.bottom__copyright {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: var(--habari-padding-m);
		gap: 10px;
	}

	.follow__website {
		margin: 0;
	}

	/* Single — Explore more : 1 colonne sur mobile */
	.habari-explore-more {
		padding: 2rem 0 1rem;
	}

	.habari-explore-more__title {
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}

	/* Single — Explore more : 1 colonne fixe sur mobile */
	body.single .habari-explore-more__grid {
		gap: 1rem;
	}

	body.single .habari-explore-more__card {
		flex: 0 0 100%;
		max-width: 100%;
	}

	body.single .habari-explore-more__image {
		height: 200px;
	}

	/* Single — titres plus petits sur mobile */
	.habari-single-title {
		font-size: 1.5rem;
	}

	.habari-single-meta-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.habari-single-body > p:first-of-type::first-letter {
		font-size: 3.5rem;
	}

	/* -- Communes -- */
	.commune-archive-grid {
		grid-template-columns: 1fr;
	}

	.commune-single-prehead {
		padding-top: 0.75rem;
		padding-bottom: 0.5rem;
	}

	.commune-single-title {
		font-size: 1.5rem;
	}

	.commune-hero {
		max-height: 220px;
	}

	.commune-hero img {
		height: 220px;
	}

	.commune-tabs-nav.uk-tab > li > a {
		font-size: 1rem;
	}

	.commune-tabs-nav.uk-tab > li + li::before {
		font-size: 1rem;
		padding: 0 0.5rem;
	}

	.commune-tab-panel-content {
		padding: 1rem;
	}

	.commune-info-list {
		font-size: 0.9rem;
	}

	.commune-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.commune-map-container {
		height: 260px;
	}

	.commune-related-section {
		padding: 2rem 0;
	}

	.commune-related-title {
		font-size: 1.2rem;
		margin-bottom: 1.25rem;
	}

	.commune-related-card-img {
		height: 160px;
	}

	/* -- Section Proverbes Home -- */
	.habari-proverbes-home {
		padding: 1rem 0;
	}

	.habari-proverbes-home__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.habari-proverbes-home__title {
		font-size: 1.35rem;
	}

	/* -- Section Apprendre Home -- */
	.habari-home-apprendre {
		padding: 1rem 0;
	}

	.habari-home-apprendre__grid {
		gap: 1rem;
	}

	.habari-home-apprendre__card {
		width: 100%;
		flex: 0 0 100%;
	}

	.habari-home-apprendre__title {
		font-size: 1.35rem;
	}

	.habari-home-apprendre__subtitle {
		font-size: 0.9rem;
	}

	.habari-home-apprendre__card-thumb {
		height: 200px;
	}

	.habari-home-apprendre__card-title {
		font-size: 1rem;
	}

	/* -- Auteur -- */
	.habari-author-name {
		font-size: 1.4rem;
	}

	.habari-author-avatar__img {
		width: 96px;
		height: 96px;
	}
}

/* =============================================
   MEDIUM - @m (640px à 960px)
   ============================================= */
@media screen and (min-width: 640px) and (max-width: 960px) {

	/* -- Communes -- */
	.commune-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Category Grid - Tablette: 2 colonnes */
	.habari-articles-grid {
		gap: 1.5rem;
	}

	.habari-article-card {
		flex: 1 1 calc(50% - 0.75rem);
	}

	/* -- Publicités -- */
	.habari-article-card--ad .habari-ad-zone {
		height: calc(374px + 1.5rem); /* hauteur totale + 1.5rem supplémentaire */
	}

	.habari-article-card--ad .habari-ad__img {
		height: 100%; /* l'image remplit toute la hauteur de la zone */
		object-fit: cover;
	}

	/* Controls - Tablette: horizontal layout */
	.habari-controls-wrapper {
		flex-direction: row;
		gap: 1rem;
		align-items: center;
	}

	.habari-search-container {
		flex: 1 1 auto;
		max-width: none;
	}

	footer {
		padding: 0 var(--habari-padding-m);
	}

	footer hr.once {
		width: 60%;
		margin: var(--habari-margin-m) auto;
	}

	footer hr.twice {
		width: 30%;
		margin: var(--habari-margin-m) auto;
	}

	.top__footer,
	.bottom__copyright {
		display: flex;
		justify-content: space-between;
		gap: 20px;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.follow__us {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.follow__us>.follow__website {
		order: -1;
	}

	.legal_doc {
		display: flex;
		flex-direction: row;
		gap: 20px;
		justify-content: center;
	}

	.site-footer>.top__footer>ul,
	.site-footer>.top__footer>div {
		flex: 1 0 270px;
	}

	.follow__website {
		margin: 0;
	}

	.bottom__copyright {
		padding-bottom: var(--habari-padding-m);
	}

	/* -- Communes -- */
	.commune-card:hover,
	.commune-card:focus-within {
		transform: translateY(-3px);
		box-shadow: 0 24px 48px rgba(13, 30, 64, 0.08);
	}

	.commune-single-title {
		font-size: 1.875rem;
	}

	.commune-hero {
		max-height: 280px;
	}

	.commune-hero img {
		height: 280px;
	}

	.commune-tabs-nav.uk-tab > li > a {
		font-size: 1.15rem;
	}

	.commune-related-title {
		font-size: 1.35rem;
	}

	.commune-related-card-img {
		height: 170px;
	}
}

/* =============================================
   DESKTOP - @desktop (960px et +)
   Navigation : afficher nav, masquer toggle
   ============================================= */
@media screen and (min-width: 960px) {
	.main-navigation {
		display: block;
	}

	.nav-mobile-toggle {
		display: none;
	}

	/* -- Layout desktop : logo centré, nav sous le logo, auth en absolute top-right -- */
	.site-header__inner {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"branding"
			"nav";
		align-items: center;
		padding: var(--habari-padding-s) var(--habari-padding-m);
	}

	.site-branding {
		grid-area: branding;
		flex: unset;
		text-align: center;
		margin-bottom: var(--habari-padding-m);
		position: static;
		transform: none;
	}

	.main-navigation {
		grid-area: nav;
	}

	.habari-user-menu {
		display: flex;
		position: absolute;
		top: 1rem;
		right: var(--habari-padding-m);
	}

	.habari-user-menu__label {
		display: inline;
	}

	/* Chevron onglets : visible uniquement sur mobile/tablette */
	.commune-tabs-chevron {
		display: none;
	}

	/* Single — colonne droite visible */
	.habari-single-right-col {
		display: block;
	}

	/* -- Communes -- */
	.commune-archive-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.commune-card:hover,
	.commune-card:focus-within {
		transform: translateY(-3px);
		box-shadow: 0 24px 48px rgba(13, 30, 64, 0.08);
	}

	/* -- Section Proverbes Home -- */
	.habari-proverbes-home__grid {
		grid-template-columns: repeat(3, 1fr);
	}

}

/* =============================================
   LARGE - @l (960px à 1200px)
   ============================================= */
@media screen and (min-width: 960px) and (max-width: 1200px) {

	/* Category Grid - Desktop: 2 colonnes */
	.habari-articles-grid {
		gap: 2rem;
	}

	.habari-article-card {
		flex: 0 0 calc(50% - 1rem);
	}

	/* -- Subscribe CTA : padding géré par uk-container sur l'inner -- */

	/* Controls - Desktop: horizontal layout */
	.habari-controls-wrapper {
		flex-direction: row;
		gap: 1.5rem;
		align-items: center;
	}

	.habari-search-container {
		flex: 0 0 50%;
		max-width: 50%;
	}

	footer {
		padding: 0 var(--habari-padding-m);
	}

	footer hr.once {
		width: 60%;
		margin: var(--habari-margin-m) auto;
	}

	footer hr.twice {
		width: 30%;
		margin: var(--habari-margin-m) auto;
	}

	.top__footer,
	.bottom__copyright {
		display: flex;
		justify-content: space-between;
		gap: 20px;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.follow__us {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.follow__us>.follow__website {
		order: -1;
	}

	.legal_doc {
		display: flex;
		flex-direction: row;
		gap: 20px;
		justify-content: center;
	}

	.site-footer>.top__footer>ul,
	.site-footer>.top__footer>div {
		flex: 1 0 270px;
	}

	.follow__website {
		margin: 0;
	}

	.bottom__copyright {
		padding-bottom: var(--habari-padding-m);
	}
}

/* =============================================
   PAGE CONTACT — Responsive
   ============================================= */

/* Mobile — max 640px */
@media screen and (max-width: 640px) {
    .contact-social-list {
        gap: 8px;
    }

    .habari-social-links {
        margin-top: 0.75rem;
    }

    .page-contact .uk-accordion-title {
        font-size: 0.95rem;
    }

    .habari-contact-lmplus-sep {
        display: none;
    }

    .habari-contact-social-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Tablette — 640px à 959px */
@media screen and (min-width: 640px) and (max-width: 959px) {
    .contact-social-list {
        gap: 10px;
    }
}

/* =============================================
   AUTH PAGES — Responsive
   Pages standalone : connexion, inscription, mot-de-passe-oublie
   ============================================= */

/* Mobile — max 480px : card full-width, padding réduit */
@media screen and (max-width: 480px) {

    .habari-auth-wrapper {
        padding: 1.25rem 0.75rem;
        gap: 1rem;
    }

    .habari-auth-card {
        padding: 1.5rem 1.25rem;
        border-radius: 0;
        box-shadow: none;
        border: 1px solid var(--habari-dark-off);
    }

    .habari-auth-title {
        font-size: 1.25rem;
    }

    .habari-auth-remember {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .habari-auth-legal {
        gap: 0.75rem;
    }
}

/* Tablet et + : card centrée avec ombre */
@media screen and (min-width: 481px) {

    .habari-auth-page {
        background-color: #f0f0f0;
    }

    .habari-auth-card {
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09);
    }
}

/* =============================================
   APPRENDRE — Responsive
   ============================================= */

/* Tablette & Mobile — max-width: 959px */
@media screen and (max-width: 959px) {

	/* ── Layout leçon : sidebar en haut ── */
	.habari-apprendre-lecon-wrap {
		grid-template-columns: 1fr;
	}

	.apprendre-sidebar {
		position: static;
		height: auto;
		border-right: none;
		border-bottom: 1px solid var(--habari-dark-200, #dee2e6);
	}

	.apprendre-sidebar-lessons {
		display: none;
	}

	.apprendre-sidebar-lessons.is-open {
		display: block;
	}

	.habari-apprendre-lecon {
		padding: 20px var(--habari-apprendre-gap);
	}

	/* ── Association : colonnes empilées ── */
	.apprendre-association-cols {
		flex-direction: column;
		gap: 16px;
	}

	/* ── Mots mêlés : taille calculée dynamiquement par JS via --cell-size ── */

	/* ── Filtres catalogue : empilés ── */
	.apprendre-filters-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.apprendre-filters select {
		width: 100%;
	}

	/* ── Exercices : padding réduit ── */
	.apprendre-exercice {
		padding: 16px;
	}

	/* ── Page cours/chapitre/leçon : padding réduit ── */
	.habari-apprendre-cours,
	.habari-apprendre-chapitre,
	.habari-apprendre-archive {
		padding: 24px var(--habari-apprendre-gap);
	}

	/* ── Argumentaire : padding réduit ── */
	.apprendre-argumentaire {
		padding: 28px var(--habari-apprendre-gap);
		margin-top: 40px;
	}

	/* ── Paywall : padding réduit ── */
	.apprendre-paywall {
		padding: 40px var(--habari-apprendre-gap);
	}

	/* ── Chapitre / leçon items : wrap si besoin ── */
	.apprendre-chapitre-header,
	.apprendre-lecon-item {
		gap: 8px;
	}

	/* ── Sidebar : padding-left réduit ── */
	.apprendre-sidebar-lesson {
		padding-left: 20px;
	}

	/* ── Sidebar cours/chapitre : padding réduit ── */
	.apprendre-sidebar-cours-link {
		padding: 0 16px 10px;
	}

	.apprendre-sidebar-chapter-toggle {
		padding: 10px 16px;
	}
}

/* Mobile — max-width: 640px */
@media screen and (max-width: 640px) {

	/* ── Catalogue : 1 colonne ── */
	.apprendre-catalogue {
		grid-template-columns: 1fr;
	}

	/* ── Carte cours : padding réduit ── */
	.apprendre-cours-card-body {
		padding: 16px;
	}

	/* ── Texte à trous : inputs plus petits ── */
	.apprendre-trou-input {
		width: min(90px, 30vw);
		max-width: 100%;
		box-sizing: border-box;
		font-size: 0.9375rem;
	}

	/* ── Puzzle : padding réduit ── */
	.apprendre-puzzle-pool,
	.apprendre-puzzle-zone {
		padding: 8px;
		min-height: 40px;
	}

	/* ── Actions leçon : boutons pleine largeur ── */
	.apprendre-lecon-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.apprendre-lecon-actions .uk-button {
		width: 100%;
		text-align: center;
	}

	/* ── Breadcrumb : plus petit ── */
	.apprendre-breadcrumb {
		font-size: 0.75rem;
	}

	/* ── Titres leçon/cours/chapitre réduits ── */
	.apprendre-lecon-title,
	.apprendre-cours-intro h1,
	.habari-apprendre-chapitre h1 {
		font-size: 1.35rem;
	}

	/* ── C2 : chapitre-header wrap ── */
	.apprendre-chapitre-header {
		flex-wrap: wrap;
	}

	/* ── C3 : lecon-item wrap ── */
	.apprendre-lecon-item {
		flex-wrap: wrap;
	}

	/* ── I2 : extrait cours — supprimer max-height + fade ── */
	.apprendre-cours-card-extrait {
		max-height: none;
	}

	.apprendre-extrait-fade {
		display: none;
	}

	/* ── I3 : archive header margin ── */
	.apprendre-archive-header {
		margin-bottom: 20px;
	}

	/* ── I4 : cours header margin ── */
	.apprendre-cours-header {
		margin-bottom: 24px;
	}

	/* ── S1/S2 : font-size cartes cours ── */
	.apprendre-cours-card-title {
		font-size: 1rem;
	}

	.apprendre-cours-description {
		font-size: 1rem;
	}

	/* ── S3 : contenu leçon margin ── */
	.apprendre-lecon-contenu {
		margin-bottom: 20px;
	}

	/* ── S4 : zone exercices ── */
	.apprendre-lecon-exercices {
		margin-top: 24px;
		padding-top: 20px;
	}

	/* ── S5 : tip block padding ── */
	.apprendre-tip {
		padding: 12px 16px;
	}

	/* ── S6 : tableau pédagogique ── */
	.apprendre-tableau th,
	.apprendre-tableau td {
		padding: 6px 8px;
		font-size: 0.8rem;
	}

	/* ── S7/S8/S9 : paywall ── */
	.apprendre-paywall-title {
		font-size: 1.25rem;
	}

	.apprendre-paywall-actions .uk-button {
		width: 100%;
	}

	.apprendre-paywall-text {
		margin-bottom: 20px;
	}

	/* ── S12 : exercice question margin ── */
	.apprendre-exercice-question {
		margin-bottom: 12px;
	}

	/* ── S13 : QCM options padding ── */
	.apprendre-qcm-options label {
		padding: 6px 10px;
	}

	/* ── S14 : association word-break ── */
	.apprendre-association-left li,
	.apprendre-association-right li {
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	.apprendre-association-left,
	.apprendre-association-right {
		max-width: 100%;
		min-width: 0;
	}

	/* ── S15 : puzzle mot ── */
	.apprendre-puzzle-mot {
		max-width: 100%;
		font-size: 0.875rem;
	}

	/* ── S17 : vignette cours aspect-ratio ── */
	.apprendre-cours-card-thumb img {
		aspect-ratio: auto;
	}

	/* ── Justification contenu éditorial mobile ── */
	.habari-page-content,
	.habari-single-body {
		text-align: justify;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		overflow-wrap: anywhere;
	}

	/* Exclusions pour blocs de code / pre / citations */
	.habari-page-content pre,
	.habari-page-content code,
	.habari-single-body pre,
	.habari-single-body code,
	blockquote {
		text-align: left;
		hyphens: none;
		white-space: pre-wrap;
		overflow-x: auto;
	}

	/* Inline code (hors pre) */
	.habari-page-content :not(pre) > code,
	.habari-single-body :not(pre) > code {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* ── Mes cours : stats 2 colonnes sur mobile ── */
	.apprendre-mescours-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	/* ── Mes cours : padding réduit ── */
	.apprendre-mescours-item {
		padding: 14px;
	}

	/* ── Mes cours : actions boutons pleine largeur ── */
	.apprendre-mescours-item-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.apprendre-mescours-item-actions .uk-button {
		width: 100%;
		text-align: center;
	}

	/* ── Mes cours : grille découverte 1 colonne ── */
	.apprendre-mescours-discover-grid {
		grid-template-columns: 1fr;
	}

	/* ── Mes cours : streak block wrap ── */
	.apprendre-streak-block {
		flex-wrap: wrap;
		gap: 8px;
	}

	/* ── Mes cours : filtres empilés ── */
	.apprendre-mescours-filters {
		flex-direction: column;
		align-items: stretch;
	}

	.apprendre-mescours-filters select {
		width: 100%;
	}
}

/* ── Très petits écrans : mots mêlés — taille calculée dynamiquement par JS ── */

/* =============================================
   XLARGE - @xl (1200px et +)
   ============================================= */
@media screen and (min-width: 1200px) {

	/* -- Communes -- */
	.commune-archive-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Category Grid - XL Desktop: 3 colonnes */
	.habari-articles-grid {
		gap: 2.5rem;
	}

	.habari-article-card {
		flex: 0 0 calc(33.333% - 1.67rem);
	}

	/* Controls - XL Desktop: horizontal layout */
	.habari-controls-wrapper {
		flex-direction: row;
		gap: 2rem;
		align-items: center;
	}

	.habari-search-container {
		flex: 0 0 50%;
		max-width: 50%;
	}

	footer {
		padding: 0 var(--habari-padding-m);
	}

	footer hr.once {
		width: 60%;
		margin: var(--habari-margin-m) auto;
	}

	footer hr.twice {
		width: 30%;
		margin: var(--habari-margin-m) auto;
	}

	.top__footer,
	.bottom__copyright {
		display: flex;
		justify-content: space-between;
		gap: 20px;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.follow__us {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.follow__us>.follow__website {
		order: -1;
	}

	.legal_doc {
		display: flex;
		flex-direction: row;
		gap: 20px;
		justify-content: center;
	}

	.site-footer>.top__footer>ul,
	.site-footer>.top__footer>div {
		flex: 1 0 270px;
	}

	.follow__website {
		margin: 0;
	}

	.bottom__copyright {
		padding-bottom: var(--habari-padding-m);
	}
}

/* =============================================
   VISITE GUIDÉE — Responsive
   ============================================= */

/* Mobile — max-width: 640px */
@media screen and (max-width: 640px) {

	/* ── Tooltip : bottom sheet pleine largeur ── */
	.habari-tour-tooltip {
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		width: auto !important;
		max-width: none !important;
		box-sizing: border-box;
		padding: 1.1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.14);
		border-top: 3px solid var(--habari-primary-brand);
	}

	/* ── Actions : hiérarchie visuelle claire ──
	   Ordre : [Suivant pleine largeur]
	           [← Retour]   [Passer →]
	           [        Quitter        ] séparé */
	.habari-tour-tooltip__actions {
		flex-wrap: wrap;
		gap: 0;
		align-items: center;
	}

	/* Suivant : 1re ligne, pleine largeur, proéminent */
	.habari-tour-tooltip__actions .habari-tour-btn--primary {
		order: 1;
		width: 100%;
		padding: 0.65rem 1rem;
		font-size: 0.82rem;
		text-align: center;
		margin-bottom: 0.65rem;
	}

	/* Retour : 2e ligne, gauche — zone de tap agrandie */
	.habari-tour-tooltip__actions .habari-tour-btn--back {
		order: 2;
		padding: 0.65rem 1rem 0.65rem 0;
		font-size: 0.8rem;
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* Passer : 2e ligne, droite — zone de tap agrandie */
	.habari-tour-tooltip__actions .habari-tour-btn--skip {
		order: 3;
		margin-left: auto;
		padding: 0.65rem 0 0.65rem 1rem;
		font-size: 0.8rem;
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* Quitter la visite : 3e ligne, séparée, très discret */
	.habari-tour-tooltip__actions .habari-tour-btn--secondary {
		order: 10;
		width: 100%;
		text-align: right;
		margin-left: 0 !important;
		padding: 0.5rem 0 0;
		margin-top: 0.4rem;
		font-size: 0.68rem;
		color: var(--habari-dark-pale);
		border-top: 1px solid var(--habari-dark-off);
	}

	/* ── Modales : centrées avec marges ── */
	.habari-tour-modal {
		margin: 1.25rem;
		padding: 1.5rem 1.25rem;
	}

	.habari-tour-quit-modal__card {
		margin: 1.25rem;
		padding: 1.25rem 1rem;
	}

	/* ── Barre de sortie (page fonctionnalités) ── */
	.habari-tour-exit-bar {
		bottom: 0;
		right: 0;
		left: 0;
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--habari-dark-off);
		justify-content: center;
	}
}

/* =============================================
   MON COMPTE — Responsive
   ============================================= */

@media screen and (max-width: 640px) {

	/* ── Tableau compte : layout vertical en édition inline ── */
	.habari-account-table,
	.habari-account-table tbody,
	.habari-account-table tr,
	.habari-account-table th,
	.habari-account-table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.habari-account-table tr {
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--habari-dark-off);
	}

	.habari-account-table tr:last-child {
		border-bottom: none;
	}

	.habari-account-table th {
		padding: 0 0 0.25rem 0;
	}

	.habari-account-table td {
		padding: 0;
	}

	/* Action td : flex row pour Enregistrer / Annuler */
	.habari-account-table td.habari-account-field-action {
		display: flex;
		flex-direction: row;
		gap: 0.5rem;
		padding-top: 0.6rem;
		white-space: normal;
	}

	.habari-account-table td.habari-account-field-action .habari-account-save-btn,
	.habari-account-table td.habari-account-field-action .habari-account-cancel-btn {
		flex: 1;
		margin-left: 0;
		text-align: center;
		padding: 0.55rem 0.5rem;
	}

	.habari-account-table .habari-account-input {
		width: 100%;
		box-sizing: border-box;
	}

	/* ── Avatar : centré ── */
	.habari-account-profile {
		align-items: center;
		text-align: center;
	}

	.habari-account-profile__avatar-block {
		align-items: center;
	}

	/* ── Onglets compte : s'assurer que le track scroll correctement ── */
	.habari-account-tabs-wrapper .habari-cat-tabs-track {
		-webkit-overflow-scrolling: touch;
	}

	.habari-account-tabs-wrapper .habari-account-tabs.uk-tab > li {
		flex-shrink: 0;
	}

	/* ── Apprendre : catalogue 1 colonne sur mobile (cohérent avec archive) ── */
	.apprendre-catalogue {
		grid-template-columns: 1fr;
	}

	/* ── Bannière visite guidée : boutons pleine largeur ── */
	.habari-tour-resume-banner {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.habari-tour-resume-banner__actions {
		margin-left: 0;
		width: 100%;
		flex-direction: column;
	}

	.habari-tour-resume-banner__actions .habari-tour-btn {
		width: 100%;
		text-align: center;
	}

}

/* =============================================
   MON COMPTE — Tablette (641px–959px)
   ============================================= */

@media screen and (min-width: 641px) and (max-width: 959px) {

	/* ── Apprendre : catalogue 2 colonnes sur tablette ── */
	.apprendre-catalogue {
		grid-template-columns: repeat(2, 1fr);
	}

	/* ── Mes cours : stats 2 colonnes sur tablette ── */
	.apprendre-mescours-stats {
		grid-template-columns: repeat(2, 1fr);
	}

}