/*
Theme Name: MATTMultiTech
Theme URI: https://mattmultitech.fr/
Description: Thème enfant Blocksy pour la préproduction MATTMultiTech 2026.
Author: MATTMultiTech
Template: blocksy
Version: 0.1.0
Text Domain: mattmultitech
*/

:root {
	--matt-blue: #002d62;
	--matt-orange: #e34f1e;
	--matt-cta: #c0391a;
	--matt-cta-hover: #a93217;
	--matt-charcoal: #2d2d2d;
	--matt-light: #f5f5f5;
	--matt-white: #ffffff;
	--matt-section-space: clamp(3rem, 7vw, 5rem);
	--matt-content-width: 1200px;
	--matt-radius: 0.35rem;
	--matt-shadow: 0 0.4rem 1.5rem rgb(0 45 98 / 8%);
	--matt-font-heading: Montserrat, "Helvetica Neue", Arial, sans-serif;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.001ms !important;
	}

	.matt-card:hover,
	.matt-price:hover,
	.matt-service-list li:hover,
	.matt-buttons .wp-block-button__link:hover {
		transform: none;
	}
}

body {
	color: var(--matt-charcoal);
	font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
}

#header [data-row="middle"] {
	background: var(--matt-blue);
}

#header [data-row="middle"] a,
#header [data-row="middle"] button,
#header [data-row="middle"] .ct-label {
	color: var(--matt-white);
}

#header [data-row="middle"] a:hover {
	color: var(--matt-white);
	text-decoration-color: var(--matt-orange);
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
}

.site-logo-container img {
	max-height: 56px;
	width: auto;
}

/*
 * Pied de page.
 * La charte (05 Design/charte-graphique-numerique.md, §4) prévoit un fond
 * anthracite et des liens en orange vif. L'orange #e34f1e sur #2d2d2d ne donne
 * qu'un contraste de 3,5:1, en dessous du seuil AA de 4,5:1 retenu par DEC-039.
 * Les liens sont donc en blanc, l'orange servant d'accent au survol — même
 * traitement que les liens de l'en-tête et des sections sombres.
 */
#footer [data-row="bottom"] {
	background: var(--matt-charcoal);
	color: var(--matt-white);
	padding-block: 1.75rem;
}

#footer [data-row="bottom"] .ct-container {
	max-width: var(--matt-content-width);
}

#footer [data-row="bottom"] [data-column] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

#footer .footer-menu-inline .menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer .footer-menu-inline a {
	color: var(--matt-white);
	font-size: 0.9375rem;
	text-decoration: none;
}

#footer .footer-menu-inline a:hover,
#footer .footer-menu-inline a:focus-visible {
	color: var(--matt-white);
	text-decoration-color: var(--matt-orange);
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

#footer .ct-footer-copyright {
	color: rgb(255 255 255 / 72%);
	font-size: 0.875rem;
}

#footer .ct-footer-copyright a {
	color: rgb(255 255 255 / 72%);
	text-decoration-line: underline;
	text-underline-offset: 0.25em;
}

#footer .ct-footer-copyright a:hover,
#footer .ct-footer-copyright a:focus-visible {
	color: var(--matt-white);
	text-decoration-color: var(--matt-orange);
	text-decoration-thickness: 2px;
}

/* Ces deux règles ne servent pour l'instant à rien : la ligne de copyright ne
 * contient plus de lien. Elles sont conservées pour qu'un lien qui y serait
 * réintroduit soit traité comme les autres liens du pied de page. */

.site-branding[data-logo="top"] {
	flex-direction: row;
	align-items: center;
}

.site-branding[data-logo="top"] .site-title-container {
	margin-inline-start: 0.75em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--matt-blue);
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	line-height: 1.2;
}

a {
	text-underline-offset: 0.18em;
}

a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--matt-white);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--matt-orange);
}

.matt-section {
	padding: var(--matt-section-space) max(1rem, calc((100% - var(--matt-content-width)) / 2));
}

.entry-content > .matt-home {
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
}

