/* L'Encre Interdite — « La sélection » dans le cadre de la carte du café.
   Feuille à nous (pas une livraison Claude Design) : elle reprend les coordonnées
   de la fenêtre d'`ei-cadre.css` (calées sur cadre-cafe.png, 737×1055). Si l'image
   du cadre change, seules les quatre variables --ei-win-* sont à reprendre, ici
   comme là-bas.

   Une tuile = un cadre portrait + ses mots dessous. Dans la fenêtre : rien (le
   parchemin du dessin) quand la catégorie n'a pas d'image, l'image choisie sinon,
   recadrée en `object-fit: cover`. La tuile « Tout le catalogue » écrit dans le
   parchemin, à la manière de la carte de la boutique.

   LA DISPOSITION SUIT LA CONSOLE. Les cinq dispositions du socle
   (bnr_connect_universes_layouts(), blocks/style.css `bnr-univers--layout-*`)
   sont reprises une à une avec des cadres à la place des tuiles plates :
     ei-sel--mosaic   une grande, des petites — 4 colonnes, la tuile 1 en prend 2×2
     ei-sel--grid     grille, tuiles égales — 4 colonnes
     ei-sel--squares  grille de carrés — 4 cases carrées, le cadre centré dedans
     ei-sel--centered centrées sur la page — largeur fixe, rangées centrées
     ei-sel--auto3    l'automatique du site à trois tuiles — mosaïque 2fr 1fr 1fr
   (l'automatique à tout autre nombre = ei-sel--grid, comme le socle). */

/* ---------- La tuile : cadre, fenêtre, mots ---------- */
.ei-sel__tuile {
	display: block;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
/* Deux modèles de cadre, mêlés par le PHP. Chacun pose la géométrie de sa
   fenêtre et les couleurs de ses mots ; le reste des règles lit ces variables.
   Parchemin (cadre-cafe.png, 737×1055) : fenêtre claire, mots en or foncé.
   Nuit (fond-couverture.webp, 738×1055) : fond noir, fenêtre = la zone de texte
   de `.ei-carte` (inset 20 % 13 % 34 %, sous les roses, au-dessus de la bougie),
   mots clairs. */
.ei-sel__cadre {
	--ei-win-l: 22.8%;
	--ei-win-t: 9.1%;
	--ei-win-w: 67.3%;
	--ei-win-h: 69.8%;
	--ei-ratio: 737 / 1055;
	/* Sur le parchemin, l'or clair se lisait mal (retour Didier) : brun-or
	   foncé pour les mots, le sous-titre un ton plus clair, le filet plus sombre. */
	--ei-mot: #4A3414;
	--ei-mot-sous: #6B4E22;
	--ei-mot-hover: #6A1F22;
	--ei-cta: #2A1C14;
	--ei-filet: #9C7A3A;
	--ei-ombre: rgba(60, 32, 14, .38);
	position: relative;
	display: block;
	width: 100%;
	/* L'image du cadre ne fait que 737 px de large : au-delà, le dessin devient
	   mou. Un cadre plus large que sa colonne se centre. */
	max-width: 737px;
	margin-inline: auto;
	aspect-ratio: var(--ei-ratio);
	background: var(--ei-cadre-img) center / 100% 100% no-repeat;
	/* drop-shadow et non box-shadow : l'ombre suit le dessin (le cadre a des
	   bords noirs à angles vifs, mais aussi des roses qui en débordent). */
	filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55));
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
/* La géométrie de chaque cadre (fenêtre, ratio) arrive en style inline depuis le
   PHP (ei_selection_modeles()) ; la feuille ne porte que les deux jeux de
   couleurs, clair et sombre. Un cadre nouveau = une ligne PHP, rien ici. */
