/* Shared foundations for the site; the temporary public page stays isolated. */
@font-face {
	font-family: "STIX Two Text";
	src: url("../fonts/stix-two-text-400-smallcaps-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "STIX Two Text";
	src: url("../fonts/stix-two-text-500-smallcaps-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "STIX Two Text";
	src: url("../fonts/stix-two-text-400-italic-latin.woff2") format("woff2");
	font-style: italic;
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "STIX Two Text";
	src: url("../fonts/stix-two-text-500-italic-latin.woff2") format("woff2");
	font-style: italic;
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans-400-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans-500-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}
/*
 * Design system (docs/components.md, D10 et D12).
 * Référence : frames ordinateur Figma à 1440 px. Les tokens fluides atteignent
 * leur valeur Figma à 1440 px ; bornes en rem (taille de texte de l'utilisateur),
 * interpolation en vw. Les espacements fluides vont de 360 à 1420 px : une fenêtre
 * de 1440 px avec barre de défilement (100vw = 1425 px) atteint déjà la valeur Figma.
 *
 * Breakpoints officiels, en syntaxe d'intervalle ; n'en créer aucun autre :
 *   xs  (width <= 22.5rem)   360 px   petits téléphones : une colonne de contenu
 *   sm  (width <= 47.5rem)   760 px   téléphones : grille de 6 colonnes
 *   md  (width <= 68.75rem)  1100 px  tablettes et petits portables
 *   xl  (width >= 100rem)    1600 px  grands écrans
 */
:root {
	/* Couleurs : variable Figma de l'accueil (12202:7140) en commentaire. */
	--maestra-paper: #f0ede5;        /* Background (Color Scheme 1) */
	--maestra-ink: #000;             /* Neutral Darkest */
	--maestra-ink-soft: #191919;     /* Neutral Darker */
	--maestra-grey-dark: #4c4c4c;    /* Neutral Dark */
	--maestra-brown: #7d4116;        /* Camel */
	--maestra-brown-dark: #643411;   /* Camel Dark */
	--maestra-camel-light: #e5d9d0;  /* Camel Lighter */
	--maestra-pink: #f5b2bf;         /* Rose */
	--maestra-pink-dark: #c48e98;    /* Rose Dark */
	--maestra-white: #fff;           /* White */
	/* Hors variables Figma, conservés (D13). */
	--maestra-grey: #6b6863;         /* hors Figma : langue inactive du menu */
	--maestra-grey-light: #d8d6d3;   /* hors Figma : filet de l'en-tête du menu */
	/* Filets et voiles : opacités Figma appliquées aux couleurs de la palette. */
	--maestra-line: color-mix(in srgb, var(--maestra-ink) 5%, transparent);          /* Neutral Darkest 5 */
	--maestra-rule: color-mix(in srgb, var(--maestra-ink) 18%, transparent);         /* Border : 15 % dans Figma */
	--maestra-rule-inverse: color-mix(in srgb, var(--maestra-white) 20%, transparent); /* Opacity White 20 */
	--maestra-backdrop: color-mix(in srgb, var(--maestra-ink) 40%, transparent);     /* Neutral Darkest 40 */
	--maestra-serif: "STIX Two Text", Georgia, serif;
	--maestra-sans: "DM Sans", Arial, sans-serif;
	/* Espacements. Fixes : 2xs à s ; fluides : m à xl (valeur Figma à 1440 px). */
	--maestra-space-2xs: .5rem;                                    /* 8 */
	--maestra-space-xs: 1rem;                                      /* 16 */
	--maestra-space-s: 1.5rem;                                     /* 24 : Section xsmall */
	--maestra-space-m: clamp(1.5rem, 1.3302rem + .7548vw, 2rem);   /* 24 → 32 */
	--maestra-space-l: clamp(2rem, 1.6604rem + 1.5095vw, 3rem);    /* 32 → 48 : Section small */
	--maestra-space-xl: clamp(3rem, 2.3208rem + 3.0189vw, 5rem);    /* 48 → 80 : Section medium */
	--maestra-section: clamp(4.5rem, 3.8rem + 3.5vw, 9rem);        /* 72 → 111 à 1440 : Section large (112) */
	--maestra-gutter: 1.5rem;                                      /* marge latérale de page */
	--maestra-space: clamp(1rem, .8rem + .8vw, 1.5rem);            /* gouttière de grille, 16 → 24 */
	--maestra-ease: cubic-bezier(.22, 1, .36, 1);
	--maestra-ease-draw: cubic-bezier(.65, 0, .35, 1);
	--maestra-hover-motion: 600ms;
	--maestra-hover-fade: 450ms;
	/* Typographie fluide : valeur à 1440 px et style Figma correspondant.
	   Textes courants : valeur Figma jusqu'à 1440 px (90rem), légère croissance au-delà (D13). */
	--maestra-text-xs: clamp(.75rem, .75rem + (100vw - 90rem) * .0012, .875rem);      /* 12 : Text Tiny 12/1.5 */
	--maestra-text-sm: clamp(.875rem, .875rem + (100vw - 90rem) * .001, 1rem);        /* 14 : Text Small 14/1.6, Tagline 14 */
	--maestra-text-base: clamp(1rem, 1rem + (100vw - 90rem) * .0012, 1.125rem);       /* 16 : Text Regular 16/1.5, Bouton link 16 */
	--maestra-text-lg: clamp(1.125rem, 1.125rem + (100vw - 90rem) * .0016, 1.25rem);  /* 18 : Text Medium 18/1.6 */
	--maestra-h1: clamp(2.5rem, 2rem + 2.22vw, 5rem);              /* 64 : H1 64/0.9 */
	--maestra-h2: clamp(2rem, 1.65rem + 1.5vw, 4rem);              /* 48 : H2 48/0.9 */
	--maestra-h3: clamp(1.625rem, 1.35rem + 1vw, 2.625rem);        /* 36 : H4 36/1 */
	--maestra-h4: clamp(1.5rem, 1.32rem + .75vw, 2.25rem);         /* 32 */
	--maestra-h5: clamp(1.25rem, 1.074rem + .751vw, 1.875rem);     /* 28 : H5 28/1.2 (Figma) */
	--maestra-h6: clamp(1.125rem, 1.05rem + .3vw, 1.5rem);         /* 21,1 */
	--maestra-display: clamp(3rem, 1.6rem + 4.9vw, 8rem);          /* 96 : titre « Confiez-nous » */
	--maestra-editorial: clamp(2.25rem, 2.1rem + .6vw, 3rem);      /* 42 : H3 italique 42/1 */
	--maestra-quote: clamp(1.25rem, 1.23rem + .1vw, 1.5rem);       /* 21,1 : promesses */
	--maestra-ui-size: clamp(.9375rem, .916rem + .1vw, 1rem);      /* 16 : bouton 1 (DM Sans 500, 3 %) */
	--maestra-nav-size: clamp(1.0625rem, 1.02rem + .12vw, 1.125rem); /* 18 : liens du menu */
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--maestra-paper); scrollbar-gutter: stable; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; color: var(--maestra-ink); background: var(--maestra-paper); font: 400 var(--maestra-text-base)/1.5 var(--maestra-sans); -webkit-font-smoothing: antialiased; }
:where(h1, h2, h3, h4, h5, h6) { margin: 0; font-family: var(--maestra-serif); font-weight: 400; font-synthesis: none; line-height: 1; letter-spacing: .01em; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: var(--maestra-h1); }
h2 { font-size: var(--maestra-h2); }
h3 { font-size: var(--maestra-h3); }
h4 { font-size: var(--maestra-h4); }
h5 { font-size: var(--maestra-h5); }
h6 { font-size: var(--maestra-h6); }
:where(p, figure) { margin: 0; }
p { text-wrap: pretty; }
/* Césures (décision du 12 octobre 2026) : tout texte justifié déclare `hyphens: auto` dans sa propre règle ; ces limites s'héritent et n'ont aucun effet sans elle. Mots de 7 lettres minimum, 3 avant et 3 après la coupure ; préfixé : Safari (limite de longueur de mot non prise en charge), 2 lignes coupées d'affilée au plus. */
body { hyphenate-limit-chars: 7 3 3; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; -webkit-hyphenate-limit-lines: 2; }
.mm-smallcaps { font-variant-caps: small-caps; font-synthesis: none; }
/* Surtitre — Figma « Heading/Tagline » : DM Sans 500, capitales espacées, camel. */
.mm-eyebrow { font: 500 var(--maestra-text-sm)/1.5 var(--maestra-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--maestra-brown); }
.mm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--maestra-space); padding-inline: var(--maestra-gutter); }
.mm-grid > * { min-width: 0; }
.mm-grid .mm-grid { padding-inline: 0; }
.mm-photo { position: relative; overflow: hidden; background: var(--maestra-camel-light); }
.mm-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (width <= 47.5rem) {
	.mm-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
body:has(.mm-menu[open], .mm-cookie-dialog[open]) { overflow: hidden; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }
button, summary, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, input { border-radius: 0; }
button:disabled { cursor: not-allowed; }
:where(a, button, summary, input):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { color: var(--maestra-ink); background: var(--maestra-pink); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { z-index: 100001; position: fixed; top: 48px; left: var(--maestra-gutter); width: auto; height: auto; padding: .75rem var(--maestra-space-xs); clip-path: none; background: var(--maestra-paper); }
.mm-icon { display: block; flex: none; object-fit: contain; }
.mm-icon--white { filter: brightness(0) invert(1); }
.mm-development { display: grid; align-content: center; justify-items: center; min-height: 68svh; padding: 140px var(--maestra-gutter) 100px; text-align: center; }
.mm-development h1 { max-width: 100%; margin: 0; font: 500 var(--maestra-h1)/1.15 var(--maestra-serif); overflow-wrap: anywhere; }
.mm-development p { margin: 20px 0 0; color: var(--maestra-brown); font: italic 400 var(--maestra-text-lg)/1.5 var(--maestra-serif); }
/* Photo partagée entre deux pages (D17, prototype V1-Journal) : la miniature cliquée devient le hero
   de la page d'arrivée. Transition native entre documents, sans JavaScript ; ailleurs, fondu de 300 ms.
   Les deux partent après 200 ms d'attente (D32).
   Même nom (maisonmaestra_shared_photo()) sur les deux cadres photo, classe .mm-shared-photo. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
}
.mm-shared-photo { view-transition-class: mm-shared-photo; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; }
/* Attente (D32, 30 septembre 2026) : à l'activation d'une page préparée, Chrome rastérise l'écran,
   décode les photos et copie l'ancienne page d'un coup ; le GPU ne présente rien pendant 50 à 150 ms
   (mesuré en 5K), et un fondu immédiat perd sa première moitié (coupure ou flash). L'ancienne page reste
   affichée telle quelle, puis le fondu de 300 ms et la photo partagée (850 ms) partent ensemble. */
::view-transition-group(*), ::view-transition-image-pair(*), ::view-transition-old(*), ::view-transition-new(*) { animation-delay: 200ms; }
::view-transition-group(.mm-shared-photo) { animation-duration: 850ms; animation-timing-function: var(--maestra-ease); }
::view-transition-image-pair(.mm-shared-photo) { overflow: clip; }
::view-transition-old(.mm-shared-photo), ::view-transition-new(.mm-shared-photo) { height: 100%; object-fit: cover; }
/* Page prepared in advance on hover (D19): its animations wait until it is shown. */
.mm-prerendering *, .mm-prerendering *::before, .mm-prerendering *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after, *::backdrop, *::details-content { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}