.matt-section > * {
	max-width: var(--matt-content-width);
	margin-right: auto;
	margin-left: auto;
}

/*
 * Les contenus sont composés en blocs Gutenberg natifs. WordPress applique
 * alors `:root :where(.is-layout-flow) > * { margin-block-start: 1.5em }`,
 * qui écrase les marges propres aux titres, paragraphes et listes et allonge
 * les sections. Ces règles, de spécificité supérieure, rétablissent le rythme
 * vertical des maquettes validées (`DEC-039`).
 */
.matt-section.is-layout-flow > * {
	margin-block-start: 1em;
}

.matt-section.is-layout-flow > :first-child {
	margin-block-start: 0;
}

.matt-card.is-layout-flow > * {
	margin-block-start: 0.75em;
}

.matt-card.is-layout-flow > :first-child {
	margin-block-start: 0;
}

/*
 * Même cause : dès qu'une page est composée en blocs, les styles globaux de
 * WordPress s'appliquent et suppriment le soulignement des liens de contenu.
 * Il est rétabli ici, les boutons restant exclus.
 */
.matt-section a:not(.wp-element-button) {
	text-decoration-line: underline;
}

.matt-hero {
	display: grid;
	min-height: min(80vh, 760px);
	align-content: center;
	background: var(--matt-blue);
	color: var(--matt-white);
}

.matt-hero h1,
.matt-hero h2,
.matt-section--dark h2,
.matt-cta h2 {
	color: var(--matt-white);
}

body.page #main > .ct-container-full {
	padding-top: 0;
	padding-bottom: 0;
}

.matt-hero h1 {
	max-width: 900px;
	font-size: clamp(2rem, 5vw, 3.25rem);
}

.matt-hero .matt-lead {
	max-width: 800px;
	font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.matt-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

.matt-buttons .wp-block-button__link,
.matt-form .wpcf7-submit {
	min-height: 44px;
	padding: 0.75rem 1.25rem;
	border: 2px solid var(--matt-cta);
	border-radius: 0.35rem;
	background: var(--matt-cta);
	color: var(--matt-white);
	font-weight: 700;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/*
 * Formulaire Contact Form 7. Le bouton d'envoi est un `input[type=submit]` et
 * ne porte pas les classes de bloc : il est rattaché ici au style des boutons
 * de la charte. Les messages de retour reprennent les codes de l'encadré légal.
 */
.matt-form .wpcf7-submit {
	font-family: var(--matt-font-heading);
	cursor: pointer;
}

/*
 * Contact Form 7 désactive le bouton tant que le consentement n'est pas coché.
 * L'état est rendu explicitement en gris plutôt qu'en orange délavé, qui se
 * lisait comme un défaut d'affichage. Contraste blanc sur #6b6b6b : 5,3:1.
 */
.matt-form .wpcf7-submit:disabled {
	border-color: #6b6b6b;
	background: #6b6b6b;
	cursor: not-allowed;
	opacity: 1;
}

.matt-form .wpcf7-submit:disabled:hover {
	border-color: #6b6b6b;
	background: #6b6b6b;
	transform: none;
	box-shadow: none;
}

.matt-form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
	border: 2px solid var(--matt-blue);
	border-radius: var(--matt-radius);
	background: var(--matt-white);
}

.matt-form .wpcf7-not-valid-tip {
	color: var(--matt-cta);
	font-size: 0.875rem;
}

.matt-form .wpcf7-not-valid {
	border-color: var(--matt-cta);
}

/*
 * Champ piège anti-spam. Retiré du flux et de l'affichage sans `display: none`,
 * que certains robots détectent, et hors du parcours clavier grâce à
 * `tabindex="-1"` posé sur le champ lui-même.
 */
.matt-form .matt-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.matt-buttons .is-style-outline .wp-block-button__link {
	border-color: var(--matt-white);
	background: transparent;
	color: var(--matt-white) !important;
}

.matt-buttons .wp-block-button__link:hover,
.matt-form .wpcf7-submit:hover {
	border-color: var(--matt-cta-hover);
	background: var(--matt-cta-hover);
	transform: translateY(-2px);
	box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 18%);
}

