/**
 * Base — reset, typographie, grille, éléments de formulaire, boutons.
 */

/* Une classe du thème ne doit jamais rendre visible ce que le HTML cache :
   `.si-btn { display: inline-flex }` battait la règle du navigateur, et le
   bouton d'envoi apparaissait dès la première étape d'un formulaire. */
[hidden] { display: none !important; }

/* Le doré des jetons est dessiné pour les aplats, les filets et les bordures.
   En encre sur fond clair il ne dépasse pas 2,3:1 : cette variante assombrie
   prend le relais dès qu'il devient du texte. Elle se déduit de l'accent, donc
   elle suit la couleur choisie par le client sans réglage supplémentaire. */
:root {
	--si-color-accent-texte: color-mix(in srgb, var(--si-color-accent) 62%, #000);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--si-font-body);
	font-size: var(--si-text-base);
	line-height: var(--si-leading);
	color: var(--si-color-ink);
	background: var(--si-color-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Les chiffres alignés verticalement : indispensable quand on aligne des prix. */
	font-variant-numeric: tabular-nums lining-nums;
	text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
	font-family: var(--si-font-heading);
	font-weight: 500;
	line-height: var(--si-leading-tight);
	letter-spacing: var(--si-tracking-tight);
	margin: 0 0 var(--si-space-4);
	color: var(--si-color-primary);
	/* Un titre ne doit jamais laisser un mot seul sur sa dernière ligne. */
	text-wrap: balance;
}

h1 { font-size: var(--si-text-4xl); }
h2 { font-size: var(--si-text-3xl); }
h3 { font-size: var(--si-text-xl); }
h4 { font-size: var(--si-text-lg); }

p { margin: 0 0 var(--si-space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--si-color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--si-color-accent-texte); }

/* Accessibilité clavier : un focus toujours visible, jamais laid. */
:focus-visible {
	outline: 2px solid var(--si-color-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Le texte sélectionné reprend la couleur du site. */
::selection {
	background: color-mix(in srgb, var(--si-color-accent) 32%, transparent);
	color: var(--si-color-ink);
}

/* Une barre de défilement discrète, à la couleur du site. */
* { scrollbar-color: color-mix(in srgb, var(--si-color-muted) 45%, transparent) transparent; scrollbar-width: thin; }

.si-screen-reader-text,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Un libellé pour lecteur d'écran est en `position: absolute` sans repère : il
   se pose à l'endroit qu'il occuperait dans le flux. Dans un tableau qui défile,
   cet endroit est hors du cadre, et le document entier se met à défiler sur le
   côté. Tout conteneur à défilement horizontal établit donc son propre repère. */
.si-defilant,
.si-lots__cadre,
.si-article__texte table,
.si-defile,
.si-une-piste,
.si-resume-ia__rangee { position: relative; }

.si-skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--si-color-primary); color: #fff;
	padding: var(--si-space-3) var(--si-space-4); z-index: 999;
}
.si-skip-link:focus { left: 0; }

/* Conteneurs */
.si-container {
	width: 100%;
	max-width: var(--si-container);
	margin-inline: auto;
	padding-inline: var(--si-space-5);
}
.si-container--narrow { max-width: var(--si-container-narrow); }

.si-section { padding-block: var(--si-space-8); }
.si-section--tight { padding-block: var(--si-space-6); }
.si-section--surface { background: var(--si-color-surface); }

/* Grilles.
   Le `min()` laisse la colonne se replier sous sa largeur idéale : à 360 px
   d'écran le conteneur n'offre que 312 px, et une piste de 320 px poussait
   toute la page en défilement latéral. */
.si-grid { display: grid; gap: var(--si-space-5); }
.si-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.si-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.si-grid--4 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* Toute grille qui porte des vignettes de bien prend la respiration d'un
   listing, d'où qu'elle vienne : bloc d'accueil, page libre, bas de fiche. */
.si-grid:has(> .si-vignette),
.si-grid:has(> .si-card),
.si-liste-biens {
	column-gap: var(--si-gap-vignettes-x);
	row-gap: var(--si-gap-vignettes-y);
}
/* Trois vignettes par ligne au maximum : au-delà, les photos deviennent des
   timbres et le catalogue perd ce qui le vend. */
.si-grid--3:has(> .si-vignette),
.si-grid--4:has(> .si-vignette),
.si-grid--biens { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); max-width: none; }
@media (min-width: 1080px) {
	.si-grid--3:has(> .si-vignette),
	.si-grid--4:has(> .si-vignette),
	.si-grid--biens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* En-têtes de section */
.si-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--si-space-4);
	margin-bottom: var(--si-space-6);
	flex-wrap: wrap;
}
.si-section-head__title { margin: 0; }
.si-eyebrow {
	display: block;
	font-size: var(--si-text-xs);
	letter-spacing: var(--si-tracking-wide);
	text-transform: uppercase;
	color: var(--si-color-accent-texte);
	margin-bottom: var(--si-space-2);
	font-weight: 600;
}

/* Boutons */
.si-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--si-space-2);
	padding: 0.85em 1.75em;
	border: 1px solid transparent;
	border-radius: var(--si-radius);
	font-size: var(--si-text-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	background: var(--si-color-primary);
	color: #fff;
	box-shadow: var(--si-shadow-sm);
	transition:
		background var(--si-transition),
		color var(--si-transition),
		border-color var(--si-transition),
		box-shadow var(--si-transition),
		transform 120ms var(--si-ease);
}
.si-btn:hover {
	background: var(--si-color-primary-dark);
	color: #fff;
	box-shadow: var(--si-shadow);
	transform: translateY(-1px);
}
/* Le bouton s'enfonce au clic : sans ce retour, l'interface paraît morte. */
.si-btn:active { transform: translateY(0); box-shadow: var(--si-shadow-sm); }
.si-btn:focus-visible { box-shadow: var(--si-shadow-focus); }

