/* ==========================================================================
   AquaLowtech — Composants partagés (articles, hub, fiches, comparateur)
   Identité visuelle commune : vert #2d7d46, fond clair #e8f4ec, bordure #d4e8d0.
   Voir inc/composants.php (markup) et assets/js/accordeon.js (comportement).
   ========================================================================== */

/* ── Jetons de design : SOURCE UNIQUE des couleurs, ombres et rayons ──────
   Chargé sur toutes les pages (functions.php). Les jeux locaux historiques
   (--hub-*, --aqua-*, --cmp-*, --nour-*, --rp-*) pointent désormais ici :
   pour changer une couleur de marque, modifier le jeton ci-dessous uniquement. */
:root {
	/* Verts */
	--aq-vert:              #2d7d46; /* principal : boutons, liens d'action (5,08:1 sur blanc) */
	--aq-vert-survol:       #235f35; /* survol des éléments verts (7,61:1) */
	--aq-vert-texte:        #276e3d; /* texte vert sur fond vert pâle (5,49:1) */
	--aq-vert-profond:      #1f5c38; /* titres de section, texte fort */
	--aq-vert-pale:         #e8f4ec; /* fonds de badges, survols, pastilles */
	--aq-vert-moyen:        #a8d5b5; /* bordure au survol */
	--aq-bordure:           #d4e8d0; /* bordure standard des cartes et blocs */
	--aq-fond-doux:         #fafcfa; /* corps d'accordéon, zones secondaires */

	/* Textes */
	--aq-texte:             #1a1a1a;
	--aq-texte-secondaire:  #56675b; /* 6,02:1 sur blanc */

	/* Oranges : CTA de conversion (accessible) et signal (jamais pour du texte courant) */
	--aq-orange-cta:        #b85a0e; /* 4,66:1 avec texte blanc */
	--aq-orange-cta-survol: #9f4e0c; /* même assombrissement que #f2882b → #d9721c ; 5,88:1 */
	--aq-orange:            #e07b00; /* verdict orange, icônes d'alerte */
	--aq-orange-pale:       #fff3cd;

	/* Rouge, bleu */
	--aq-rouge:             #c0392b;
	--aq-rouge-pale:        #f8d7da;
	--aq-bleu:              #1a6b8a;
	--aq-bleu-pale:         #e3f2f9;

	/* Relief */
	--aq-ombre-faible:      0 2px 8px rgba(45, 125, 70, 0.06);
	--aq-ombre:             0 4px 20px rgba(45, 125, 70, 0.12);
	--aq-ombre-forte:       0 8px 40px rgba(45, 125, 70, 0.18);
	--aq-ombre-bouton:      0 3px 12px rgba(45, 125, 70, 0.25);

	/* Rayons */
	--aq-rayon:             12px; /* cartes, blocs, boutons rectangulaires, champs */
	--aq-rayon-grand:       16px; /* grands blocs */
	--aq-rayon-pilule:      50px; /* boutons et étiquettes en pilule */
}

/* ── Titre de section : pastille + titre + séparateur ───────────────────── */

.aq-titre {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	font-family: var(--font-heading, Georgia, serif);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--aq-vert-profond);
}

.aq-titre__icone {
	flex: 0 0 2.25rem;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--aq-vert-pale);
	border: 1px solid var(--aq-bordure);
	font-size: 1.05rem;
	line-height: 1;
}

.aq-titre__icone[data-icone]::before { content: attr(data-icone); }

.aq-titre__texte { flex: 0 1 auto; min-width: 0; }

.aq-titre::after {
	content: "";
	flex: 1 1 1.5rem;
	min-width: 1.5rem;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--aq-bordure), rgba(212, 232, 208, 0));
}

.aq-titre--petit { font-size: 1.05rem; margin-bottom: 0.9rem; font-family: var(--font-main, sans-serif); }
.aq-titre--petit .aq-titre__icone { flex-basis: 1.9rem; width: 1.9rem; height: 1.9rem; font-size: 0.9rem; }

/* ── Badges (famille hub-badge / aqua-tag) ─────────────────────────────── */

.aq-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	width: fit-content;
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	background: var(--aq-vert-pale);
	border: 1px solid var(--aq-bordure);
	color: var(--aq-vert-texte);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Catégorie : même rendu que .hub-badge--vert des cartes du Hub. */
.aq-badge--categorie {
	background: #d4edda;
	border-color: transparent;
	border-radius: 10px;
	color: #155724;
	padding: 0.2rem 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.7rem;
	font-weight: 700;
}

/* ── Boutons : 3 niveaux ───────────────────────────────────────────────── */

.aq-btn,
a.aq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.7rem 1.35rem;
	border: 2px solid transparent;
	border-radius: 50px;
	font-family: var(--font-main, sans-serif);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

