/**
 * ArtisanArt – Insertions automatiques
 * Charte : vert #005C54 — textes #000000 — textes sur fond vert #FFFFFF.
 *
 * Les règles dépendant des réglages (colonnes et nombre de guides visibles
 * par appareil) sont ajoutées en ligne par le plugin, après cette feuille.
 */

.aa-block {
	--aa-green: #005C54;
	--aa-ink: #000000;
	--aa-white: #FFFFFF;
	position: relative;
	margin: 2.75rem 0;
	padding: 1.6rem;
	border-radius: 12px;
	clear: both;
	box-sizing: border-box;
}

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

.aa-block__label {
	position: absolute;
	top: -.7rem;
	left: 1.25rem;
	padding: .2rem .6rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	border-radius: 999px;
	line-height: 1.6;
}

/* Rendu comme un titre, mais balisé en paragraphe : un bloc inséré au milieu
   d'un article ne doit pas entrer dans le plan de titres de la page. */
.aa-block__title {
	margin: .35rem 0 .5rem;
	font-size: 1.35rem;
	line-height: 1.25;
	font-weight: 700;
}

.aa-block__intro { margin: 0 0 1.25rem; font-size: .95rem; line-height: 1.55; }
.aa-block__cta { margin: 1.35rem 0 0; text-align: center; }

/* --- Publicité : neutre, sans vert, pour ne jamais ressembler à un bloc guides --- */
.aa-block--ad { background: var(--aa-white); border: 1px dashed rgba(0, 0, 0, .22); }
.aa-block__label--ad {
	background: var(--aa-white);
	color: var(--aa-ink);
	border: 1px solid rgba(0, 0, 0, .25);
	font-weight: 600;
}

/* --- Bloc guides PROS : fond vert, textes blancs --- */
.aa-block--pro { background: var(--aa-green); color: var(--aa-white); border: 1px solid var(--aa-green); }
.aa-block--pro .aa-block__label { background: var(--aa-white); color: var(--aa-green); }
.aa-block--pro .aa-block__title,
.aa-block--pro .aa-block__intro { color: var(--aa-white); }
.aa-block--pro .aa-btn { background: var(--aa-white); color: var(--aa-green) !important; }

/* --- Bloc guides GRAND PUBLIC : fond blanc, cadre vert, textes noirs --- */
.aa-block--public { background: var(--aa-white); color: var(--aa-ink); border: 2px solid var(--aa-green); }
.aa-block--public .aa-block__label { background: var(--aa-green); color: var(--aa-white); }
.aa-block--public .aa-block__title,
.aa-block--public .aa-block__intro { color: var(--aa-ink); }
.aa-block--public .aa-btn { background: var(--aa-green); color: var(--aa-white) !important; }

/* --- Variante compacte --- */
.aa-block--compact { padding: 1.25rem; }
.aa-block--compact .aa-block__title { font-size: 1.15rem; }

/* --- Cartes guides --- */
.aa-guides {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aa-guide { margin: 0; }

.aa-guide__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--aa-white);
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: var(--aa-ink);
	transition: transform .15s ease, box-shadow .15s ease;
}

.aa-guide__link:hover,
.aa-guide__link:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }

/* 3/2 : les vignettes produit sont des photos au format paysage. L'aspect-ratio
   est porté par le conteneur, ce qui réserve la place et évite tout décalage. */
.aa-guide__media { position: relative; display: block; aspect-ratio: 3 / 2; background: #f2f2f2; overflow: hidden; }
.aa-guide__media img,
.aa-guide__media picture { width: 100%; height: 100%; object-fit: cover; display: block; }

.aa-guide__badge {
	position: absolute;
	top: .5rem;
	left: .5rem;
	padding: .12rem .45rem;
	background: var(--aa-green);
	color: var(--aa-white);
	font-size: .65rem;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 4px;
}

.aa-guide__body { display: flex; flex-direction: column; gap: .3rem; padding: .7rem .8rem .9rem; }
.aa-guide__title { font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--aa-ink); }
.aa-guide__price { font-size: .85rem; font-weight: 700; color: var(--aa-green); }

.aa-btn {
	display: inline-block;
	padding: .7rem 1.4rem;
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	border-radius: 8px;
	transition: opacity .15s ease;
}

.aa-btn:hover,
.aa-btn:focus-visible { opacity: .85; }

/* --- Encarts « Pour aller plus loin » écrits dans le contenu des articles ---
   Styles centralisés ici : les articles ne portent que des classes, une
   modification de charte se fait donc à un seul endroit. */
.encart-guide {
	--aa-green: #005C54;
	background: #FFFFFF;
	color: #000000;
	border: 1px solid var(--aa-green);
	border-left: 4px solid var(--aa-green);
	border-radius: 8px;
	padding: 1.3rem 1.45rem;
	margin: 2.25rem 0;
}

.encart-guide__kicker {
	margin: 0 0 .35rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--aa-green);
}

.encart-guide__title { margin: 0 0 .6rem; font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: #000000; }
.encart-guide__text { margin: 0 0 1rem; font-size: .95rem; line-height: 1.55; color: #000000; }
.encart-guide__cta { margin: 0; }

.encart-guide__btn {
	display: inline-block;
	padding: .75rem 1.3rem;
	background: var(--aa-green);
	color: #FFFFFF !important;
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	border-radius: 8px;
	transition: opacity .15s ease;
}

.encart-guide__btn:hover,
.encart-guide__btn:focus-visible { opacity: .85; color: #FFFFFF !important; }

@media (max-width: 480px) {
	.encart-guide { padding: 1.05rem 1.15rem; }
	.encart-guide__btn { display: block; text-align: center; }
	.aa-block { padding: 1.2rem; }
	.aa-guides { gap: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.aa-guide__link { transition: none; }
	.aa-guide__link:hover { transform: none; }
}