.si-btn--accent { background: var(--si-color-accent); color: var(--si-color-primary); }
.si-btn--accent:hover { background: color-mix(in srgb, var(--si-color-accent) 84%, #000); color: var(--si-color-primary); }
.si-btn--ghost {
	background: transparent;
	color: var(--si-color-primary);
	border-color: var(--si-color-line);
	box-shadow: none;
}
.si-btn--ghost:hover {
	background: var(--si-color-surface);
	color: var(--si-color-primary);
	border-color: color-mix(in srgb, var(--si-color-primary) 35%, var(--si-color-line));
	box-shadow: none;
}
.si-btn--whatsapp { background: #25d366; color: #06331a; }
.si-btn--whatsapp:hover { background: #1eb455; color: #06331a; }
.si-btn--block { width: 100%; }

/* Formulaires */
/* Le navigateur dessine un cadre gris et une encoche autour d'un fieldset :
   dans une carte du thème, c'est le seul élément à porter une bordure système. */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.si-field-row { display: grid; gap: var(--si-space-4); }
.si-field-row--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Formulaire de contact : deux champs par ligne, le message et le bouton sur
   toute la largeur. Dans une colonne étroite — l'encart d'une fiche — tout se
   met en une seule colonne. */
.si-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--si-space-4); }
.si-champ { display: block; min-width: 0; }
.si-champ--pleine { grid-column: 1 / -1; }
.si-champs--etroit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Dans une colonne étroite, seuls le nom et le prénom se partagent la ligne. */
.si-champs--etroit > .si-champ:not(.si-champ--demi) { grid-column: 1 / -1; }
/* L'en-tête est collant : sans cette marge, l'ancre pose le haut du formulaire
   sous la barre et le message de confirmation passe dessous. */
.si-contact-form { scroll-margin-top: calc(var(--si-header-height) + 24px); }
@media (max-width: 560px) { .si-champs { grid-template-columns: minmax(0, 1fr); } }

label { display: block; font-size: var(--si-text-sm); font-weight: 600; margin-bottom: var(--si-space-2); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="number"], input[type="search"], input[type="date"],
input[type="time"], input[type="datetime-local"], select, textarea {
	width: 100%;
	padding: 0.78em 1em;
	font: inherit;
	font-size: var(--si-text-sm);
	color: var(--si-color-ink);
	background: var(--si-color-base);
	border: 1px solid color-mix(in srgb, var(--si-color-line) 85%, var(--si-color-muted));
	border-radius: var(--si-radius);
	transition: border-color var(--si-transition), box-shadow var(--si-transition), background var(--si-transition);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--si-color-muted) 75%, transparent); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--si-color-primary) 30%, var(--si-color-line)); }
input:focus, select:focus, textarea:focus {
	border-color: var(--si-color-primary);
	box-shadow: var(--si-shadow-focus);
	outline: none;
}

/* Une flèche dessinée en CSS : le sélecteur natif dépare sur chaque système. */
select {
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 1.15em top 55%, right 0.85em top 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.4em;
}

/* Cases et boutons radio à la couleur du site. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--si-color-primary); width: 1.05em; height: 1.05em; }
textarea { min-height: 130px; resize: vertical; }

.si-form__consent {
	display: flex;
	gap: var(--si-space-3);
	align-items: flex-start;
	font-size: var(--si-text-xs);
	color: var(--si-color-muted);
	font-weight: 400;
}
.si-form__consent input { width: auto; margin-top: 3px; }

.si-notice {
	padding: var(--si-space-4);
	border-radius: var(--si-radius);
	border-left: 3px solid var(--si-color-primary);
	background: var(--si-color-surface);
	font-size: var(--si-text-sm);
	margin-bottom: var(--si-space-4);
}
.si-notice--success { border-left-color: var(--si-color-success); }
.si-notice--error { border-left-color: var(--si-color-danger); }

/* Utilitaires */
.si-muted { color: var(--si-color-muted); }
.si-text-sm { font-size: var(--si-text-sm); }
.si-text-center { text-align: center; }
.si-mt-0 { margin-top: 0; }
.si-mb-0 { margin-bottom: 0; }
.si-hidden { display: none !important; }

/* Alias de grille employé par les listings de biens. */
/* Une grille de biens se lit comme un listing : même respiration entre les
   lignes, où qu'elle soit posée — accueil, page libre ou bas de fiche. */
.si-grid--biens {
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	column-gap: var(--si-gap-vignettes-x);
	row-gap: var(--si-gap-vignettes-y);
}

/* Étiquette cliquable : secteurs, prestations, filtres actifs. */
.si-chip {
	display: inline-flex; align-items: center; gap: var(--si-space-2);
	padding: var(--si-space-2) var(--si-space-4);
	background: var(--si-color-base); border: var(--si-border); border-radius: var(--si-radius-full);
	font-size: var(--si-text-sm); text-decoration: none; color: var(--si-color-ink);
	transition: border-color var(--si-transition), color var(--si-transition);
}
.si-chip:hover { border-color: var(--si-color-primary); color: var(--si-color-primary); }