/* ip-fiche-eco — la planche, la grille, le dossier.
 *
 * ⭐ La grammaire est celle de la maison : traits de coupe DÉTACHÉS (ils ne
 *    touchent jamais la limite et partent vers l'extérieur), repères de calage
 *    en CROIX dans un cercle. ⛔ Les équerres collées au coin sont fausses —
 *    erreur relevée par Christophe le 02/09.
 * ⚠ Tout est préfixé `.ipeco` : cette feuille ne peut pas déteindre sur la
 *    fiche textile, dont le CSS vit dans une autre extension.
 */

.ipeco {
	--ipeco-marge: 34px;
	--ipeco-ecart: calc( var( --ipeco-marge ) * 0.13 );
	--ipeco-long:  calc( var( --ipeco-marge ) * 0.42 );
	display: grid;
	gap: 22px;
}

/* ---------- le visuel ---------- */

.ipeco-visuel { max-width: 560px; }

.ipeco-pose {
	position: relative;
	padding: var( --ipeco-marge );
	border: 1px solid var( --ip-encre, #1d2327 );
	background: var( --ip-papier-carte, #fbfaf7 );
	min-height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ipeco-photo { display: block; width: 100%; height: auto; }
/* ⛔⛔ SANS CETTE LIGNE, `photo.hidden = true` NE CACHE RIEN.
   Mesure le 13/09/2026 au navigateur, puis confirmee de deux cotes :
   la declaration AUTEUR `display:block` ci-dessus l emporte sur le style
   par defaut de l attribut `[hidden]`, qui n est qu une regle du
   navigateur. Resultat a l ecran, sur une fiche dont le coloris n a pas
   d image : une boite de 139 x 81 px affichant l ICONE D IMAGE CASSEE et
   le TEXTE ALTERNATIF EN CLAIR, au milieu de la fiche.
   Ampleur mesuree : 1 354 fiches eco publiees sur 1 369.
   ⭐ Le remede etait deja ecrit — en COMMENTAIRE — dans ipeco.js l. 152.
   ⚠ ET CE QU ELLE NE REGLE PAS : le coloris HORS BANDE. `ipeco.js` pilote
   `.ipeco-photo` depuis `_ip_eco_medias` ; le hors-bande porte sur l image
   de la PLANCHE, pilotee par la bande. Deux images, deux sources. */
.ipeco-photo[hidden] { display: none; }

.ipeco-sans-photo {
	margin: 0;
	font-family: var( --ip-mono, ui-monospace, monospace );
	font-size: 12px;
	letter-spacing: .04em;
	color: var( --ip-filigrane, #8e8a7d );
	text-align: center;
}

/* Les 8 traits de coupe, détachés du coin de `--ipeco-ecart`. */
.ipeco-c { position: absolute; width: 0; height: 0; pointer-events: none; }
.ipeco-c::before,
.ipeco-c::after { content: ""; position: absolute; background: var( --ip-encre, #1d2327 ); }
.ipeco-c::before { height: 1px; width: var( --ipeco-long ); }
.ipeco-c::after  { width: 1px; height: var( --ipeco-long ); }

.ipeco-c--hg { top: 0; left: 0; }
.ipeco-c--hg::before { top: 0; right: var( --ipeco-ecart ); }
.ipeco-c--hg::after  { left: 0; bottom: var( --ipeco-ecart ); }
.ipeco-c--hd { top: 0; right: 0; }
.ipeco-c--hd::before { top: 0; left: var( --ipeco-ecart ); }
.ipeco-c--hd::after  { right: 0; bottom: var( --ipeco-ecart ); }
.ipeco-c--bg { bottom: 0; left: 0; }
.ipeco-c--bg::before { bottom: 0; right: var( --ipeco-ecart ); }
.ipeco-c--bg::after  { left: 0; top: var( --ipeco-ecart ); }
.ipeco-c--bd { bottom: 0; right: 0; }
.ipeco-c--bd::before { bottom: 0; left: var( --ipeco-ecart ); }
.ipeco-c--bd::after  { right: 0; top: var( --ipeco-ecart ); }

/* Le repère de calage : une CROIX dans un cercle, les deux traits. */
.ipeco-cal {
	position: absolute;
	left: 50%;
	width: 11px; height: 11px;
	transform: translateX( -50% );
	pointer-events: none;
	border: 1px solid var( --ip-bleu, #2440C8 );
	border-radius: 50%;
}
.ipeco-cal::before,
.ipeco-cal::after { content: ""; position: absolute; background: var( --ip-bleu, #2440C8 ); }
.ipeco-cal::before { left: 50%; top: -4px; bottom: -4px; width: 1px; transform: translateX( -50% ); }
.ipeco-cal::after  { top: 50%; left: -4px; right: -4px; height: 1px; transform: translateY( -50% ); }
.ipeco-cal--h { top: calc( -1 * ( var( --ipeco-ecart ) + 14px ) ); }
.ipeco-cal--b { bottom: calc( -1 * ( var( --ipeco-ecart ) + 14px ) ); }

.ipeco-legende {
	margin: 8px 0 0;
	font-family: var( --ip-mono, ui-monospace, monospace );
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	/* ⭐ 30/09/2026 (1.1.7) — la légende ouvre le choix depuis que la photo l'a quitté. Le filigrane donnait 1,13 : 1 sur le
	   fond du choix (mesuré) : la marque de fourniture ne se lisait pas. La couleur de la note voisine : 6,06 : 1. */
	color: var( --ip-encre-douce, #55585c );
}

/* ---------- les choix ---------- */

.ipeco-titre {
	margin: 0 0 6px;
	font-family: var( --ip-mono, ui-monospace, monospace );
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --ip-encre, #1d2327 );
}

.ipeco-note {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var( --ip-encre-douce, #55585c );
}

.ipeco-coloris { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.ipeco-coloris select { min-height: 44px; flex: 1 1 auto; min-width: 0; }
.ipeco-etiquette { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

.ipeco-pastille {
	flex: 0 0 auto;
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 1px solid var( --ip-filigrane, #8e8a7d );
}

.ipeco-grille { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.ipeco-grille th,
.ipeco-grille td { padding: 7px 8px; border-bottom: 1px solid var( --ip-filigrane, #e2e0d9 ); text-align: left; font-size: 14px; }
.ipeco-grille thead th {
	font-family: var( --ip-mono, ui-monospace, monospace );
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.ipeco-grille input[type="number"] { width: 5.5em; min-height: 44px; }

.ipeco-prix { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ⛔ Une taille que le coloris ne produit pas : visiblement éteinte, et son
   champ est réellement `disabled` — pas seulement grisé. */
.ipeco-absente { opacity: .42; }
.ipeco-absente input { cursor: not-allowed; }

.ipeco-total {
	margin: 0 0 10px;
	padding: 10px 12px;
	background: var( --ip-papier-carte, #f6f5f1 );
	border-left: 2px solid var( --ip-bleu, #2440C8 );
	font-size: 14px;
	line-height: 1.5;
}

.ipeco-regime {
	margin: 0 0 14px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --ip-encre-douce, #55585c );
}

.ipeco-bouton { min-height: 44px; }

/* ---------- le dossier ---------- */

.ipeco-dossier { margin: 26px 0 0; }
.ipeco-desc { margin: 0 0 18px; font-size: 15px; line-height: 1.65; }

.ipeco-colonnes { display: grid; gap: 26px; }
@media ( min-width: 720px ) { .ipeco-colonnes { grid-template-columns: 1fr 1fr; gap: 34px; } }

.ipeco-h3 {
	margin: 0 0 8px;
	font-family: var( --ip-mono, ui-monospace, monospace );
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding-bottom: 5px;
	border-bottom: 1px solid var( --ip-filigrane, #e2e0d9 );
}

.ipeco-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 22px; font-size: 13.5px; }
.ipeco-dl dt { color: var( --ip-encre-douce, #55585c ); }
.ipeco-dl dd { margin: 0; }

.ipeco-allegations,
.ipeco-labels { margin: 0 0 16px; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.ipeco-labels { list-style: none; padding-left: 0; }
.ipeco-labels li { padding: 3px 0; }


/* ---------- 29/09/2026 : le dossier ne touche plus le bord ----------
   `section.ipeco-dossier` vit HORS de `.ip-wrap`, directement dans `main` : il
   n hérite donc pas de la gouttière de 16 px que garde tout le reste de la page,
   et sous 1 280 px il était collé au bord de l écran (mesuré le 28/09, point A du
   lot du soir). Il la reçoit ici.
   ⭐ Au-dessus de 1 280 px, `ip-apercu-largeur` 1.0.3 le range dans la colonne du
   contenu (48 px) : sa règle est plus spécifique (`body.ipal-large main > …`), elle
   passe devant, et rien ne change là-haut. */
@media ( max-width: 1279.98px ) {
	.ipeco-dossier { box-sizing: border-box; padding-inline: 16px; }
}