/* ===== Base commune (voir DESIGN.md). Les couleurs et la typographie de base viennent de theme.json. ===== */
:root {
	--pierre-claire: var(--wp--preset--color--pierre-claire, #F2EEE7);
	--pierre: var(--wp--preset--color--pierre, #E6DFD3);
	--encre: var(--wp--preset--color--encre, #22241F);
	--gris-olivier: var(--wp--preset--color--gris-olivier, #585E4F);
	--olivier: var(--wp--preset--color--olivier, #3F4A2A);
	--olive: var(--wp--preset--color--olive, #5C6B3A);
	--sauge: #8A9A6B;
	--clair: var(--wp--preset--color--tirage, #FBFAF6);
	--filet: rgba(34, 36, 31, 0.14);
	--voile: rgba(242, 238, 231, 0.94);
	--f: var(--wp--preset--font-family--eb-garamond, "EB Garamond", Garamond, "Times New Roman", serif);
	--marge: 48px;
	--gouttiere: 24px;
	--entete: 88px;
}
* { box-sizing: border-box; }
html { color-scheme: light; scrollbar-color: var(--gris-olivier) var(--pierre-claire); -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; font-variant-numeric: lining-nums; }
::selection { background: var(--pierre); color: var(--encre); }
img { display: block; max-width: 100%; height: auto; }
a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--olivier); outline-offset: 3px; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2 { text-wrap: balance; }
.a-preciser { color: var(--gris-olivier); font-style: italic; }

/* Courbes des Alpilles en fond des pages intérieures (la carte de l'accueil a son propre style, blocks/carte) */
.fond { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 40%, transparent 85%);
	        mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.6) 40%, transparent 85%); }
.fond > svg { position: absolute; left: 0; top: 0; width: 100%; height: 130%; will-change: transform, opacity; }
.k-min { fill: none; stroke: var(--sauge); stroke-opacity: .45; stroke-width: .9; vector-effect: non-scaling-stroke; }
.k-maj { fill: none; stroke: var(--olive); stroke-opacity: .5; stroke-width: 1.3; vector-effect: non-scaling-stroke; }

/* Structure */
main { position: relative; z-index: 1; overflow-x: clip; }
.enveloppe { max-width: 1440px; margin-inline: auto; padding-inline: var(--marge); } /* seulement les côtés : les marges hautes restent aux sections */
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); }
.voile { position: relative; isolation: isolate; }
.voile::before { content: ""; position: absolute; inset: -48px -40px; z-index: -1; background: radial-gradient(closest-side, var(--voile) 62%, rgba(242, 238, 231, 0)); }

/* Tirages : les photos posées sur la carte */
.tirage { background: var(--clair); padding: 8px; box-shadow: var(--wp--preset--shadow--tirage, 0 24px 48px -28px rgba(34, 36, 31, .45)); }
.tirage img { width: 100%; }
.tirage figcaption { padding: 8px 4px 2px; font-size: 16px; line-height: 1.4; font-style: italic; color: var(--gris-olivier); margin: 0; }
@media (min-width: 801px) { .grille > .tirage { align-self: start; } }
.js .tirage.a-poser { opacity: 0; filter: blur(14px); transform: translateY(28px); }
.js .tirage.pose { opacity: 1; filter: none; transform: none; transition: opacity 1200ms cubic-bezier(.2, .7, .2, 1), filter 1200ms cubic-bezier(.2, .7, .2, 1), transform 1200ms cubic-bezier(.2, .7, .2, 1); }

/* Textes */
.texte { max-width: 58ch; text-wrap: pretty; }
.lien { font-style: italic; }
.fil { font-size: 17px; font-style: italic; color: var(--gris-olivier); }
.fil a { color: var(--gris-olivier); }
.chapo { font-size: 22px; line-height: 1.55; max-width: 42ch; }

/* Boutons : ceux de l'éditeur (wp-element-button) et ceux des blocs du thème (.bouton) */
.wp-element-button,
.bouton { display: inline-flex; align-items: center; min-height: 54px; transition: background-color 180ms ease-out; }
.bouton { padding: 0 28px; background: var(--olivier); color: var(--clair); font-size: 19px; font-weight: 500; text-decoration: none; }
.bouton:hover { background: var(--olive); color: var(--clair); text-decoration: none; }
.wp-element-button:active,
.bouton:active { transform: translateY(1px); }

/* Ouverture des pages intérieures */
.ouverture { padding-top: 9vh; padding-bottom: 10vh; row-gap: 40px; align-items: center; }
.ouverture-texte { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 22px; }
.ouverture-photo { grid-column: 7 / 13; }
.ouverture-photo img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Listes à filets */
.liste-filets { border-top: 1px solid var(--filet); }
.liste-filets div { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--filet); }
.liste-filets dt { font-style: italic; color: var(--gris-olivier); }