.matt-buttons .is-style-outline .wp-block-button__link:hover {
	border-color: var(--matt-white);
	background: var(--matt-white);
	color: var(--matt-blue);
	transform: translateY(-2px);
	box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 18%);
}

.matt-section--light {
	background: var(--matt-light);
}

.matt-section--dark {
	background: var(--matt-blue);
	color: var(--matt-white);
}

.matt-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.matt-card {
	height: 100%;
	padding: 1.5rem;
	border-top: 4px solid var(--matt-orange);
	border-radius: 0.35rem;
	background: var(--matt-white);
	box-shadow: 0 0.4rem 1.5rem rgb(0 45 98 / 8%);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.matt-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 0.75rem 2rem rgb(0 45 98 / 14%);
}

.matt-card h3 {
	margin-top: 0.5rem;
}

.matt-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0;
	border-radius: 0.5rem;
	background: rgb(227 79 30 / 10%);
	color: var(--matt-orange);
}

.matt-card__icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.matt-card a {
	color: var(--matt-blue);
	font-weight: 700;
	text-underline-offset: 0.18em;
	transition: color 0.15s ease;
}

.matt-card a:hover {
	color: var(--matt-orange);
}

.matt-pricing {
	background: var(--matt-light);
}

.matt-pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}

.matt-price {
	padding: 1.5rem;
	border: 1px solid rgb(0 45 98 / 14%);
	border-radius: 0.35rem;
	background: var(--matt-white);
	box-shadow: 0 0.4rem 1.5rem rgb(0 45 98 / 8%);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.matt-price:hover {
	transform: translateY(-3px);
	box-shadow: 0 0.65rem 1.75rem rgb(0 45 98 / 13%);
}

.matt-price h3 {
	margin-bottom: 0.5rem;
	font-size: 1.1rem;
}

.matt-price__amount {
	margin: 0;
	color: var(--matt-blue);
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 800;
	line-height: 1.15;
}

.matt-price__condition,
.matt-pricing__note {
	color: #45576a;
	font-size: 0.95rem;
}

.matt-checks {
	padding-left: 0;
	list-style: none;
}

.matt-checks li {
	position: relative;
	margin-bottom: 0.75rem;
	padding-left: 1.75rem;
}

.matt-checks li::before {
	position: absolute;
	left: 0;
	color: var(--matt-orange);
	content: "✓";
	font-weight: 700;
}

/*
 * Photographie d'accompagnement du récit de la page À propos. Elle remplace un
 * emplacement réservé qui annonçait « photographie de l'atelier à valider » et
 * affichait en fond une illustration générée : sur la page qui présente
 * l'entreprise, une vue d'atelier de synthèse se lit comme celle des locaux
 * réels, ce que `DEC-044` excluait (`DEC-071`).
 */
.matt-story__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--matt-radius);
	box-shadow: var(--matt-shadow);
}

/* Aperçu de réalisations sur la page d'accueil : vignette cliquable menant à
   la page Réalisations. */
.matt-apercu {
	display: block;
	overflow: hidden;
	border-radius: var(--matt-radius);
	background: var(--matt-white);
	box-shadow: var(--matt-shadow);
	color: inherit;
	text-decoration: none;
}

.matt-apercu img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.matt-apercu span {
	display: block;
	padding: 0.9rem 1rem;
	color: var(--matt-blue);
	font-weight: 700;
	text-align: center;
}

.matt-apercu:hover img,
.matt-apercu:focus-visible img {
	opacity: 0.88;
}

.matt-cta {
	background: var(--matt-cta);
	color: var(--matt-white);
	text-align: center;
}

.matt-cta .wp-block-button__link {
	border-color: var(--matt-blue);
	background: var(--matt-blue);
}

/*
 * `.matt-cta` centre ses contenus par `text-align`, dont le conteneur flexible
 * des boutons ne tient pas compte : les boutons d'appel à l'action restaient
 * alignés à gauche sous un titre centré. Concerne toutes les sections CTA.
 */