.ei-sel__cadre--fond-sombre {
	--ei-mot: #EADFC8;
	--ei-mot-sous: #CDA862;
	--ei-mot-hover: #CDA862;
	--ei-cta: #F4EBDC;
	--ei-filet: #CDA862;
	--ei-ombre: rgba(0, 0, 0, .55);
}
.ei-sel__tuile:hover .ei-sel__cadre,
.ei-sel__tuile:focus-visible .ei-sel__cadre {
	transform: translateY(-4px);
}
.ei-sel__tuile:focus-visible {
	outline: 2px solid #CDA862;
	outline-offset: 6px;
}
/* La fenêtre : transparente, c'est le parchemin du dessin qu'on voit quand elle
   est vide. L'arrondi en proportion, pour que le galbe tienne sur un écran étroit. */
.ei-sel__fen {
	position: absolute;
	left: var(--ei-win-l);
	top: var(--ei-win-t);
	width: var(--ei-win-w);
	height: var(--ei-win-h);
	/* border-box : WordPress ne le pose pas sur un span. Sans lui, les marges
	   internes des fenêtres à texte (7 % de chaque côté) s'ajoutaient à la
	   largeur — 88 % au lieu de 74 % —, la fenêtre débordait à droite et les mots,
	   centrés dans cette boîte trop large, partaient vers la droite. */
	box-sizing: border-box;
	display: block;
	overflow: hidden;
	background: transparent;
	border-radius: clamp(6px, 5%, 14px);
}
.ei-sel__fen--image img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Une image s'affiche comme une photographie de 1900 ----------
   Le tirage d'album de l'époque n'a pas de bord : le sujet est net au centre et
   se dissout dans le papier tout autour, sur les quatre côtés — pas seulement
   aux angles. C'est ce fondu-là, et non un rectangle aux coins adoucis.

   Trois choses le font ensemble ; une seule ne donne rien, on l'a appris sur la
   photo du café (`ei-cadre/ei-cadre-site.css`) :

   1. plus d'ombrage intérieur — ce `box-shadow` redessinait le rectangle, net,
      par-dessus tout fondu ;
   2. l'image nette s'éteint DEPUIS SON CENTRE. Le dégradé part tôt (à un tiers
      du rayon) et court jusqu'au bout : au milieu d'un bord il ne reste qu'un
      tiers d'opacité, et plus rien dans les angles ;
   3. une doublure floue dessous prend le relais sur toute la lisière : sans
      elle, l'image devient transparente mais garde son dessin jusqu'au bout, et
      la limite reste lisible (retour du 2026-10-19 sur le café : « je ne vois
      aucune différence »). Elle porte un flou proportionnel à la fenêtre —
      8 px sur une petite tuile seraient un voile, sur la grande un soupçon.

   ⚠️ LIRE LES RAYONS. Dans `radial-gradient(ellipse Rx Ry …)`, Rx est rapporté
   à la LARGEUR ENTIÈRE, pas à la demi-largeur : 50 % tombe pile sur le bord.
   À 62 %, le milieu d'un bord est à 0,81 du rayon et un coin à 1,14 — hors de
   l'ellipse, donc entièrement effacé. */
.ei-sel__fen--image::after {
	content: none;
}
/* La fenêtre se déclare conteneur, pour que le flou de la doublure se mesure à
   elle plutôt qu'à la page. */
.ei-sel__fen--image {
	container-type: inline-size;
}

/* DEUX FONDUS CROISÉS PLUTÔT QU'UNE ELLIPSE. Une ellipse ne peut pas s'éteindre
   pile au bord d'un rectangle : réglée pour effacer les angles, elle laisse le
   milieu des bords à demi opaque, et ce qui reste est tranché net par le
   découpage de la fenêtre — un rectangle fantôme se dessinait tout autour de
   l'image. Deux dégradés linéaires croisés (`mask-composite: intersect`), eux,
   tombent à zéro sur chacun des quatre bords tout en gardant la forme de
   l'image : le sujet reste net au centre et se dissout dans le parchemin de
   tous côtés, sans limite nulle part.

   Les deux ne portent pas les mêmes pourcentages parce que la fenêtre est plus
   haute que large : un fondu de 22 % en largeur fait autant de pixels que 15 %
   en hauteur. À proportions égales, le fondu du haut paraîtrait deux fois plus
   épais que celui des côtés. */
