/* ==========================================================================
   IP — FICHE TEXTILE
   Chaque bloc porte son motif. Un élément dont on connaît la raison ne se
   simplifie pas par accident.
   ⚠ Aucune ombre portée : la charte l interdit. La profondeur vient de la
     superposition et des filets. Angles : 2 px au maximum.
   ========================================================================== */

.ipft-visuel {
  position: relative;
  max-width: 560px;
}

/* ── LA POSE ───────────────────────────────────────────────────────────────
   Trait de COUPE noir plein autour de la pose, et 8 traits DÉTACHÉS aux
   angles. ⛔ Détachés, jamais des équerres : un trait de coupe ne touche
   JAMAIS la limite de coupe — c est l écart qui le rend lisible comme repère.
   Ratio du gabarit : écart 0,13 × marge, longueur 0,42 × marge.            */

.ipft-pose {
  --ipft-marge: 34px;
  --ipft-ecart: calc(var(--ipft-marge) * 0.13);
  --ipft-long:  calc(var(--ipft-marge) * 0.42);
  position: relative;
  margin: var(--ipft-marge);
  border: 1px solid var(--ip-encre, #16150F);
  background: var(--ip-papier-carte, #FFFDF8);
}

.ipft-c {
  position: absolute;
  width: 0; height: 0;
  pointer-events: none;
}
.ipft-c::before,
.ipft-c::after {
  content: "";
  position: absolute;
  background: var(--ip-encre, #16150F);
}
.ipft-c::before { height: 1px; width: var(--ipft-long); }
.ipft-c::after  { width: 1px; height: var(--ipft-long); }

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

/* Les repères de calage, au milieu des bords — comme sur une vraie feuille. */
.ipft-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%;
}
.ipft-cal::before {
  content: "";
  position: absolute;
  left: 50%; top: -4px; bottom: -4px;
  width: 1px;
  background: var(--ip-bleu, #2440C8);
  transform: translateX(-50%);
}
/* ⛔ LE TRAIT HORIZONTAL N AVAIT JAMAIS ETE ECRIT. Corrige le 05/09/2026.
   Un repere de calage est une CROIX dans un cercle : sans les deux traits,
   c est une pastille. Le diagnostic du 04/09 cherchait une cause en SVG
   (viewBox, stroke-width, sous-pixel) : il n y a aucun SVG ici, c est du
   CSS pur, et il ne manquait pas un reglage — il manquait une declaration.
   ⭐ Symetrique exact du ::before, aux axes pres. */
.ipft-cal::after {
  content: "";
  position: absolute;
  top: 50%; left: -4px; right: -4px;
  height: 1px;
  background: var(--ip-bleu, #2440C8);
  transform: translateY(-50%);
}
.ipft-cal--h { top: calc(-1 * (var(--ipft-ecart) + 14px)); }
.ipft-cal--b { bottom: calc(-1 * (var(--ipft-ecart) + 14px)); }

/* La scène : un bouton, parce que cliquer FAIT TOURNER le vêtement.
   ⛔ Le fournisseur donne plusieurs vues par coloris : une seule photo
      gâcherait ce qu il donne. */
.ipft-scene {
  display: block;
  width: 100%;
  margin: 0; padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  aspect-ratio: 2 / 3;
}
.ipft-scene:focus-visible {
  outline: 2px solid var(--ip-bleu, #2440C8);
  outline-offset: 2px;
}
.ipft-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  /* pas de transition de couleur : le changement de coloris est un changement
     de SOURCE, il doit être instantané pour se lire comme une information */
}

/* ── LES VIGNETTES ─────────────────────────────────────────────────────── */

.ipft-vignettes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px var(--ipft-marge, 34px) 0;
}
.ipft-vig {
  width: 56px; height: 84px;
  padding: 0;
  border: 1px solid var(--ip-filigrane, #E5DFD2);
  border-radius: 2px;
  background: var(--ip-papier-carte, #FFFDF8);
  cursor: pointer;
  overflow: hidden;
}
.ipft-vig[aria-current="true"] { border-color: var(--ip-encre, #16150F); border-width: 1.5px; }
.ipft-vig:focus-visible { outline: 2px solid var(--ip-bleu, #2440C8); outline-offset: 2px; }
.ipft-vig img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ── LE PIED DE PLANCHE ────────────────────────────────────────────────── */

.ipft-pied {
  margin: 16px var(--ipft-marge, 34px) 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(36, 64, 200, .75);   /* le PLI, jamais nommé */
}
.ipft-pied__nom {
  display: block;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.02em;
}
.ipft-pied__tech {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ip-graphite, #6F6B61);
}

/* ── LES CHOIX ─────────────────────────────────────────────────────────── */

.ipft-choix { margin: 0 0 24px; }
.ipft-groupe + .ipft-groupe { margin-top: 18px; }

.ipft-groupe__titre {
  font-family: var(--font-sans, Archivo, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin: 0 0 11px;
}

/* LE PLI — pointillé bleu entre deux groupes d options, À L INTÉRIEUR du bloc.
   ⛔ Il ne porte AUCUN libellé. Un trait se ressent ; un mot exigerait un savoir. */
.ipft-pli {
  display: block;
  height: 0;
  margin: 18px 0;
  border-top: 1px dashed rgba(36, 64, 200, .75);
}

/* Coloris : LE ROND ET LE NOM SUR LA MÊME LIGNE. */
.ipft-coloris { display: flex; flex-wrap: wrap; gap: 8px; }

.ipft-col {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;              /* cible tactile */
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--ip-filigrane, #E5DFD2);
  border-radius: 2px;
  background: var(--ip-papier, #F6F3EC);
  font-family: var(--font-sans, Archivo, system-ui, sans-serif);
  font-size: 14.5px;
  color: var(--ip-encre, #16150F);
  cursor: pointer;
}
.ipft-col:hover { border-color: var(--ip-encre, #16150F); }
.ipft-col:focus-visible { outline: 2px solid var(--ip-bleu, #2440C8); outline-offset: 2px; }
.ipft-col[aria-checked="true"] {
  border-color: var(--ip-bleu, #2440C8);
  border-width: 1.5px;
  background: var(--ip-bleu-wash, #ECEEFB);
  font-weight: 600;
}

/* ⛔ LE LISERÉ INTÉRIEUR : sans lui, « Ideal White » disparaît sur fond clair.
      C est le coloris le plus vendu. */
.ipft-col__rond {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ipft-teinte, #ccc);
  box-shadow: inset 0 0 0 2px var(--ip-papier-carte, #FFFDF8),
              inset 0 0 0 3px rgba(22, 21, 15, .28);
}

/* Taille : LE PICTO ET LA TAILLE SUR LA MÊME LIGNE, et LE PICTO GRANDIT. */
.ipft-tailles { display: flex; flex-wrap: wrap; gap: 8px; }

.ipft-taille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px; min-height: 44px;
  padding: 6px 13px;
  border: 1px solid var(--ip-filigrane, #E5DFD2);
  border-radius: 2px;
  background: var(--ip-papier, #F6F3EC);
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 13px;
  font-weight: 500;
  color: var(--ip-encre, #16150F);
  cursor: pointer;
}
.ipft-taille:hover { border-color: var(--ip-encre, #16150F); }
.ipft-taille:focus-visible { outline: 2px solid var(--ip-bleu, #2440C8); outline-offset: 2px; }
.ipft-taille[aria-checked="true"] {
  border-color: var(--ip-bleu, #2440C8);
  border-width: 1.5px;
  background: var(--ip-bleu-wash, #ECEEFB);
  font-weight: 600;
}

/* ⭐ Le picto grandit avec la taille : un S et un 3XL ne montrent pas la même
      silhouette. C est de l information, pas de la décoration. */
.ipft-taille__picto {
  display: inline-flex;
  align-items: flex-end;
  width: 26px; height: 26px;
  flex: 0 0 auto;
}
.ipft-taille__picto svg {
  display: block;
  width: calc(26px * var(--ipft-ech, 1));
  height: calc(26px * var(--ipft-ech, 1));
  margin: 0 auto;
  fill: currentColor;
  opacity: .72;
}
.ipft-taille[aria-checked="true"] .ipft-taille__picto svg { opacity: 1; }

.ipft-mannequin {
  margin: 11px 0 0;
  font-size: 13.5px;
  color: var(--ip-graphite, #6F6B61);
  max-width: 46ch;
}

/* ── LE DOSSIER ────────────────────────────────────────────────────────── */

.ipft-dossier { padding: 40px 0 8px; }

.ipft-dossier__accroche {
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.15;
  letter-spacing: -.02em;
  max-width: 34ch;                /* la contrainte fait l accroche */
  margin: 0 0 20px;
}

/* DEUX COLONNES FILETÉES. */
.ipft-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding-top: 18px;
  border-top: 1px solid var(--ip-filigrane, #E5DFD2);
}
.ipft-colonnes > * + * {
  border-left: 1px solid var(--ip-filigrane, #E5DFD2);
  padding-left: clamp(20px, 3vw, 40px);
}
@media (max-width: 780px) {
  .ipft-colonnes { grid-template-columns: 1fr; }
  .ipft-colonnes > * + * { border-left: 0; padding-left: 0; }
}

.ipft-col-texte p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.62; }

/* LA LETTRINE, bleue, sur le premier paragraphe. */
.ipft-lettrine::first-letter {
  float: left;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-weight: 700;
  font-size: 3.1em;
  line-height: .82;
  padding: 4px 8px 0 0;
  color: var(--ip-bleu, #2440C8);
}

.ipft-specs { margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 22px; }
.ipft-specs dt {
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ip-graphite, #6F6B61);
}
.ipft-specs dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; }

.ipft-labels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ipft-labels li {
  padding: 9px 12px;
  border: 1px solid var(--ip-filigrane, #E5DFD2);
  border-radius: 2px;
  font-size: 13.5px;
}
.ipft-labels strong { display: block; font-weight: 600; }
.ipft-labels span {
  display: block; margin-top: 2px;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: .06em;
  color: var(--ip-graphite, #6F6B61);
}

@media (prefers-reduced-motion: reduce) {
  .ipft-scene, .ipft-img { transition: none !important; }
}

/* ==========================================================================
   ⭐ LA GRILLE PAR TAILLES, DANS LA GRAMMAIRE DE LA MAISON — 04/09/2026.

   `ip-textile` porte le calcul, le panier et la validation ; il ne porte pas
   la charte, et c'est bien : il doit rester servable sur n'importe quel
   habillage. La mise en page maison vit donc ICI, avec le reste de la fiche.

   ⛔ Aucune règle ne change un COMPORTEMENT : ni l'ordre du clavier, ni ce qui
   est annoncé, ni ce qui est cliquable. Éteindre cette extension rend la
   grille nue — moins belle, aussi utilisable.
   ========================================================================== */

.ipft-choix--pilote .ipt-grille {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 15px;
}

/* ---- le coloris : rond + nom ------------------------------------------ */

.ipft-choix--pilote .ipt-coloris__intitule,
.ipft-choix--pilote .ipt-tailles__legende,
.ipft-choix--pilote .ipt-totaux__palier {
	font-family: var(--ip-mono, ui-monospace, monospace);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ip-graphite);
}

.ipft-choix--pilote .ipt-tailles__legende {
	text-transform: none;
	letter-spacing: 0;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
	padding: 0 0 12px;
}

.ipft-choix--pilote .ipt-liste__bouton {
	min-height: 44px;
	border: 1px solid var(--ip-filigrane);
	border-radius: 2px;
	background: var(--ip-papier);
	font-size: 14.5px;
	font-weight: 500;
}

.ipft-choix--pilote .ipt-liste__bouton:hover { border-color: var(--ip-encre); }

/* ⛔ LE LISERÉ INTÉRIEUR EST OBLIGATOIRE, ET IL N'EST PAS DÉCORATIF.
   Sans lui, « Blanc » — le coloris le plus vendu — a pour pastille un disque
   #EBEAFE posé sur un papier #F6F3EC : deux clairs voisins, donc RIEN à voir.
   L'anneau d'encre le détoure, et le liseré couleur papier empêche la teinte
   de se coller à l'anneau. Mesuré le 04/09 : la pastille livrée n'avait qu'un
   filet #E5DFD2, invisible sur ce fond. */
.ipft-choix--pilote .ipt-pastille {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid rgba( 22, 21, 15, 0.28 );
	box-shadow: inset 0 0 0 2px var(--ip-papier-carte);
}

.ipft-choix--pilote .ipt-liste__options {
	border: 1px solid var(--ip-encre);
	border-radius: 2px;
	background: var(--ip-papier-carte);
}

.ipft-choix--pilote .ipt-liste__option[aria-selected="true"] {
	background: var(--ip-bleu-wash);
	font-weight: 600;
}

.ipft-choix--pilote .ipt-liste__option { min-height: 40px; }

.ipft-choix--pilote .ipt-coloris__note {
	font-size: 12.5px;
	color: var(--ip-graphite);
	line-height: 1.5;
}

/* ---- le tableau tailles x quantités ----------------------------------- */

.ipft-choix--pilote .ipt-tailles {
	width: 100%;
	border-collapse: collapse;
	margin-top: 16px;
}

.ipft-choix--pilote .ipt-tailles th[scope="col"] {
	font-family: var(--ip-mono, ui-monospace, monospace);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ip-graphite);
	text-align: left;
	padding: 0 10px 9px 0;
	border-bottom: 1px solid var(--ip-filigrane);
}

.ipft-choix--pilote .ipt-tailles th[scope="col"]:last-child { text-align: right; padding-right: 0; }

.ipft-choix--pilote .ipt-tailles__ligne > * {
	padding: 6px 10px 6px 0;
	border-bottom: 1px solid var(--ip-filigrane);
	vertical-align: middle;
}

.ipft-choix--pilote .ipt-tailles__ligne:last-child > * { border-bottom: 0; }

.ipft-choix--pilote .ipt-tailles__ligne th[scope="row"] { text-align: left; font-weight: 400; }

.ipft-choix--pilote .ipt-tailles__ligne label {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 40px;
	font-family: var(--ip-mono, ui-monospace, monospace);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
}

/* Le picto grandit : sa hauteur suit le rang de la taille (--ipt-ech). */
.ipft-choix--pilote .ipt-taille__picto {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	color: var(--ip-graphite);
}

.ipft-choix--pilote .ipt-taille__picto svg {
	width: calc( 24px * var(--ipt-ech, 1) );
	height: calc( 24px * var(--ipt-ech, 1) );
	fill: currentColor;
}

.ipft-choix--pilote .ipt-tailles__ligne:has(.ipt-quantite:not([value=""])) .ipt-taille__picto { color: var(--ip-bleu); }

.ipft-choix--pilote .ipt-quantite {
	width: 84px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--ip-filigrane);
	border-radius: 2px;
	background: var(--ip-papier);
	font-family: var(--ip-mono, ui-monospace, monospace);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ip-encre);
	text-align: center;
}

.ipft-choix--pilote .ipt-quantite:hover { border-color: var(--ip-encre); }

.ipft-choix--pilote .ipt-pu {
	text-align: right;
	padding-right: 0;
	font-family: var(--ip-mono, ui-monospace, monospace);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--ip-encre);
}

.ipft-choix--pilote .ipt-pu--attente,
.ipft-choix--pilote .ipt-pu--sans { color: var(--ip-graphite); }

/* ---- les totaux -------------------------------------------------------- */

.ipft-choix--pilote .ipt-totaux {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px dashed rgba( 36, 64, 200, 0.85 );
}

.ipft-choix--pilote .ipt-totaux__ligne {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 3px 0;
	font-size: 14px;
	color: var(--ip-graphite);
}

.ipft-choix--pilote .ipt-totaux__ligne--fort {
	margin-top: 6px;
	padding-top: 9px;
	border-top: 1px solid var(--ip-filigrane);
	font-size: 16px;
	color: var(--ip-encre);
	font-weight: 600;
}

.ipft-choix--pilote .ipt-totaux__ligne > :last-child {
	font-family: var(--ip-mono, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
	color: var(--ip-encre);
	white-space: nowrap;
}

.ipft-choix--pilote .ipt-totaux__erreurs {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var(--ip-alerte, #C0341D);
	background: var(--ip-alerte-wash, rgba( 192, 52, 29, 0.06 ));
	font-size: 13.5px;
}

.ipft-choix--pilote .ipt-totaux__invite,
.ipft-choix--pilote .ipt-totaux__minimum {
	font-size: 13.5px;
	color: var(--ip-graphite);
}

/* ---- le bouton --------------------------------------------------------- */

.ipft-choix--pilote .ipt-grille__action { margin-top: 16px; }

.ipft-choix--pilote .ipt-ajouter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	border: 1.5px solid var(--ip-bleu);
	border-radius: 2px;
	background: var(--ip-bleu);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
}

.ipft-choix--pilote .ipt-ajouter:hover { background: var(--ip-bleu-press, #1E37AE); border-color: var(--ip-bleu-press, #1E37AE); }

.ipft-choix--pilote .ipt-grille :focus-visible {
	outline: 2px solid var(--ip-bleu);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ⚠ La légende du mannequin descend sous la grille : elle répond à « ça
   taille comment », donc elle se lit au moment où l'on saisit les tailles. */
.ipft-choix--pilote .ipft-mannequin { margin-top: 14px; }

@media ( max-width: 620px ) {
	.ipft-choix--pilote .ipt-quantite { width: 72px; }
	.ipft-choix--pilote .ipt-taille__picto { width: 22px; }
}