.matt-cta .matt-buttons {
	justify-content: center;
}

.matt-service-hero {
	min-height: min(62vh, 620px);
}

/*
 * Les pages légales portaient la classe `matt-legal-hero` sans qu'aucune règle
 * ne lui corresponde : elles héritaient donc du héros pleine hauteur de
 * l'accueil, soit 80 % de l'écran avant la première ligne de texte. Ces pages
 * sont consultées pour être lues, pas contemplées.
 */
.matt-legal-hero {
	min-height: min(30vh, 280px);
}

.page-slug-accueil .matt-hero {
	position: relative;
	background-image:
		linear-gradient(90deg, rgb(0 28 60 / 92%) 0%, rgb(0 45 98 / 76%) 52%, rgb(0 45 98 / 38%) 100%),
		url("assets/images/temp-accueil.png");
	background-position: center;
	background-size: cover;
}

.page-slug-depannage-informatique .matt-service-hero,
.page-slug-impression-3d .matt-service-hero,
.page-slug-personnalisation .matt-service-hero,
.page-slug-a-propos .matt-service-hero,
.page-slug-contact .matt-service-hero,
.page-slug-realisations .matt-service-hero {
	position: relative;
	background-position: center;
	background-size: cover;
	isolation: isolate;
}

.page-slug-depannage-informatique .matt-service-hero {
	background-image:
		linear-gradient(90deg, rgb(0 28 60 / 92%) 0%, rgb(0 45 98 / 70%) 55%, rgb(0 45 98 / 34%) 100%),
		url("assets/images/temp-informatique.png");
}

.page-slug-impression-3d .matt-service-hero {
	background-image:
		linear-gradient(90deg, rgb(0 28 60 / 92%) 0%, rgb(0 45 98 / 70%) 55%, rgb(0 45 98 / 34%) 100%),
		url("assets/images/temp-impression-3d.png");
}

.page-slug-personnalisation .matt-service-hero {
	background-image:
		linear-gradient(90deg, rgb(0 28 60 / 92%) 0%, rgb(0 45 98 / 70%) 55%, rgb(0 45 98 / 34%) 100%),
		url("assets/images/temp-personnalisation.png");
}

.page-slug-a-propos .matt-service-hero {
	background-image:
		linear-gradient(90deg, rgb(0 28 60 / 92%) 0%, rgb(0 45 98 / 70%) 55%, rgb(0 45 98 / 34%) 100%),
		url("assets/images/temp-a-propos.png");
}

.page-slug-contact .matt-service-hero {
	background-image:
		linear-gradient(90deg, rgb(0 28 60 / 92%) 0%, rgb(0 45 98 / 70%) 55%, rgb(0 45 98 / 34%) 100%),
		url("assets/images/temp-contact.png");
}

.page-slug-realisations .matt-service-hero {
	background-image:
		linear-gradient(90deg, rgb(0 28 60 / 92%) 0%, rgb(0 45 98 / 70%) 55%, rgb(0 45 98 / 34%) 100%),
		url("assets/images/temp-realisations.png?v=2");
}

/*
 * La page Tarifs (`DEC-084`) n'a pas de fond généré : les huit visuels de
 * `DEC-044` ont été produits pour les pages existantes, et aucun n'illustre
 * un tarif. Plutôt que d'en réemployer un sans rapport, le bandeau reste uni —
 * mais raccourci : à pleine hauteur, un aplat bleu de 62 % de l'écran se lit
 * comme une image qui n'a pas chargé, alors qu'un bandeau court se lit comme
 * un choix.
 */
.page-slug-tarifs .matt-service-hero {
	min-height: min(34vh, 320px);
}

.page-slug-faq .matt-service-hero {
	position: relative;
	background-image:
		linear-gradient(90deg, rgb(0 28 60 / 92%) 0%, rgb(0 45 98 / 70%) 55%, rgb(0 45 98 / 34%) 100%),
		url("assets/images/temp-faq.png");
	background-position: center;
	background-size: cover;
	isolation: isolate;
}

.matt-service-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	padding-left: 0;
	list-style: none;
}

