/* ==========================================================================
   Tout le site : sur tablette et téléphone, on garde la disposition de
   l'ordinateur (mêmes colonnes, même ordre), en plus petit. Sur téléphone,
   les textes secondaires sont raccourcis ou masqués.
   Chargé en dernier. La section Accueil (héros de la page d'accueil) n'est
   pas concernée, ni les réglages propres à l'accueil (.x-hs), plus précis.
   ========================================================================== */

/* ---------------- Tablette (jusqu'à 980 px) ---------------- */
@media (max-width: 980px) {
	.x-section { padding: 64px 0; }

	/* En-tête de page : texte et photo côte à côte */
	.x-pagehero .x-wrap { grid-template-columns: 1.15fr .85fr; gap: 26px; padding-top: 40px; padding-bottom: 40px; }
	.x-pagehero h1 { font-size: clamp(26px, 4.2vw, 40px); }
	.x-pagehero p { font-size: 15.5px; line-height: 25px; }

	/* Blocs texte + image */
	.x-split { grid-template-columns: 1fr 1fr; gap: 28px; }
	.x-split.is-reverse .x-split-media { order: 2; }

	/* Grilles de cartes */
	.x-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	.x-cards.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.x-card { padding: 18px 16px; border-radius: 16px; }
	.x-card h3 { font-size: 16px; line-height: 22px; }
	.x-card p { font-size: 13.5px; line-height: 21px; }
	.x-formats:not(.is-wide) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.x-formats:not(.is-wide) .x-format { padding: 18px 14px; }
	.x-formats:not(.is-wide) .x-format h3 { font-size: 16px; line-height: 21px; }
	.x-formats:not(.is-wide) .x-format p { font-size: 13px; line-height: 20px; }

	/* Bandeau d'appel : texte à gauche, photo à droite */
	.x-cta { grid-template-columns: 1.25fr .75fr; }
	.x-cta-text { padding: 32px 28px; }
	.x-cta h2 { font-size: 26px; }
	.x-cta p { font-size: 15px; line-height: 24px; }
	.x-cta-img { min-height: 0; }
	.x-cta-img::before { background: linear-gradient(90deg, #174B8E 0%, rgba(23, 75, 142, 0) 45%); }

	/* Parcours d'accompagnement (Entreprises et ONG) : 4 étapes sur une ligne */
	.x-ent-parcours .x-journey-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: none; }
	.x-ent-parcours .x-jstep { display: block; padding: 16px 12px 18px; }
	.x-ent-parcours .x-jstep-ico { width: 42px; height: 42px; border-radius: 12px; margin: 0 0 10px; }
	.x-ent-parcours .x-jstep-ico svg { width: 21px; height: 21px; }
	.x-ent-parcours .x-jstep-num { top: 14px; right: 12px; font-size: 11px; }
	.x-ent-parcours .x-jstep h4 { font-size: 13.5px; line-height: 18px; padding-right: 0; }
	.x-ent-parcours .x-jstep p { font-size: 12px; line-height: 18px; }
	.x-ent-parcours .x-jstep:not(:last-child)::after { top: 34px; right: -13px; bottom: auto; left: auto; width: 9px; height: 9px; transform: rotate(45deg); }
	.x-ent-parcours .x-jstep:not(:last-child)::before { top: 38px; right: -16px; bottom: auto; left: auto; width: 12px; height: 2px; background: linear-gradient(90deg, rgba(244, 166, 42, .2), var(--sun)); }

	/* Catalogue des formations : filtres à gauche, résultats à droite */
	.x-cat-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; }
	.x-cat-side { position: sticky; top: 90px; }
	.x-cat-toggle { display: none; }
	.x-cat-filters { display: block; margin: 0; padding: 0; border: 0; background: none; }
	.x-cat-dom, .x-cat-check { font-size: 13.5px; }
	.x-course { grid-template-columns: minmax(0, 1fr) 160px; gap: 16px; padding: 18px; }
	.x-course-title { font-size: 17px; }
	.x-course-desc { font-size: 13.5px; }

	/* Boutique : 3 colonnes comme sur ordinateur */
	.x-shop ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

	/* Colonnes des pages du thème (outils, tarifs, ressources) */
	.wp-block-columns { flex-wrap: nowrap !important; gap: 18px; }
	.wp-block-columns > .wp-block-column { flex-basis: 0 !important; flex-grow: 1; min-width: 0; }

	/* Pied de page : 4 colonnes */
	.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 22px; }
}

