/* ==========================================================================
   famille.css — refonte pages famille produit / ville (retours Mathias, 23/09)
   Chargé APRÈS style.css et produits.css (inc/produits.php::apd_assets), sur
   TOUTES les pages : chaque règle est donc scopée à
   body.page-template-page-famille-php / body.page-template-page-ville-php
   pour ne jamais toucher single.php, l'accueil, les archives produit, etc.
   Ne redéfinit AUCUN jeton :root — n'utilise que les jetons de style.css.
   Mode clair uniquement (pas de prefers-color-scheme).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero vendeur (retour 1) : repères chiffrés/visuels + CTA devis visible.
   -------------------------------------------------------------------------- */

/* Correctif 23/09 (orchestrateur) : avec le sur-titre + repères + CTA en plus,
   le texte (aligné en bas, style.css) débordait vers le haut du hero réduit
   (--page, 380px), collant le sur-titre sous l'en-tête sticky sur un fond
   photo peu assombri par le voile à cet endroit — illisible. On redonne de la
   marge haute ET on sécurise le sur-titre avec sa propre ombre (comme le H1),
   au lieu de compter sur le seul assombrissement du voile. */
.ap-hero-famille .ap-hero-legendaire-corps{
	padding-top:64px;
}
.ap-hero-famille .ap-kicker{
	text-shadow:0 2px 8px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.9);
}
@media (max-width:640px){
	.ap-hero-famille .ap-hero-legendaire-corps{padding-top:40px}
}