.ei-sel__fen--image img:not(.ei-sel__flou) {
	-webkit-mask-image:
		linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
	        mask-image:
		linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
	-webkit-mask-composite: source-in;
	        mask-composite: intersect;
}
.ei-sel__flou {
	/* Agrandie : un flou laisse sinon apparaître des bords délavés là où le
	   noyau de flou déborde de l'image. */
	transform: scale(1.18);
	filter: blur(clamp(6px, 5cqi, 22px));
	/* Le même fondu, décalé de l'agrandissement : la doublure est 1,18 fois plus
	   grande, le bord de la fenêtre tombe donc à 7,6 % de ses propres
	   dimensions, et c'est là qu'elle doit être éteinte — pas au-delà, où elle
	   serait coupée. */
	-webkit-mask-image:
		linear-gradient(to right, transparent 7.6%, #000 26%, #000 74%, transparent 92.4%),
		linear-gradient(to bottom, transparent 7.6%, #000 20%, #000 80%, transparent 92.4%);
	        mask-image:
		linear-gradient(to right, transparent 7.6%, #000 26%, #000 74%, transparent 92.4%),
		linear-gradient(to bottom, transparent 7.6%, #000 20%, #000 80%, transparent 92.4%);
	-webkit-mask-composite: source-in;
	        mask-composite: intersect;
}
.ei-sel__tuile:hover .ei-sel__fen--image img:not(.ei-sel__flou) {
	transform: scale(1.04);
}
.ei-sel__tuile:hover .ei-sel__flou {
	transform: scale(1.22);
}
/* ============================================================================
   LA PLAQUE DE CUIVRE — le cartel d'un cabinet de 1900.

   Les mots d'une tuile se lisent sur une plaque vissée, pas sur le fond : c'est
   ainsi qu'une vitrine ou un rayon s'annonçait à l'époque. Le même composant
   sert aux deux présentations — sous le cadre quand il porte une image, au
   centre du parchemin sinon.

   Le métal tient en trois couches, qui doivent toutes être là :
   — le CORPS, un dégradé oblique allant du cuivre clair au cuivre brûlé. Un
     aplat ne ressemble à rien : le métal se reconnaît à ce qu'il réfléchit
     différemment selon l'angle, et c'est la diagonale qui le dit ;
   — le BISEAU, deux liserés internes en `box-shadow` — lumière en haut, ombre
     en bas — qui donnent son épaisseur à la plaque. Inversés, elle paraîtrait
     creusée dans le support ;
   — les RIVETS, quatre têtes aux angles, chacune un petit dégradé radial avec
     son reflet en haut à gauche et son ombre en bas à droite.

   Le texte, lui, est GRAVÉ : encre sombre et une seule ligne de lumière juste
   en dessous, comme le fond d'un sillon qui accroche le jour. Un relief en
   bosse (ombre portée sous le texte) ferait du texte posé dessus, pas creusé
   dedans. */
.ei-sel__plaque {
	/* LA GRAVURE, en un seul endroit : six règles l'emploient — le nom et le
	   sous-titre sous le cadre, les mots dans le parchemin, les deux lignes du
	   « Tout le catalogue ». Répétée, elle finissait par diverger d'une plaque à
	   l'autre.

	   DEUX OMBRES, PAS UNE. Le jour vient d'en haut : dans un sillon, c'est donc
	   la lèvre SUPÉRIEURE qui porte l'ombre et l'inférieure qui accroche la
	   lumière. Une seule ligne claire sous le texte le posait sur le métal ; les
	   deux le creusent dedans. Et l'encre est presque noire : sur un cuivre aussi
	   chaud, un brun moyen se noyait dans le fond. */
	--ei-grave: #1F1004;
	--ei-grave-sous: #43270E;
	--ei-grave-relief:
		0 -1px 0 rgba(36, 16, 4, .55),
		0 1px 0 rgba(255, 244, 221, .85);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: clamp(7px, 3.5%, 13px) clamp(10px, 6%, 22px);
	border: 1px solid rgba(72, 36, 12, .75);
	border-radius: 2px;
	text-align: center;
	background:
		linear-gradient(158deg,
			#E7C08C 0%,
			#CE9A5E 18%,
			#A06C38 42%,
			#8A5729 58%,
			#B5814A 80%,
			#DDB079 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 238, 206, .8),
		inset 1px 0 0 rgba(255, 238, 206, .3),
		inset -1px 0 0 rgba(58, 26, 8, .4),
		inset 0 -1px 0 rgba(58, 26, 8, .65),
		0 5px 13px rgba(0, 0, 0, .45);
	/* Conteneur à son tour : les mots qu'elle porte se mesurent à la place
	   qu'elle leur laisse, et non à la fenêtre entière (voir le plafond `cqi`
	   plus bas, sans quoi un nom long déborderait de la plaque). */
	container-type: inline-size;
}
/* Les quatre rivets. En une seule couche décorative, sans élément en plus :
   `inset` colle la couche à la plaque, et chaque tête est posée à son angle. */
.ei-sel__plaque::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background-repeat: no-repeat;
	background-image:
		radial-gradient(circle 3px at 6px 6px, #F6DCB2 0 35%, #9A6B3A 60%, rgba(58, 26, 8, .85) 85%, transparent 100%),
		radial-gradient(circle 3px at calc(100% - 6px) 6px, #F6DCB2 0 35%, #9A6B3A 60%, rgba(58, 26, 8, .85) 85%, transparent 100%),
		radial-gradient(circle 3px at 6px calc(100% - 6px), #F6DCB2 0 35%, #9A6B3A 60%, rgba(58, 26, 8, .85) 85%, transparent 100%),
		radial-gradient(circle 3px at calc(100% - 6px) calc(100% - 6px), #F6DCB2 0 35%, #9A6B3A 60%, rgba(58, 26, 8, .85) 85%, transparent 100%);
}
/* Une plaque posée sur le parchemin ne prend que la place de ses mots, centrée
   dans la fenêtre — sinon elle couvrirait le dessin qu'elle doit laisser voir.
   La fenêtre rend d'ailleurs ses marges internes à la plaque, qui a les
   siennes. */
.ei-sel__fen--mots,
.ei-sel__fen--cta {
	padding: 6% 5%;
}
.ei-sel__fen--mots > .ei-sel__plaque,
.ei-sel__fen--cta > .ei-sel__plaque {
	width: 100%;
}
/* Sous le cadre, en revanche, la plaque n'a pas de parchemin à ménager : elle
   s'ajuste à ses mots et se centre. Pleine largeur de tuile, elle faisait un
   bandeau presque vide autour d'un nom court.
   ⚠️ Elle renonce pour cela au confinement : `container-type: inline-size` fait
   justement calculer la largeur SANS regarder le contenu, et `fit-content` n'y
   trouvait alors plus rien à mesurer — la plaque se réduisait à ses marges et
   les mots débordaient par-dessus. Ici personne n'en a besoin : seuls les mots
   d'une fenêtre se mesurent en `cqi`. */
.ei-sel__texte.ei-sel__plaque {
	container-type: normal;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}
.ei-sel__tuile:hover .ei-sel__plaque {
	/* Le cuivre s'éclaire au passage, comme un métal qu'on incline. */
	filter: brightness(1.08);
}

/* Nom et sous-titre, sur la plaque, dans l'écriture de la carte. */
.ei-sel__texte {
	margin-top: 14px;
}
.ei-sel__nom {
	font-family: var(--wp--preset--font-family--title, "Cormorant", Georgia, serif);
	font-size: clamp(19px, 1.7vw, 25px);
	font-weight: 700;
	line-height: 1.12;
	color: var(--ei-grave);
	text-shadow: var(--ei-grave-relief);
	transition: color .3s;
}
.ei-sel__tuile:hover .ei-sel__nom {
	color: #120800;
}
.ei-sel__sous {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: clamp(10px, .88vw, 12px);
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ei-grave-sous);
	text-shadow: var(--ei-grave-relief);
}
/* Sans image : le nom et le sous-titre sur la plaque, au centre du parchemin,
   séparés par un filet gravé. Pleine largeur pour se replier dans la plaque. */
.ei-sel__fen--mots {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 1.1vw, 14px);
	padding: 12% 7%;
	text-align: center;
	overflow-wrap: anywhere;
	/* La fenêtre se déclare conteneur : les mots ci-dessous peuvent alors se
	   mesurer à ELLE (`cqi`) et non à la page. Voir la note sur `min()`. */
	container-type: inline-size;
}
/* LES MOTS SE MESURENT AUSSI À LEUR FENÊTRE. Les fenêtres n'ont pas la même
   largeur d'un cadre à l'autre — 67 % du cadre pour le parchemin, 74 % pour la
   nuit, 55 % pour l'officine, dont le parchemin est bordé d'herbes et d'objets
   qu'une fenêtre plus large recouvrirait. À taille de police égale, un nom long
   passait dans les deux premières et se faisait couper EN PLEIN MILIEU dans la
   troisième (`overflow-wrap: anywhere` plus haut, qui évite qu'un mot déborde
   du parchemin) : « BRICKS DE CONSTRUCT / IONS ».
   Le plafond en `cqi` — 10,5 % de la largeur utile de la fenêtre — ne change
   rien aux deux cadres larges, où il tombe au-dessus de la taille demandée ;
   dans une fenêtre étroite il retient les mots juste assez pour qu'ils se
   replient entre les mots. Un cadre nouveau reste une ligne de PHP : sa fenêtre
   peut être étroite sans qu'une règle lui soit écrite ici. */
.ei-sel__mot {
	width: 100%;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: min(clamp(12px, 1.1vw, 15px), 10.5cqi);
	font-weight: 600;
	letter-spacing: .2em;
	line-height: 1.45;
	text-transform: uppercase;
	/* Sur la plaque, l'encre ne dépend plus du cadre : c'est le cuivre qui est
	   le fond, clair ou sombre tout autour. Les variables `--ei-mot*` ne servent
	   donc plus nulle part ici. */
	color: var(--ei-grave);
	text-shadow: var(--ei-grave-relief);
	transition: color .3s;
}
.ei-sel__mot--sous {
	font-size: min(clamp(10px, .88vw, 12px), 8.4cqi);
	font-weight: 500;
	color: var(--ei-grave-sous);
	text-shadow: var(--ei-grave-relief);
}
/* Le filet, gravé lui aussi : un sillon sombre et sa ligne de lumière dessous. */
.ei-sel__filet {
	display: block;
	flex: 0 0 2px;
	width: 46%;
	height: 2px;
	margin-block: 3px;
	background:
		linear-gradient(90deg, transparent, rgba(58, 26, 8, .65) 20%, rgba(58, 26, 8, .65) 80%, transparent) 0 0 / 100% 1px no-repeat,
		linear-gradient(90deg, transparent, rgba(255, 238, 206, .55) 20%, rgba(255, 238, 206, .55) 80%, transparent) 0 1px / 100% 1px no-repeat;
}
.ei-sel__tuile:hover .ei-sel__mot {
	color: #120800;
}
/* En grand (mosaïque, automatique à trois) les mots du parchemin grandissent avec le cadre. */
.ei-sel--mosaic .ei-sel__tuile--1 .ei-sel__mot,
.ei-sel--auto3 .ei-sel__tuile--1 .ei-sel__mot {
	font-size: min(clamp(14px, 1.5vw, 20px), 10.5cqi);
}
.ei-sel--mosaic .ei-sel__tuile--1 .ei-sel__mot--sous,
.ei-sel--auto3 .ei-sel__tuile--1 .ei-sel__mot--sous {
	font-size: min(clamp(11px, 1.05vw, 14px), 8.4cqi);
}

/* « Tout le catalogue » : écrit dans le parchemin, comme la carte de la boutique. */
.ei-sel__fen--cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 1.2vw, 14px);
	padding: 12% 6%;
	text-align: center;
	overflow-wrap: anywhere;
}
/* `width: 100%` sur les deux lignes de texte : en colonne flex, un item prend
   sa largeur de contenu et peut déborder d'une fenêtre étroite au lieu de
   passer à la ligne ; pleine largeur, il se replie dans la fenêtre. */
.ei-sel__k {
	width: 100%;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: min(clamp(10px, .88vw, 12px), 8.4cqi);
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ei-grave-sous);
	text-shadow: var(--ei-grave-relief);
}
.ei-sel__cta {
	width: 100%;
	font-family: var(--wp--preset--font-family--title, "Cormorant", Georgia, serif);
	font-size: min(clamp(17px, 1.45vw, 22px), 14cqi);
	font-weight: 700;
	line-height: 1.18;
	white-space: normal;
	color: var(--ei-grave);
	text-shadow: var(--ei-grave-relief);
	transition: color .3s;
}
/* La flèche, seule sur sa ligne, glisse vers la droite au survol. */
.ei-sel__fleche {
	font-family: var(--wp--preset--font-family--title, "Cormorant", Georgia, serif);
	font-size: min(clamp(18px, 1.5vw, 24px), 18cqi);
	line-height: 1;
	color: var(--ei-grave-sous);
	text-shadow: var(--ei-grave-relief);
	transition: transform .3s, color .3s;
}
.ei-sel__tuile--cta:hover .ei-sel__cta,
.ei-sel__tuile--cta:hover .ei-sel__fleche {
	color: #120800;
}
.ei-sel__tuile--cta:hover .ei-sel__fleche {
	transform: translateX(4px);
}

/* ---------- Dispositions (celles de la console, une à une) ---------- */
.ei-sel {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: auto;
	align-items: start;
	gap: clamp(16px, 2.2vw, 30px);
}
/* Grille, tuiles égales : la base ci-dessus. */

/* Une grande, des petites : la tuile 1 prend deux colonnes sur deux rangées —
   son cadre, deux fois plus large, est deux fois plus haut, et ses mots suivent
   en plus grand. `dense` comble la case que laisserait une fin de rangée. */
.ei-sel--mosaic {
	grid-auto-flow: dense;
}
.ei-sel--mosaic .ei-sel__tuile--1 {
	grid-column: span 2;
	grid-row: span 2;
}
.ei-sel--mosaic .ei-sel__tuile--1 .ei-sel__nom {
	font-size: clamp(22px, 2.3vw, 34px);
}
.ei-sel--mosaic .ei-sel__tuile--1 .ei-sel__sous {
	font-size: clamp(10px, .95vw, 13px);
}

/* Grille de carrés : quatre cases carrées, le cadre centré dans chacune, réduit
   pour que cadre et mots tiennent dans le carré (0,58 de la case en largeur →
   0,83 en hauteur, le reste aux mots). */
.ei-sel--squares .ei-sel__tuile {
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.ei-sel--squares .ei-sel__cadre {
	width: 58%;
}
.ei-sel--squares .ei-sel__texte {
	margin-top: 10px;
}

/* Centrées sur la page : largeur fixe, rangées centrées, toutes de même taille. */
.ei-sel--centered {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.ei-sel--centered .ei-sel__tuile {
	flex: 0 0 240px;
	width: 240px;
	max-width: 100%;
}

/* L'automatique du site à trois tuiles : la mosaïque d'origine, 2fr 1fr 1fr,
   la première sur deux rangées, les deux autres et l'appel autour. */
.ei-sel--auto3 {
	grid-template-columns: 2fr 1fr 1fr;
}
.ei-sel--auto3 .ei-sel__tuile--1 {
	grid-row: span 2;
}
.ei-sel--auto3 .ei-sel__tuile--1 .ei-sel__nom {
	font-size: clamp(22px, 2.3vw, 34px);
}

/* ---------- Écrans étroits ---------- */
@media (max-width: 960px) {
	/* Deux colonnes ; la grande tuile de la mosaïque passe en pleine largeur
	   sur une seule rangée, comme dans le socle. */
	.ei-sel,
	.ei-sel--auto3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ei-sel--mosaic .ei-sel__tuile--1,
	.ei-sel--auto3 .ei-sel__tuile--1 {
		grid-column: span 2;
		grid-row: auto;
	}
	.ei-sel--mosaic .ei-sel__tuile--1 .ei-sel__cadre,
	.ei-sel--auto3 .ei-sel__tuile--1 .ei-sel__cadre {
		max-width: 420px;
	}
	.ei-sel--centered .ei-sel__tuile {
		flex-basis: calc(50% - 10px);
		width: auto;
	}
}
@media (max-width: 600px) {
	.ei-sel { gap: 14px; }
	.ei-sel__nom { font-size: 17px; }
	.ei-sel__cta { font-size: 14px; }
	.ei-sel__k { font-size: 8px; letter-spacing: .14em; }
	.ei-sel__fen--cta { padding: 12% 4%; }
	.ei-sel__mot { font-size: min(9px, 10.5cqi); letter-spacing: .14em; }
	.ei-sel__mot--sous { font-size: min(8px, 8.4cqi); }
	.ei-sel__fen--mots { padding: 12% 5%; }
	.ei-sel--mosaic .ei-sel__tuile--1 .ei-sel__mot { font-size: min(13px, 10.5cqi); }
	.ei-sel--mosaic .ei-sel__tuile--1 .ei-sel__mot--sous { font-size: min(10px, 8.4cqi); }
	.ei-sel--squares .ei-sel__cadre { width: 64%; }
}
@media (prefers-reduced-motion: reduce) {
	.ei-sel__cadre,
	.ei-sel__fen--image img,
	.ei-sel__nom,
	.ei-sel__cta,
	.ei-sel__fleche { transition: none; }
	.ei-sel__tuile:hover .ei-sel__cadre { transform: none; }
	/* La doublure garde son agrandissement : il compense le debord du flou, ce
	   n'est pas une animation. */
	.ei-sel__tuile:hover .ei-sel__fen--image img:not(.ei-sel__flou) { transform: none; }
	.ei-sel__tuile:hover .ei-sel__flou { transform: scale(1.18); }
	.ei-sel__tuile--cta:hover .ei-sel__fleche { transform: none; }
}


/* ============================================================================
   EN DERNIER, PARCE QU'IL DOIT TRANCHER APRÈS LES AJUSTEMENTS MOBILES — ceux-ci
   reposent `letter-spacing` sur `.ei-sel__mot`, et à spécificité égale c'est la
   dernière règle écrite qui gagne. Placé plus haut, le resserrement ci-dessous
   ne s'appliquait plus sous 600 px, là où les fenêtres sont pourtant les plus
   étroites.
   ========================================================================== */
/* ET DANS UNE FENÊTRE ÉTROITE, LES CAPITALES SE RESSERRENT. L'écart de .2em
   entre les lettres — l'écriture de la carte — coûte un cinquième de la largeur
   du mot. Dans une fenêtre large il passe inaperçu ; dans l'étroite, c'est lui
   qui décidait seul que « CONSTRUCTIONS » ne tenait pas, et le plafond en `cqi`
   devait alors descendre la police bien plus bas que nécessaire (retour Didier,
   2026-10-24 : « peu lisible car trop petit »). Resserré, le mot tient à sa
   taille pleine.

   La mesure se fait sur la fenêtre, pas sur l'écran : un cadre à fenêtre large
   garde ses capitales espacées quelle que soit la taille de la page, et un cadre
   à fenêtre étroite les resserre même sur un grand écran. */
@container (max-width: 145px) {
	.ei-sel__mot { letter-spacing: .1em; }
	.ei-sel__mot--sous { letter-spacing: .12em; }
}