/* Listes de faits faites avec le bloc Liste : le libellé est en gras, le reste suit.
   « pieces » : deux colonnes (page La maison) ; « equipements-liste » : libellé au-dessus. */
.wp-block-list { margin: 0; padding: 0; list-style: none; }
.pieces { border-top: 1px solid var(--filet); }
.pieces li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--filet); font-size: 18px; }
.pieces li strong { font-weight: 500; font-size: 20px; }
.equipements { padding-top: 22vh; row-gap: 32px; }
.equipements > h2 { grid-column: 1 / 5; }
.equipements-liste { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.equipements-liste li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--filet); font-size: 20px; }
.equipements-liste li strong { font-size: 17px; font-style: italic; font-weight: 450; color: var(--gris-olivier); }
.equipements-liste li em,
.pieces li em { color: var(--gris-olivier); }
.liste-filets li { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--filet); }
.liste-filets li strong { font-weight: 450; font-style: italic; color: var(--gris-olivier); }

/* Résumé sous le chapô, et photos d'ouverture au format 3:2 */
.resume { font-size: 19px; color: var(--gris-olivier); font-style: italic; }
.ouverture-photo.photo-3-2 img { aspect-ratio: 3 / 2; }
/* Variante de la page La maison : photo alignée en bas du texte */
.ouverture-bas { padding-top: 10vh; padding-bottom: 12vh; align-items: end; }
.ouverture-bas .chapo { max-width: 40ch; }

/* Images de l'éditeur posées en tirages : pas de marges de WordPress */
.wp-block-image.tirage { margin-bottom: 0; }
.wp-block-image.tirage .wp-element-caption { margin: 0; }

/* Étiquettes visibles seulement dans l'éditeur */
.mazet-etiquette-editeur { font-size: 14px; font-style: italic; color: var(--gris-olivier); border-left: 2px solid var(--olivier); padding-left: 8px; margin: 0 0 8px; }

/* Appel de fin de page */
.suite { padding-top: 22vh; padding-bottom: 96px; row-gap: 24px; background: linear-gradient(to bottom, rgba(242, 238, 231, 0), var(--pierre-claire) 18vh); }
.suite-texte { grid-column: 4 / 10; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.suite-liens { display: flex; flex-wrap: wrap; gap: 8px 32px; }

/* Page introuvable */
.introuvable { padding-block: 16vh; display: flex; flex-direction: column; gap: 22px; }

@media (max-width: 800px) {
	:root { --marge: 20px; --entete: 72px; }
	body { font-size: 19px; }
	.grille { display: flex; flex-direction: column; }
	.voile::before { inset: -32px -20px; background: linear-gradient(to bottom, rgba(242, 238, 231, 0), var(--voile) 32px, var(--voile) calc(100% - 32px), rgba(242, 238, 231, 0)); }
	h1 { font-size: 38px; }
	.ouverture, .ouverture-bas { padding-top: 32px; padding-bottom: 56px; align-items: stretch; }
	.liste-filets div, .liste-filets li { grid-template-columns: 1fr; gap: 0; }
	.equipements { padding-top: 88px; }
	.equipements-liste { display: flex; flex-direction: column; gap: 0; }
	.suite-texte { align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
	.js .tirage.a-poser, .js .tirage.pose { opacity: 1; filter: none; transform: none; transition: none; }
	.wp-element-button, .bouton { transition: none; }
}