/* Gamme : groupe .eb-model-cards contenant des groupes .eb-modele (image, nom, accroche, caractéristiques, lien).
 * Tout est modifiable dans l'éditeur ; ajouter une carte = dupliquer un groupe .eb-modele. */
.eb-model-cards {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}
.eb-model-cards > * { margin: 0 !important; }
.eb-modele {
	display: flex !important; flex-direction: column;
	border: 1px solid var(--eb-line);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--blanc);
	transition: border-color 0.25s;
	--wp--style--block-gap: 0;
}
.eb-modele:hover { border-color: var(--wp--preset--color--anthracite); }
.eb-modele__visual {
	position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin: 0 !important;
	background: var(--wp--preset--color--anthracite) url("../../textures/beton-sombre.jpg") 0 0 / 512px;
}
.eb-modele__visual img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 0.6s var(--eb-ease); }
.eb-modele:hover .eb-modele__visual img { transform: scale(1.04); }
.eb-modele__visual::before {
	content: ""; position: absolute; z-index: 1; left: 1rem; top: 1rem; width: 30px; height: 29px;
	background: var(--eb-accent);
	-webkit-mask: var(--eb-crochet-mask) center / contain no-repeat; mask: var(--eb-crochet-mask) center / contain no-repeat;
}
.eb-modele__body { padding: var(--wp--preset--spacing--40); display: flex !important; flex-direction: column; gap: 0.6rem; flex: 1; }
.eb-modele__body > * { margin: 0 !important; }
.eb-modele__name { font-size: var(--wp--preset--font-size--large); }
.eb-modele__pitch { color: var(--eb-muted); min-height: 3em; }
.eb-modele__specs { margin: 0.8rem 0 1.2rem !important; --wp--style--block-gap: 0; }
.eb-spec {
	display: flex !important; justify-content: space-between; gap: 1rem;
	padding: 0.6rem 0; border-top: 1px solid var(--eb-line);
	font-size: var(--wp--preset--font-size--small); margin: 0 !important;
}
.eb-spec p { margin: 0; }
.eb-spec p:first-child { color: var(--eb-muted); }
.eb-spec p:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.eb-modele__cta { margin-top: auto !important; font-weight: 600; }
.eb-modele__cta a { text-decoration: none; display: inline-flex; gap: 0.5rem; align-items: center; }
.eb-modele__cta a::after { content: ""; width: 22px; height: 2px; background: var(--eb-accent); transition: width 0.25s var(--eb-ease); }
.eb-modele:hover .eb-modele__cta a::after { width: 36px; }
@media (max-width: 1100px) { .eb-model-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .eb-model-cards { grid-template-columns: 1fr; } }

/* Prix « à partir de » (champ ACF prix_a_partir_de de la fiche, sinon « Sur devis ») — 30/10/2026.
 * En bas de carte, juste au-dessus du lien : les prix restent alignés d'une carte à l'autre. */
.eb-modele__prix {
	margin-top: auto !important; padding-top: 0.75rem; border-top: 1px solid var(--eb-line);
	display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: 0.4rem;
}
.eb-modele__prix-label { font-size: var(--wp--preset--font-size--small); color: var(--eb-muted); }
.eb-modele__prix-montant { font-family: var(--wp--preset--font-family--goldman); font-weight: 700; font-size: 1.2rem; line-height: 1.2; color: var(--wp--preset--color--anthracite); }
.eb-modele__prix + .eb-modele__cta { margin-top: 0.5rem !important; }

/* Carte entière cliquable (home « Trois modèles », 06/11/2026) : le lien « Voir le … » est étiré sur toute la carte
 * (un seul lien, HTML valide). ::before car ::after porte déjà le trait orange. Pas dans l'éditeur : les blocs restent sélectionnables.
 * Les cartes de render.php (a.eb-modele--lien) sont déjà des liens et ne sont pas concernées. */
body:not(.editor-styles-wrapper) .eb-modele:has(.eb-modele__cta a) { position: relative; cursor: pointer; }
body:not(.editor-styles-wrapper) .eb-modele__cta a::before { content: ""; position: absolute; inset: 0; z-index: 2; }
body:not(.editor-styles-wrapper) .eb-modele__cta a:focus-visible { outline: none; }
body:not(.editor-styles-wrapper) .eb-modele:has(.eb-modele__cta a:focus-visible) { outline: 2px solid var(--eb-accent); outline-offset: 3px; }