/* Primaire : l'action principale d'une zone (une seule par bloc). */
a.aq-btn--primaire,
.aq-btn--primaire { background: var(--aq-vert); border-color: var(--aq-vert); color: #fff; box-shadow: 0 3px 12px rgba(45, 125, 70, 0.25); }
a.aq-btn--primaire:hover,
a.aq-btn--primaire:focus-visible,
.aq-btn--primaire:hover { background: var(--aq-vert-texte); border-color: var(--aq-vert-texte); color: #fff; transform: translateY(-1px); }

/* Secondaire : action utile mais non prioritaire. */
a.aq-btn--secondaire,
.aq-btn--secondaire { background: #fff; border-color: var(--aq-vert); color: var(--aq-vert-texte); }
a.aq-btn--secondaire:hover,
a.aq-btn--secondaire:focus-visible,
.aq-btn--secondaire:hover { background: var(--aq-vert-pale); color: var(--aq-vert-profond); }

/* Discret : action annexe (partage…). */
a.aq-btn--discret,
.aq-btn--discret { background: transparent; border-color: var(--aq-bordure); color: var(--aq-vert-texte); font-weight: 600; font-size: 0.88rem; min-height: 40px; padding: 0.45rem 0.95rem; }
a.aq-btn--discret:hover,
a.aq-btn--discret:focus-visible,
.aq-btn--discret:hover { background: var(--aq-vert-pale); border-color: var(--aq-vert-moyen); color: var(--aq-vert-profond); }

.aq-btn:focus-visible { outline: 3px solid var(--aq-vert); outline-offset: 2px; }

/* ── Accordéon FAQ ─────────────────────────────────────────────────────── */

.aq-acc {
	background: #fff;
	border: 1px solid var(--aq-bordure);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(45, 125, 70, 0.06);
}

.aq-acc__item + .aq-acc__item { border-top: 1px solid var(--aq-bordure); }

/* Intégré : posé au bas d'une carte existante (Hub, comparateur) — un seul cadre. */
.aq-acc--integre { margin-top: 1.25rem; border: 0; border-top: 1px solid var(--aq-bordure); border-radius: 0; box-shadow: none; }
.cmp-faq .aq-acc--integre { margin: 0 -1.5rem -1.5rem; border-radius: 0 0 12px 12px; }

.aq-acc__titre { margin: 0; padding: 0; font: inherit; }
.aq-acc__titre::before, .aq-acc__titre::after { content: none; } /* neutralise d'anciens décors de h3 */

.aq-acc__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	margin: 0;
	padding: 1rem 1.5rem;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: var(--aq-texte);
	font-family: var(--font-main, sans-serif);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s;
}

.aq-acc__btn:hover,
.aq-acc__btn[aria-expanded="true"] { background: var(--aq-vert-pale); }
.aq-acc__btn:focus-visible { outline: 2px solid var(--aq-vert); outline-offset: -2px; }

/* Icône + qui devient − (deux barres, la verticale se replie). */
.aq-acc__icone { position: relative; flex: 0 0 1.1rem; width: 1.1rem; height: 1.1rem; }
.aq-acc__icone::before,
.aq-acc__icone::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: var(--aq-vert);
	transition: transform 0.28s ease;
}
.aq-acc__icone::after { transform: rotate(90deg); }
.aq-acc__btn[aria-expanded="true"] .aq-acc__icone::after { transform: rotate(0deg); }

/* Sans JavaScript, tout est ouvert ; le repli n'existe qu'une fois le script actif. */
.aq-acc__panneau { display: grid; grid-template-rows: 1fr; }
.aq-acc--js .aq-acc__panneau { grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; }
.aq-acc--js .aq-acc__item.is-ouvert .aq-acc__panneau { grid-template-rows: 1fr; }

.aq-acc__contenu { min-height: 0; overflow: hidden; }
/* Replié : retiré de l'arbre d'accessibilité après l'animation (reste dans le HTML). */
.aq-acc--js .aq-acc__contenu { visibility: hidden; transition: visibility 0s linear 0.28s; }
.aq-acc--js .aq-acc__item.is-ouvert .aq-acc__contenu { visibility: visible; transition-delay: 0s; }

.aq-acc__corps {
	padding: 1rem 1.5rem 1.25rem;
	background: var(--aq-fond-doux);
	color: #2c3e50;
	font-size: 0.92rem;
	line-height: 1.7;
	overflow-wrap: break-word;
}
.aq-acc__corps > :first-child { margin-top: 0; }
.aq-acc__corps > :last-child { margin-bottom: 0; }
.aq-acc__corps p { margin: 0 0 0.75rem; }
.aq-acc__corps a { color: var(--aq-vert-texte); font-weight: 600; text-decoration: underline; }

@media (max-width: 600px) {
	.aq-acc__btn { padding: 0.9rem 1.1rem; font-size: 0.92rem; }
	.aq-acc__corps { padding: 0.9rem 1.1rem 1.1rem; }
	.aq-titre { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.aq-acc--js .aq-acc__panneau, .aq-acc__icone::before, .aq-acc__icone::after { transition: none; }
}

/* À l'impression, les réponses sont dépliées. */
@media print {
	.aq-acc--js .aq-acc__panneau { grid-template-rows: 1fr; }
	.aq-acc--js .aq-acc__contenu { visibility: visible; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARTES ESPÈCES (aqua_cartes_especes) — venaient de methode.css, partagées
   depuis 2026-09-19 entre /methode-low-tech/ et /guides-debutants/.
   ───────────────────────────────────────────────────────────────────────────── */
.plants-species {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.species-card {
    background-color: white;
    padding: 1rem;
    border-radius: var(--aq-rayon);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Variante 4 cartes : même carte, une colonne de plus */
.plants-species--4 {
    grid-template-columns: repeat(4, 1fr);
}

.species-card__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--aq-rayon);
    margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
    .plants-species,
    .plants-species--4 {
        grid-template-columns: 1fr;
    }
}