.matt-service-list li {
	padding: 1.25rem;
	border-left: 4px solid var(--matt-orange);
	background: var(--matt-white);
	box-shadow: 0 0.3rem 1rem rgb(0 45 98 / 7%);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.matt-service-list li:hover {
	transform: translateY(-3px);
	box-shadow: 0 0.6rem 1.5rem rgb(0 45 98 / 12%);
}

.matt-service-list strong {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--matt-blue);
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.05rem;
}

.matt-proof {
	background: var(--matt-blue);
	color: var(--matt-white);
}

.matt-proof h2 {
	color: var(--matt-white);
}

.matt-proof__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 2rem;
}

.matt-stat {
	padding: 1.25rem;
	border: 1px solid rgb(255 255 255 / 35%);
	border-radius: 0.35rem;
	text-align: center;
}

.matt-stat strong {
	display: block;
	color: var(--matt-white);
	font-family: "Roboto Mono", monospace;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.matt-process {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1rem;
	padding-left: 0;
	counter-reset: matt-step;
	list-style: none;
}

.matt-process li {
	position: relative;
	padding: 3.75rem 1rem 1rem;
	border-radius: 0.35rem;
	background: var(--matt-light);
	counter-increment: matt-step;
}

.matt-process li::before {
	position: absolute;
	top: 1rem;
	left: 1rem;
	display: grid;
	width: 2rem;
	height: 2rem;
	place-items: center;
	border-radius: 50%;
	background: var(--matt-cta);
	color: var(--matt-white);
	content: counter(matt-step);
	font-weight: 700;
}

.matt-notice {
	padding: 1.25rem;
	border-left: 4px solid var(--matt-orange);
	background: var(--matt-light);
	color: var(--matt-charcoal);
}

.matt-story {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.matt-values {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 2rem;
}

.matt-value {
	padding: 1.5rem;
	border-top: 4px solid var(--matt-orange);
	border-radius: var(--matt-radius);
	background: var(--matt-white);
	box-shadow: var(--matt-shadow);
}

.matt-value h3 {
	margin-top: 0;
}

.matt-career {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: career;
}

.matt-career li {
	position: relative;
	padding: 4rem 1.25rem 1.25rem;
	border-radius: var(--matt-radius);
	background: var(--matt-white);
	box-shadow: var(--matt-shadow);
	counter-increment: career;
}

.matt-career li::before {
	position: absolute;
	top: 1rem;
	left: 1.25rem;
	display: grid;
	width: 2.25rem;
	height: 2.25rem;
	place-items: center;
	border-radius: 50%;
	background: var(--matt-orange);
	color: var(--matt-white);
	font-weight: 700;
	content: counter(career);
}

.matt-faq {
	max-width: none;
}

.matt-faq > * {
	width: min(100%, 860px);
	margin-right: auto;
	margin-left: auto;
}

.matt-faq details {
	margin-bottom: 1rem;
	border: 1px solid #d8dde3;
	border-radius: var(--matt-radius);
	background: var(--matt-white);
}

.matt-faq summary {
	position: relative;
	padding: 1.25rem 3.5rem 1.25rem 1.25rem;
	color: var(--matt-blue);
	font-family: var(--matt-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
}

.matt-faq summary::after {
	position: absolute;
	top: 50%;
	right: 1.25rem;
	color: var(--matt-orange);
	font-size: 1.5rem;
	content: "+";
	transform: translateY(-50%);
}

.matt-faq details[open] summary::after {
	content: "−";
}

.matt-faq details > :not(summary) {
	margin-right: 1.25rem;
	margin-left: 1.25rem;
}

.matt-faq details > :last-child {
	margin-bottom: 1.25rem;
}

.matt-contact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 4rem);
}

.matt-contact-card {
	padding: 1.5rem;
	border-radius: var(--matt-radius);
	background: var(--matt-light);
}

.matt-form {
	max-width: none;
}

.matt-form > * {
	max-width: 720px;
}

.matt-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.matt-field {
	margin-bottom: 1.25rem;
}

.matt-field--full {
	grid-column: 1 / -1;
}

.matt-field label,
.matt-field legend {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--matt-blue);
	font-family: var(--matt-font-heading);
	font-weight: 700;
}

