/**
 * ENA Rabat - Couche responsive des pages internes (hors page d'accueil)
 * -----------------------------------------------------------------------
 * Fichier chargé UNIQUEMENT lorsque la page d'accueil n'est pas affichée
 * (voir functions.php : is_front_page()). La page d'accueil n'est donc
 * jamais affectée par ces règles.
 *
 * Principes :
 *  - Additif et progressif : on ne remplace aucun composant existant.
 *  - Réutilise les classes du thème Soledad (.container, .post-entry,
 *    .entry-content, .penci-single-block, .penci-container, ...).
 *  - Corrige les débordements, adapte médias, tableaux, formulaires,
 *    grilles, colonnes, typographie et espacements.
 *
 * Breakpoints (conformes au cahier des charges) :
 *  - Smartphones : 320px -> 767px
 *  - Tablettes   : 768px -> 1023px
 *  - Desktops    : 1024px et +
 */

/* =====================================================================
   1) SÉCURITÉ ANTI-DÉBORDEMENT (texte long, URLs, mots insécables)
   ===================================================================== */
.entry-content,
.inner-post-entry,
.post-entry,
.penci-single-block,
.penci-archive-posts,
.penci-container,
.penci-single-content,
.wp-block-post-content,
article,
.content-fullwidth {
	overflow-wrap: break-word;
	word-wrap: break-word;
	min-width: 0;
}

.entry-content a,
.post-entry a,
.penci-single-block a,
.penci-archive-posts a,
.entry-content p,
.post-entry p,
.penci-single-block p,
.entry-content li,
.post-entry li,
.entry-content td,
.post-entry td {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* =====================================================================
   2) MÉDIAS FLUIDES (images, iframes, vidéos, embeds, SVG)
   ===================================================================== */
.entry-content img,
.inner-post-entry img,
.post-entry img,
.penci-single-block img,
.penci-archive-posts img,
.penci-single-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object,
.post-entry video,
.post-entry iframe,
.post-entry embed,
.post-entry object,
.penci-single-block iframe,
.penci-single-block video,
.wp-block-embed,
.wp-block-embed__wrapper,
.wp-block-embed__wrapper iframe,
.wp-block-video video,
.wp-block-audio audio,
.wp-caption,
.wp-caption img {
	max-width: 100%;
}

.entry-content img,
.post-entry img,
.penci-single-block img,
.penci-archive-posts img {
	height: auto;
}

.wp-block-embed__wrapper {
	width: 100%;
}

/* =====================================================================
   3) TABLEAUX RESPONSIVES
   (un conteneur .ena-table-scroll est ajouté par le JS si nécessaire ;
    il permet le défilement horizontal au lieu d'un débordement)
   ===================================================================== */
.ena-table-scroll {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.ena-table-scroll table {
	margin: 0;
}

.entry-content table,
.post-entry table,
.penci-single-block table {
	max-width: 100%;
}

/* =====================================================================
   4) FORMULAIRES TACTILES ET ADAPTATIFS
   ===================================================================== */
.entry-content input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.entry-content textarea,
.entry-content select,
.post-entry input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.post-entry textarea,
.post-entry select,
.wpcf7 input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wpcf7 textarea,
.wpcf7 select {
	max-width: 100%;
	width: 100%;
}

.entry-content input,
.entry-content textarea,
.entry-content select,
.post-entry input,
.post-entry textarea,
.post-entry select,
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
	box-sizing: border-box;
}

/* =====================================================================
   5) TABLETTES : 768px -> 1023px
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
	.entry-content,
	.post-entry,
	.penci-single-block {
		font-size: 16px;
		line-height: 1.75;
	}

	.entry-content h1,
	.post-entry h1,
	.penci-single-block h1 { font-size: 1.9em; line-height: 1.3; }

	.entry-content h2,
	.post-entry h2,
	.penci-single-block h2 { font-size: 1.6em; line-height: 1.3; }

	.entry-content h3,
	.post-entry h3,
	.penci-single-block h3 { font-size: 1.35em; line-height: 1.35; }
}

/* =====================================================================
   6) SMARTPHONES : 320px -> 767px
   ===================================================================== */
@media (max-width: 767px) {

	/* --- Typographie adaptative dans le contenu --- */
	.entry-content,
	.inner-post-entry,
	.post-entry,
	.penci-single-block,
	.penci-archive-posts {
		font-size: 16px;
		line-height: 1.7;
	}

	.entry-content h1,
	.post-entry h1,
	.penci-single-block h1 { font-size: 1.7em; line-height: 1.3; }

	.entry-content h2,
	.post-entry h2,
	.penci-single-block h2 { font-size: 1.45em; line-height: 1.3; }

	.entry-content h3,
	.post-entry h3,
	.penci-single-block h3 { font-size: 1.25em; line-height: 1.35; }

	.entry-content h4,
	.post-entry h4,
	.penci-single-block h4 { font-size: 1.1em; }

	/* --- Espacements verticaux --- */
	.entry-content p,
	.post-entry p,
	.penci-single-block p { margin-bottom: 1em; }

	.entry-content blockquote,
	.post-entry blockquote,
	.penci-single-block blockquote {
		padding: 12px 15px;
		margin: 15px 0;
	}

	.entry-content ul,
	.entry-content ol,
	.post-entry ul,
	.post-entry ol {
		padding-left: 1.2em;
	}

	/* --- Alignements flottants -> pleine largeur centrée --- */
	.entry-content .alignleft,
	.entry-content .alignright,
	.entry-content .aligncenter,
	.post-entry .alignleft,
	.post-entry .alignright,
	.post-entry .aligncenter {
		float: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
	}

	/* --- Colonnes WordPress (bloc) -> empilées --- */
	.wp-block-columns { flex-wrap: wrap; }

	.wp-block-column {
		flex-basis: 100% !important;
		min-width: 0;
	}

	/* --- Barres latérales -> pleine largeur sous le contenu --- */
	.penci-single-block,
	.penci-single-wrapper .content {
		display: block;
	}

	.penci-sidebar-content,
	.penci-sidebar-left,
	.penci-sidebar-right,
	#penci-sidebar,
	.widget-area {
		width: 100% !important;
		max-width: 100%;
		float: none;
		clear: both;
		margin-top: 25px;
	}

	/* --- Grilles génériques -> 1 colonne --- */
	.entry-content .wp-block-gallery,
	.post-entry .wp-block-gallery {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* --- Éléments interactifs / formulaires tactiles --- */
	.entry-content button,
	.post-entry button,
	.entry-content input[type="submit"],
	.post-entry input[type="submit"],
	.wpcf7 button,
	.wpcf7 input[type="submit"],
	.wpcf7 input[type="button"] {
		min-height: 44px;
	}

	/* --- Pagination --- */
	.penci-pagination,
	.penci-pagenavi,
	.nav-links,
	.page-numbers,
	.wp-pagenavi {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
	}

	/* --- Slider dynamique ENA --- */
	.ena-dynamic-slider .penci-ctslide-wrap {
		height: auto !important;
		min-height: 320px;
	}
}

/* =====================================================================
   7) TRÈS PETITS ÉCRANS : <= 480px
   ===================================================================== */
@media (max-width: 480px) {
	.entry-content h1,
	.post-entry h1,
	.penci-single-block h1 { font-size: 1.55em; }

	.entry-content h2,
	.post-entry h2,
	.penci-single-block h2 { font-size: 1.35em; }

	.entry-content table,
	.post-entry table {
		font-size: 14px;
	}

	/* Galerie -> 2 colonnes minimum */
	.entry-content .wp-block-gallery,
	.post-entry .wp-block-gallery {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}