/*
Theme Name: MHC
Theme URI: https://example.com/mhc
Author: MHC
Author URI: https://example.com
Description: Thème sur mesure conçu pour Elementor. Structure PHP classique, design tokens centralisés dans theme.json, widgets Elementor propres au projet.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mhc
Tags: elementor, custom-menu, featured-images, translation-ready
*/

/* --------------------------------------------------------------------------
   Alias de tokens
   Les valeurs viennent de theme.json ; WordPress les expose en variables CSS.
   Ces alias raccourcissent l'écriture et servent de repli si les styles
   globaux ne sont pas chargés.
   -------------------------------------------------------------------------- */
:root {
	/* Les noms disent le rôle, pas la teinte : changer la palette se fait
	   dans theme.json, sans toucher au reste des feuilles de style. */
	--mhc-primary:      var(--wp--preset--color--brown, #3E2415);
	--mhc-primary-dark: var(--wp--preset--color--espresso, #221109);
	--mhc-brown-mid:    var(--wp--preset--color--brown-mid, #6B4324);
	--mhc-accent:       var(--wp--preset--color--gold, #D9A441);
	--mhc-accent-soft:  var(--wp--preset--color--gold-soft, #EFD9A3);
	--mhc-accent-deep:  var(--wp--preset--color--gold-deep, #A87A22);
	--mhc-orange:       var(--wp--preset--color--orange, #E67D32);
	--mhc-ink:          var(--wp--preset--color--ink, #2A1A10);
	--mhc-muted:        var(--wp--preset--color--muted, #7A6252);
	--mhc-line:         var(--wp--preset--color--line, #E5D5C0);
	--mhc-cream:        var(--wp--preset--color--cream, #FDF6EA);
	--mhc-surface:      var(--wp--preset--color--surface, #F6EADA);
	--mhc-background:   var(--wp--preset--color--background, #fff);

	--mhc-font-sans:    var(--wp--preset--font-family--sans, Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	--mhc-font-display: var(--wp--preset--font-family--display, Prompt, Poppins, -apple-system, BlinkMacSystemFont, sans-serif);

	--mhc-space-xs:  var(--wp--preset--spacing--10, 0.5rem);
	--mhc-space-s:   var(--wp--preset--spacing--20, 1rem);
	--mhc-space-m:   var(--wp--preset--spacing--30, 1.75rem);
	--mhc-space-l:   var(--wp--preset--spacing--40, 3rem);
	--mhc-space-xl:  var(--wp--preset--spacing--50, 5rem);

	/* Trame géométrique en écho aux arts décoratifs du bassin méditerranéen, posée en
	   filigrane sur les fonds sombres. C'est une texture, pas un motif que
	   l'on doit remarquer. */
	--mhc-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23D9A441' stroke-opacity='0.22' stroke-width='1'%3E%3Cpath d='M40 4 76 40 40 76 4 40Z'/%3E%3Cpath d='M40 18 62 40 40 62 18 40Z'/%3E%3Cpath d='M4 4 76 76M76 4 4 76'/%3E%3Ccircle cx='40' cy='40' r='5'/%3E%3C/g%3E%3C/svg%3E");

	/* L'étoile à huit branches du zellige, en masque : posée sur un fond,
	   elle en prend la couleur. Elle sert de puce et de séparateur. */
	--mhc-star: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'><polygon%20points='12.00%2C0.00%2013.90%2C7.41%2020.49%2C3.51%2016.59%2C10.10%2024.00%2C12.00%2016.59%2C13.90%2020.49%2C20.49%2013.90%2C16.59%2012.00%2C24.00%2010.10%2C16.59%203.51%2C20.49%207.41%2C13.90%200.00%2C12.00%207.41%2C10.10%203.51%2C3.51%2010.10%2C7.41'%20fill='black'/></svg>");

	/* Le picto de la marque, en masque : posé sur un fond, il en prend la
	   couleur. Il sert de puce, de séparateur et de filigrane. */
	--mhc-picto: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2044%2044.2'><path%20d='M1.2%2C43.9c2%2C.3%2C5.1.5%2C8.8-.4%2C0%2C0%2C2.7-.7%2C4.9-1.9%2C2.8-1.5%2C5.7-4.5%2C9.5-14.4%2C3.8-9.9%2C4.5-16.3%2C8.9-21.3%2C1.9-2.2%2C3.9-3.4%2C4.4-3.7%2C2.9-1.6%2C5.7-2%2C7.4-2.2-2%2C0-5.6%2C0-9.5%2C1.7-.8.4-3.1%2C1.4-5.6%2C3.7-2.2%2C2-4.8%2C5.2-9.2%2C17.7-2.6%2C7.4-2.9%2C9.8-5.6%2C13.9-2.5%2C3.7-4.7%2C5.3-6.8%2C6.1-2.9%2C1.2-5.7%2C1-7.2.8Z'%20fill='black'/></svg>");

	/* Trame des battants du portail : la construction du zellige (losange
	   double, diagonales, croisée) à une échelle plus large et des traits
	   plus fins, avec le picto au centre là où le motif du site pose un
	   cercle. */
	/* --- Textures de section -------------------------------------------
	   Le motif du portail décliné en trames de fond, à poser sur les
	   sections en aplat. Trois figures de la même famille (le réseau du
	   zellige, l'arche, l'étoile à huit branches) en deux teintes : brune
	   pour les fonds clairs, dorée pour les sombres, car chacune disparaît
	   sur l'autre.

	   Les opacités sont volontairement au bord du visible. Une texture de
	   fond qu'on remarque est une texture ratée : elle doit se sentir quand
	   l'œil s'y pose, et se taire le reste du temps.
	   ------------------------------------------------------------------- */
	--mhc-tex-zellige: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='148' viewBox='0 0 148 148'%3E%3Cg fill='none' stroke='%233E2415'%3E%3Cpath d='M74 10 138 74 74 138 10 74Z' stroke-width='0.9' stroke-opacity='0.055'/%3E%3Cpath d='M74 36 112 74 74 112 36 74Z' stroke-width='0.8' stroke-opacity='0.038'/%3E%3Cpath d='M0 0 148 148M148 0 0 148' stroke-width='0.7' stroke-opacity='0.022'/%3E%3Cpath d='M74 0V148M0 74H148' stroke-width='0.7' stroke-opacity='0.018'/%3E%3C/g%3E%3C/svg%3E");
	--mhc-tex-arcs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%233E2415' stroke-opacity='0.05'%3E%3Cpath d='M0 120 A60 60 0 0 1 120 120' stroke-width='0.9'/%3E%3Cpath d='M18 120 A42 42 0 0 1 102 120' stroke-width='0.8'/%3E%3Cpath d='M36 120 A24 24 0 0 1 84 120' stroke-width='0.7'/%3E%3C/g%3E%3C/svg%3E");
	--mhc-tex-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='%233E2415' fill-opacity='0.038'%3E%3Cpath d='M48 26 54 42 70 48 54 54 48 70 42 54 26 48 42 42Z'/%3E%3C/g%3E%3Cg fill='%23D9A441' fill-opacity='0.05'%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='96' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='96' r='1.6'/%3E%3Ccircle cx='96' cy='96' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
	--mhc-tex-zellige-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='148' viewBox='0 0 148 148'%3E%3Cg fill='none' stroke='%23EFD9A3'%3E%3Cpath d='M74 10 138 74 74 138 10 74Z' stroke-width='0.9' stroke-opacity='0.07'/%3E%3Cpath d='M74 36 112 74 74 112 36 74Z' stroke-width='0.8' stroke-opacity='0.05'/%3E%3Cpath d='M0 0 148 148M148 0 0 148' stroke-width='0.7' stroke-opacity='0.03'/%3E%3Cpath d='M74 0V148M0 74H148' stroke-width='0.7' stroke-opacity='0.024'/%3E%3C/g%3E%3C/svg%3E");
	--mhc-tex-arcs-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23EFD9A3' stroke-opacity='0.07'%3E%3Cpath d='M0 120 A60 60 0 0 1 120 120' stroke-width='0.9'/%3E%3Cpath d='M18 120 A42 42 0 0 1 102 120' stroke-width='0.8'/%3E%3Cpath d='M36 120 A24 24 0 0 1 84 120' stroke-width='0.7'/%3E%3C/g%3E%3C/svg%3E");
	--mhc-tex-stars-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='%23EFD9A3' fill-opacity='0.055'%3E%3Cpath d='M48 26 54 42 70 48 54 54 48 70 42 54 26 48 42 42Z'/%3E%3C/g%3E%3Cg fill='%23D9A441' fill-opacity='0.05'%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='96' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='96' r='1.6'/%3E%3Ccircle cx='96' cy='96' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
	--mhc-panel-pattern: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='148'%20height='148'%20viewBox='0%200%20148%20148'><g%20fill='none'%20stroke='%23D9A441'><path%20d='M74%2010%20138%2074%2074%20138%2010%2074Z'%20stroke-width='0.8'%20stroke-opacity='0.085'/><path%20d='M74%2036%20112%2074%2074%20112%2036%2074Z'%20stroke-width='0.7'%20stroke-opacity='0.055'/><path%20d='M0%200%20148%20148M148%200%200%20148'%20stroke-width='0.6'%20stroke-opacity='0.032'/><path%20d='M74%200V148M0%2074H148'%20stroke-width='0.6'%20stroke-opacity='0.026'/></g><path%20d='M1.2%2C43.9c2%2C.3%2C5.1.5%2C8.8-.4%2C0%2C0%2C2.7-.7%2C4.9-1.9%2C2.8-1.5%2C5.7-4.5%2C9.5-14.4%2C3.8-9.9%2C4.5-16.3%2C8.9-21.3%2C1.9-2.2%2C3.9-3.4%2C4.4-3.7%2C2.9-1.6%2C5.7-2%2C7.4-2.2-2%2C0-5.6%2C0-9.5%2C1.7-.8.4-3.1%2C1.4-5.6%2C3.7-2.2%2C2-4.8%2C5.2-9.2%2C17.7-2.6%2C7.4-2.9%2C9.8-5.6%2C13.9-2.5%2C3.7-4.7%2C5.3-6.8%2C6.1-2.9%2C1.2-5.7%2C1-7.2.8Z'%20fill='%23D9A441'%20fill-opacity='0.10'%20transform='translate%2861.7%2061.7%29%20scale%280.56%29'/></svg>");

	--mhc-content:   760px;
	--mhc-wide:      1200px;
	--mhc-radius:    4px;
	--mhc-transition: 150ms ease;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Aucun défilement horizontal. Des éléments décoratifs du bandeau et de
   l'en-tête (barre de progression, voûte, portail d'ouverture, écoinçons)
   sont dimensionnés en unités de fenêtre et dépassent de quelques pixels,
   surtout sur mobile : la page se met alors à riper latéralement, ce qui
   paraît casser les sections pleine largeur. « clip » rogne ce surplus sans
   créer de conteneur de défilement, donc sans briser l'en-tête collant
   (à la différence de « hidden »). */
html { overflow-x: clip; }

body {
	margin: 0;
	background: var(--mhc-background);
	color: var(--mhc-ink);
	font-family: var(--mhc-font-sans);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mhc-font-display);
	color: var(--mhc-primary);
	font-weight: 800;
	line-height: 1.12;
	/* Resserrement optique : les grandes graisses respirent trop par défaut. */
	letter-spacing: -0.012em;
	text-wrap: balance;
	margin: 0 0 var(--mhc-space-s);
}

p, ul, ol, blockquote, figure, table { margin: 0 0 var(--mhc-space-m); }

a {
	color: var(--mhc-accent-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--mhc-transition);
}
a:hover, a:focus { color: var(--mhc-orange); }

img, video, iframe, svg { max-width: 100%; height: auto; }

:focus-visible {
	outline: 2px solid var(--mhc-orange);
	outline-offset: 2px;
}

/* Lien d'évitement, visible uniquement au clavier. */
.mhc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--mhc-space-s) var(--mhc-space-m);
	background: var(--mhc-primary);
	color: #fff;
	text-decoration: none;
}
.mhc-skip-link:focus {
	left: 0;
	color: #fff;
}

/* Masquage accessible : lu par les lecteurs d'écran, invisible à l'œil. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}