.matt-field input,
.matt-field select,
.matt-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem;
	border: 1px solid #768391;
	border-radius: 4px;
	background: var(--matt-white);
	color: var(--matt-charcoal);
	font: inherit;
}

.matt-field textarea {
	min-height: 160px;
	resize: vertical;
}

.matt-consent {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.matt-consent input {
	width: 1.25rem;
	min-height: 1.25rem;
	margin-top: 0.2rem;
}

.matt-form button[disabled] {
	min-height: 48px;
	padding: 0.75rem 1.25rem;
	border: 0;
	border-radius: 4px;
	background: #68737d;
	color: var(--matt-white);
	font-weight: 700;
	cursor: not-allowed;
}

/*
 * Pages légales. La largeur maximale porte sur les contenus, pas sur la
 * section : posée sur la section, elle réduisait la boîte à 760 px calés à
 * gauche, écrasant le texte dans une colonne étroite au bord de l'écran.
 * Même correction que celle appliquée à la FAQ par `DEC-047`.
 */
.matt-legal {
	max-width: none;
}

.matt-legal > * {
	width: min(100%, 760px);
	margin-right: auto;
	margin-left: auto;
}

.matt-legal h2 {
	margin-top: 2.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--matt-light);
}

.matt-legal-status {
	padding: 1.25rem;
	border: 2px solid var(--matt-orange);
	border-radius: var(--matt-radius);
	background: #fff8f4;
}

.matt-legal-status strong {
	color: var(--matt-blue);
}

.matt-legal-meta {
	padding: 1.25rem;
	border-left: 4px solid var(--matt-blue);
	background: var(--matt-light);
}

/*
 * Encadrés légaux. L'article L217-15 du Code de la consommation impose que les
 * informations sur les garanties légales figurent « dans un encadré » : le
 * cadre est ici une exigence de forme, pas un choix graphique. Le formulaire
 * type de rétractation reprend la même présentation parce qu'il doit rester
 * identifiable et détachable du reste des conditions.
 */
.matt-legal-encadre {
	padding: 1.5rem;
	border: 2px solid var(--matt-blue);
	border-radius: var(--matt-radius);
	background: var(--matt-white);
}

.matt-legal-encadre.is-layout-flow > * {
	margin-block-start: 1em;
}

.matt-legal-encadre.is-layout-flow > :first-child {
	margin-block-start: 0;
}

.matt-legal-encadre h3 {
	margin-top: 0;
	color: var(--matt-blue);
}

@media print {
	.matt-legal-encadre {
		break-inside: avoid;
	}
}

/*
 * Tableaux de la page Tarifs (`DEC-084`). Le thème ne portait aucune règle de
 * tableau : les grilles de prix s'affichaient en colonnes serrées, sans
 * séparation ni alignement des montants.
 *
 * Le débordement horizontal est confiné au `figure` : une grille de sept
 * forfaits sur quatre colonnes ne tient pas sous 480 px, et sans ce confinement
 * c'est la page entière qui défilait latéralement.
 */
.matt-tarifs__table {
	overflow-x: auto;
	margin-top: 1.5rem;
	margin-bottom: 0;
}

.matt-tarifs__table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.matt-tarifs__table th,
.matt-tarifs__table td {
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid rgb(0 45 98 / 12%);
	text-align: left;
	vertical-align: top;
}

.matt-tarifs__table thead th {
	border-bottom: 2px solid var(--matt-blue);
	color: var(--matt-blue);
	font-weight: 700;
	white-space: nowrap;
}

.matt-tarifs__table tbody tr:last-child td {
	border-bottom: none;
}

.matt-tarifs__table tbody tr:nth-child(even) {
	background: rgb(0 45 98 / 3%);
}