/* ---------------- Téléphone (jusqu'à 600 px) ---------------- */
@media (max-width: 600px) {
	.x-section { padding: 44px 0; }
	.x-over { font-size: 9.5px; line-height: 13px; letter-spacing: .12em; margin-bottom: 6px; }
	.x-h2 { font-size: 19px; line-height: 1.2; margin-bottom: 8px; }
	.x-lead { font-size: 12.5px; line-height: 19px; }
	.x-head { margin-bottom: 18px; }
	.x-section .btn, .x-pagehero .btn, .x-cta .btn, .x-hero-ong .btn { min-height: 32px; padding: 7px 10px; font-size: 11px; line-height: 14px; border-radius: 10px; }
	.x-section .btn-row, .x-pagehero .btn-row, .x-cta .btn-row { gap: 6px; }

	.x-pagehero .x-wrap { gap: 12px; padding-top: 26px; padding-bottom: 26px; }
	.x-pagehero h1 { font-size: 20px; line-height: 1.15; margin: 6px 0 8px; }
	.x-pagehero p { font-size: 12px; line-height: 18px; }
	.x-pagehero .x-crumbs { font-size: 10px; }
	.x-pagehero .x-photo { border-radius: 14px; }

	.x-split { gap: 14px; }
	.x-split-media .x-chip { display: none; }
	.x-checks li { font-size: 12px; line-height: 18px; padding-left: 24px; }
	.x-checks li::before { width: 16px; height: 16px; }

	.x-cards, .x-formats:not(.is-wide) { gap: 6px; }
	.x-card { padding: 10px 8px; border-radius: 12px; }
	.x-card h3 { font-size: 11.5px; line-height: 15px; margin-bottom: 4px; }
	.x-card p { font-size: 10.5px; line-height: 15px; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
	.x-card .x-more { font-size: 10.5px; }
	.x-svc-ico { width: 32px; height: 32px; border-radius: 10px; margin-bottom: 8px; }
	.x-svc-ico svg { width: 17px; height: 17px; }
	.x-formats:not(.is-wide) .x-format { padding: 10px 8px; text-align: center; }
	.x-formats:not(.is-wide) .x-format .x-ico { width: 30px; height: 30px; margin: 0 auto 6px; }
	.x-formats:not(.is-wide) .x-format h3 { font-size: 11px; line-height: 14px; margin: 0; }
	.x-formats:not(.is-wide) .x-format p, .x-formats:not(.is-wide) .x-format::before { display: none; }
	.x-callout { padding: 14px; }
	.x-callout h3, .x-callout b { font-size: 13px; }
	.x-callout p { font-size: 11.5px; line-height: 17px; }

	.x-cta { grid-template-columns: 1.55fr .45fr; border-radius: 18px; }
	.x-cta-text { padding: 18px 14px; }
	.x-cta h2 { font-size: 17px; line-height: 1.2; margin-bottom: 6px; }
	.x-cta p { font-size: 11.5px; line-height: 17px; }

	.x-ent-parcours .x-journey-steps { gap: 10px; }
	.x-ent-parcours .x-jstep { padding: 10px 6px 12px; border-radius: 12px; text-align: center; }
	.x-ent-parcours .x-jstep-ico { width: 30px; height: 30px; border-radius: 9px; margin: 0 auto 6px; }
	.x-ent-parcours .x-jstep-ico svg { width: 16px; height: 16px; }
	.x-ent-parcours .x-jstep-num, .x-ent-parcours .x-jstep p { display: none; }
	.x-ent-parcours .x-jstep h4 { font-size: 10px; line-height: 13px; margin: 0; }
	.x-ent-parcours .x-jstep:not(:last-child)::after { top: 22px; right: -8px; width: 6px; height: 6px; border-width: 2px; }
	.x-ent-parcours .x-jstep:not(:last-child)::before { top: 25px; right: -10px; width: 8px; }

	/* Catalogue : les filtres restent derrière le bouton « Filtres » (trop étroit pour deux colonnes) */
	.x-cat-grid { grid-template-columns: 1fr; gap: 14px; }
	.x-cat-side { position: static; }
	.x-cat-toggle { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/20px var(--font); color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; cursor: pointer; }
	.x-cat-filters { display: none; margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
	.filters-open .x-cat-filters { display: block; }
	.x-course { grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; padding: 12px; }
	.x-course-side { flex-direction: column; align-items: flex-end; text-align: right; }
	.x-course-title { font-size: 13.5px; line-height: 18px; }
	.x-course-desc { font-size: 11.5px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.x-course-meta { display: none; }
	.x-course .x-badge { font-size: 9px; padding: 3px 6px; }
	.x-course-price b { font-size: 13px; line-height: 17px; }
	.x-course-price span { font-size: 9.5px; }
	.x-course-go { font-size: 10.5px; }

	.x-shop ul.products { gap: 8px; }
	.x-shop ul.products li.product .woocommerce-loop-product__title { font-size: 11.5px !important; line-height: 15px !important; }
	.x-shop ul.products li.product .price { font-size: 11px !important; }
	.x-shop ul.products li.product .button { font-size: 10px !important; padding: 6px 6px !important; }

	.wp-block-columns { gap: 8px; }
	.wp-block-column { font-size: 12px; }

	/* Pied de page : 2 × 2 */
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
}

/* ---------------- Retouches après contrôle des pages ---------------- */
@media (max-width: 980px) {
	.x-card .x-meta { font-size: 12px; }
	.x-ent-services .x-card { padding: 18px 16px; }
	.tc-formules { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px; }
	.tc-card { padding: 18px 14px; }
}
@media (max-width: 600px) {
	.x-card .x-meta { display: none; }
	.x-ent-services .x-card { padding: 12px 8px; border-radius: 14px; }
	.x-ent-services .x-card::after { width: 70px; height: 70px; right: -26px; top: -26px; }
	/* Templates : recherche et budget sur une ligne, filtres en pastilles */
	.x-tplbar-top { flex-wrap: nowrap; gap: 6px; }
	.x-tpl-search { flex: 1; min-width: 0; }
	.x-tpl-search input { font-size: 13px; padding-top: 9px; padding-bottom: 9px; }
	.x-tpl-select { width: auto; }
	.x-tpl-select > span { display: none; }
	.x-tpl-select select { font-size: 12px; padding: 8px 6px; }
	.x-tpl-chips { gap: 5px; }
	.x-tpl-chips .x-catchip { flex: 0 0 auto; font-size: 11px; line-height: 15px; padding: 5px 9px; }
	/* Pages du thème (tarifs, ressources, outils) : mêmes colonnes, plus petites */
	.tc-formules { gap: 6px; }
	.tc-card { padding: 10px 8px !important; border-radius: 12px; overflow-wrap: normal; word-break: normal; hyphens: manual; }
	.tc-card h2, .tc-card h3 { font-size: 12px !important; line-height: 16px !important; }
	.tc-card p, .tc-card li, .tc-card .tc-small { font-size: 10.5px !important; line-height: 15px !important; }
	.tc-card .tc-price { font-size: 15px !important; line-height: 20px !important; }
	.tc-card .tc-btn, .tc-card .btn { font-size: 10px !important; padding: 6px 6px !important; min-height: 0; }
	.wp-block-column .tc-card, .wp-block-column > * { overflow-wrap: normal; word-break: normal; }
}