.ap-hero-famille-reperes{
	display:flex;
	flex-wrap:wrap;
	gap:10px 18px;
	list-style:none;
	margin:18px 0 0;
	padding:0;
}
.ap-hero-famille-reperes li{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:14px;
	color:var(--lampe-fixe);
	text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.ap-hero-famille-reperes svg,
.ap-hero-famille-reperes .picto{
	width:16px;
	height:16px;
	flex:none;
	stroke:currentColor;
	stroke-width:1.5;
	fill:none;
}
.ap-hero-famille-reperes .picto path{stroke:currentColor;stroke-width:1.5;fill:none}

.ap-hero-famille-cta{
	display:inline-block;
	margin-top:22px;
	box-shadow:0 16px 30px -16px rgba(17,12,15,.65);
}

@media (max-width:640px){
	.ap-hero-famille-reperes{gap:8px 14px;margin-top:14px}
	.ap-hero-famille-reperes li{font-size:13px}
	.ap-hero-famille-cta{margin-top:16px;width:100%;text-align:center}
}

/* --------------------------------------------------------------------------
   2. Crédit photo discret, posé en coin de l'image (retour 2).
      <details>/<summary> natif : pas de JS, accessible clavier ET tactile.
      Base de positionnement = .ap-credit--hero (style.css, déjà prévue mais
      jusqu'ici inutilisée) ; on ne fait qu'AJOUTER le comportement discret.
   -------------------------------------------------------------------------- */
.ap-hero-credit-discret{
	z-index:2;
	opacity:.55;
	transition:opacity .2s ease;
	font-size:11px;
}
.ap-hero-credit-discret:hover,
.ap-hero-credit-discret:focus-within,
.ap-hero-credit-discret[open]{
	opacity:1;
}
.ap-hero-credit-discret summary{
	list-style:none;
	width:22px;
	height:22px;
	border-radius:999px;
	border:1px solid currentColor;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	background:rgba(17,12,15,.4);
	font:italic 700 12px/1 var(--police-lecture);
}
.ap-hero-credit-discret summary::-webkit-details-marker{display:none}
.ap-hero-credit-discret summary::marker{content:""}
.ap-hero-credit-discret summary:focus-visible{
	outline:2px solid var(--lampe-fixe);
	outline-offset:3px;
}
.ap-hero-credit-discret p{
	margin:6px 0 0;
	max-width:220px;
	text-align:right;
	background:rgba(17,12,15,.6);
	padding:5px 9px;
	font-size:11px;
	line-height:1.4;
	color:var(--lampe-fixe);
	margin-left:auto;
}

/* --------------------------------------------------------------------------
   3. Grille de cartes raisonnable (retour 3) : jamais de carte pleine/demi
      largeur, cartes à largeur FIXE (~280 px) quel que soit le nombre
      d'éléments, photos en 4:3 (au lieu du carré étiré par "carre").
      Correctif 23/09 (orchestrateur) : avec 2 cartes, une grille à 4
      colonnes fixes laissait la moitié droite vide sous un titre centré.
      Passage en flex centré : les cartes ne s'agrandissent jamais, et se
      centrent sous le titre quel que soit leur nombre (2, 3, 4, ou plus,
      avec retour à la ligne automatique). -------------------------------- */
body.page-template-page-famille-php .ap-grille--4{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
body.page-template-page-famille-php .ap-grille--4 > .ap-carte--famille{
	flex:0 1 280px;
	max-width:280px;
}
@media (max-width:640px){
	body.page-template-page-famille-php .ap-grille--4 > .ap-carte--famille{flex-basis:260px;max-width:260px}
}
body.page-template-page-famille-php .ap-carte--famille .ap-photo{
	aspect-ratio:4/3;
}

/* --------------------------------------------------------------------------
   4. Contenu de guide riche (retour 4) — scopé aux 2 gabarits familles/ville.
   -------------------------------------------------------------------------- */
body.page-template-page-famille-php .ap-contenu--riche,
body.page-template-page-ville-php .ap-contenu{
	counter-reset:ap-h2;
}

/* 4a. strong / em — DA §4 : Onest n'a pas d'italique réelle, l'emphase passe
   par la graisse 500, jamais une italique synthétique. */
body.page-template-page-famille-php .ap-contenu--riche strong,
body.page-template-page-ville-php .ap-contenu strong{
	color:var(--encre);
	font-weight:700;
	background:linear-gradient(180deg,transparent 58%, color-mix(in srgb, var(--accent) 20%, transparent) 58%);
	padding:0 .05em;
}
body.page-template-page-famille-php .ap-contenu--riche em,
body.page-template-page-ville-php .ap-contenu em{
	font-style:italic; /* italique demandé par Mathias 23/09 (R-0851) */
	font-weight:500;
	color:var(--sourde);
}

/* 4b. H2 numérotés avec filet d'accent (au lieu du filet du haut par défaut),
   la Fiche BAT (h2.ap-h2-simple) garde le rendu simple et n'est PAS comptée.
   Correctif 23/09 (orchestrateur) : le numéro était centré verticalement sur
   TOUTE la hauteur du h2 (via ::before absolu + flex), donc à cheval sur le
   filet au milieu d'un titre qui passe à la ligne — effet « texte barré ».
   Redesign : le filet devient la bordure du h2 lui-même (une ligne simple,
   ne se centre sur rien), et le numéro est posé AU-DESSUS du texte, dans une
   bande dédiée (padding-top) — aucune superposition possible. */
body.page-template-page-famille-php .ap-contenu--riche > h2:not(.ap-h2-simple),
body.page-template-page-ville-php .ap-contenu > h2:not(.ap-h2-simple){
	counter-increment:ap-h2;
	position:relative;
	border-top:0;
	border-left:3px solid var(--accent);
	padding-top:26px;
	padding-left:16px;
	padding-bottom:2px;
}
body.page-template-page-famille-php .ap-contenu--riche > h2:not(.ap-h2-simple)::before,
body.page-template-page-ville-php .ap-contenu > h2:not(.ap-h2-simple)::before{
	content:counter(ap-h2,decimal-leading-zero);
	display:block;
	position:absolute;
	top:2px;
	left:16px;
	line-height:1;
	font-family:var(--police-lecture);
	font-weight:700;
	font-size:13px;
	letter-spacing:.03em;
	color:var(--accent);
}
@media (max-width:640px){
	body.page-template-page-famille-php .ap-contenu--riche > h2:not(.ap-h2-simple),
	body.page-template-page-ville-php .ap-contenu > h2:not(.ap-h2-simple){padding-top:24px;padding-left:14px}
	body.page-template-page-famille-php .ap-contenu--riche > h2:not(.ap-h2-simple)::before,
	body.page-template-page-ville-php .ap-contenu > h2:not(.ap-h2-simple)::before{left:14px}
}

/* 4c. Listes = infographie à cartes (jamais des puces nues). N'affecte que
   les listes sans classe (les listes outillées : nuancier, sommaire, étape
   devis... portent toutes déjà une classe et restent inchangées). */
body.page-template-page-famille-php .ap-contenu--riche ul:not([class]),
body.page-template-page-famille-php .ap-contenu--riche ol:not([class]),
body.page-template-page-ville-php .ap-contenu ul:not([class]),
body.page-template-page-ville-php .ap-contenu ol:not([class]){
	list-style:none;
	margin:1.4em 0;
	padding-left:0;
	display:grid;
	gap:10px;
}
body.page-template-page-famille-php .ap-contenu--riche ul:not([class]) li,
body.page-template-page-ville-php .ap-contenu ul:not([class]) li{
	position:relative;
	background:var(--plaque);
	border:1px solid var(--filet);
	padding:12px 16px 12px 38px;
	margin:0;
}
body.page-template-page-famille-php .ap-contenu--riche ul:not([class]) li::before,
body.page-template-page-ville-php .ap-contenu ul:not([class]) li::before{
	content:"";
	position:absolute;
	left:16px;
	top:19px;
	width:8px;
	height:8px;
	background:var(--accent);
}
body.page-template-page-famille-php .ap-contenu--riche ol:not([class]),
body.page-template-page-ville-php .ap-contenu ol:not([class]){
	counter-reset:ap-li;
}
body.page-template-page-famille-php .ap-contenu--riche ol:not([class]) li,
body.page-template-page-ville-php .ap-contenu ol:not([class]) li{
	counter-increment:ap-li;
	position:relative;
	background:var(--plaque);
	border:1px solid var(--filet);
	padding:12px 16px 12px 48px;
	margin:0;
}
body.page-template-page-famille-php .ap-contenu--riche ol:not([class]) li::before,
body.page-template-page-ville-php .ap-contenu ol:not([class]) li::before{
	content:counter(ap-li);
	position:absolute;
	left:14px;
	top:10px;
	width:22px;
	height:22px;
	border-radius:999px;
	background:var(--encre);
	color:var(--fond);
	font-family:var(--police-boitier);
	font-size:12px;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* 4d. Encadrés « à retenir » : tout blockquote du contenu (bloc Gutenberg
   natif « Citation ») devient un encadré repère, jamais une citation grise. */
body.page-template-page-famille-php .ap-contenu--riche blockquote,
body.page-template-page-ville-php .ap-contenu blockquote{
	background:var(--plaque);
	border:1px solid var(--filet);
	border-left:4px solid var(--accent);
	padding:18px 22px;
	margin:28px 0;
}
body.page-template-page-famille-php .ap-contenu--riche blockquote::before,
body.page-template-page-ville-php .ap-contenu blockquote::before{
	content:"À retenir";
	display:block;
	font-family:var(--police-boitier);
	font-size:12px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--accent);
	margin-bottom:8px;
}
body.page-template-page-famille-php .ap-contenu--riche blockquote p:last-child,
body.page-template-page-ville-php .ap-contenu blockquote p:last-child{
	margin-bottom:0;
}

/* 4e. Figures avec légende : traits de coupe (procédé 3) sur les images du
   corps de texte, comme sur les cartes du reste du site. */
body.page-template-page-famille-php .ap-contenu--riche figure,
body.page-template-page-ville-php .ap-contenu figure{
	position:relative;
	background:var(--plaque);
}
body.page-template-page-famille-php .ap-contenu--riche figure::before,
body.page-template-page-ville-php .ap-contenu figure::before{
	content:"";
	position:absolute;
	inset:4px;
	pointer-events:none;
	background:
		linear-gradient(var(--filet),var(--filet)) top left/10px 1.5px no-repeat,
		linear-gradient(var(--filet),var(--filet)) top left/1.5px 10px no-repeat,
		linear-gradient(var(--filet),var(--filet)) top right/10px 1.5px no-repeat,
		linear-gradient(var(--filet),var(--filet)) top right/1.5px 10px no-repeat,
		linear-gradient(var(--filet),var(--filet)) bottom left/10px 1.5px no-repeat,
		linear-gradient(var(--filet),var(--filet)) bottom left/1.5px 10px no-repeat,
		linear-gradient(var(--filet),var(--filet)) bottom right/10px 1.5px no-repeat,
		linear-gradient(var(--filet),var(--filet)) bottom right/1.5px 10px no-repeat;
}

/* 4f. Points forts / Points faibles — bloc produit par ap_famille_html_riche()
   (page-famille.php uniquement). Couleurs DA-conformes : argon = information
   positive, accent = point de vigilance (jamais le vert --conforme, réservé
   au résultat du calculateur TLPE, DA §3). */
.ap-points-forts-faibles{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
	margin:2em 0;
}
.ap-points-colonne{
	background:var(--plaque);
	border:1px solid var(--filet);
	padding:20px 22px;
}
.ap-points-colonne h3{
	font-family:var(--police-boitier);
	font-size:17px;
	margin:0 0 14px;
	padding-bottom:10px;
	border-bottom:2px solid var(--filet);
}
.ap-points-colonne--forts{border-top:3px solid var(--argon)}
.ap-points-colonne--forts h3{color:var(--argon)}
.ap-points-colonne--faibles{border-top:3px solid var(--accent)}
.ap-points-colonne--faibles h3{color:var(--accent)}
.ap-points-colonne ul:not([class]) li,
.ap-points-colonne ol:not([class]) li{
	background:var(--plaque-haute);
}
.ap-points-colonne > :last-child{margin-bottom:0}
@media (max-width:700px){
	.ap-points-forts-faibles{grid-template-columns:1fr}
}

/* 4g. Tableau → cartes (page-famille.php, ap_famille_html_riche()). Zéro
   <table> à l'écran (DA §9), même si un contenu en apporte un par accident. */
.ap-tableau-cartes{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
	gap:14px;
	margin:1.6em 0;
}
.ap-tableau-carte{
	background:var(--plaque);
	border:1px solid var(--filet);
	padding:14px 16px;
	display:grid;
	gap:8px;
}
.ap-tableau-carte-ligne{
	display:flex;
	justify-content:space-between;
	gap:12px;
	font-size:14.5px;
	border-bottom:1px solid var(--filet);
	padding-bottom:6px;
}
.ap-tableau-carte-ligne:last-child{border-bottom:0;padding-bottom:0}
.ap-tableau-carte-ligne .libelle{color:var(--sourde)}
.ap-tableau-carte-ligne .valeur{color:var(--encre);font-weight:600;text-align:right}