/* Les montants sont alignés à droite pour être comparables d'une ligne à
   l'autre ; les colonnes de texte qui suivent gardent l'alignement à gauche.
   D'où trois modificateurs plutôt qu'une règle unique : les tableaux de prix
   ont deux ou trois colonnes chiffrées selon les cas, celui des déplacements
   une seule.
   `width: 1%` combiné à `nowrap` fait tenir ces colonnes à la largeur de leur
   contenu : sans cela, un tableau à trois colonnes étirait « 60 € » sur un
   tiers de la page, loin de son libellé. */
.matt-tarifs__table--num23 td:nth-child(2),
.matt-tarifs__table--num23 th:nth-child(2),
.matt-tarifs__table--num23 td:nth-child(3),
.matt-tarifs__table--num23 th:nth-child(3),
.matt-tarifs__table--num234 td:nth-child(2),
.matt-tarifs__table--num234 th:nth-child(2),
.matt-tarifs__table--num234 td:nth-child(3),
.matt-tarifs__table--num234 th:nth-child(3),
.matt-tarifs__table--num234 td:nth-child(4),
.matt-tarifs__table--num234 th:nth-child(4),
.matt-tarifs__table--num2 td:nth-child(2),
.matt-tarifs__table--num2 th:nth-child(2) {
	width: 1%;
	text-align: right;
	white-space: nowrap;
}

.matt-examples {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.matt-example {
	overflow: hidden;
	border-radius: var(--matt-radius);
	background: var(--matt-white);
	box-shadow: var(--matt-shadow);
}

/*
 * Les photographies de réalisations sont prises au téléphone, en portrait comme
 * en paysage. Un cadrage en 3/2 amputait les prises verticales — tee-shirts,
 * sacs, figurines — d'une grande partie du sujet. Le carré est le seul rapport
 * qui traite les deux orientations sans mutiler l'objet photographié.
 */
.matt-example img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/*
 * Séquence « de la conception à l'objet » : modèle, pièce imprimée, pièce en
 * place. Les trois vues se lisent de gauche à droite et doivent rester alignées,
 * d'où le cadrage carré commun malgré des sources d'orientations différentes.
 */
.matt-case {
	margin-top: 2.5rem;
	padding: 1.5rem;
	border-radius: var(--matt-radius);
	background: var(--matt-white);
	box-shadow: var(--matt-shadow);
}

.matt-case.is-layout-flow > * {
	margin-block-start: 0.75em;
}

.matt-case.is-layout-flow > :first-child {
	margin-block-start: 0;
}

.matt-case h3 {
	margin-top: 0;
}

.matt-case__photos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1.25rem;
}

.matt-case__photos img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--matt-radius);
}

.matt-example__content {
	padding: 1.5rem;
}

.matt-example__label {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	background: var(--matt-light);
	color: var(--matt-blue);
	font-size: 0.75rem;
	font-weight: 700;
}

@media (max-width: 1023px) {
	.matt-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.matt-values {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.matt-process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.matt-hero {
		min-height: 70vh;
	}

	.matt-grid {
		grid-template-columns: 1fr;
	}

	.matt-story,
	.matt-values,
	.matt-career,
	.matt-contact-grid,
	.matt-form__grid,
	.matt-examples {
		grid-template-columns: 1fr;
	}

	/* Les trois vues de la séquence restent côte à côte : leur intérêt tient
	   à la comparaison, une vue par écran la ferait disparaître. */
	.matt-case__photos {
		gap: 0.5rem;
	}

	.matt-service-list,
	.matt-proof__stats,
	.matt-process,
	.matt-pricing__grid {
		grid-template-columns: 1fr;
	}

	/* Le tableau reste lisible en défilant dans son cadre plutôt qu'en
	   compressant les libellés à un mot par ligne. */
	.matt-tarifs__table table {
		min-width: 34rem;
		font-size: 0.9rem;
	}

	.matt-tarifs__table th,
	.matt-tarifs__table td {
		padding: 0.6rem 0.7rem;
	}

	.matt-buttons {
		flex-direction: column;
	}

	.matt-buttons .wp-block-button,
	.matt-buttons .wp-block-button__link {
		width: 100%;
	}
}