/* L'Encre Interdite — réglages du site, posés APRÈS la feuille livrée.
   Fichier à nous : la feuille de Claude Design reste intacte et peut être
   remplacée à la prochaine livraison sans rien emporter d'ici.

   Bords fondus : la photo s'arrêtait net sur le parchemin de la carte, et le
   montage se voyait. Trois choses le dessinaient, pas une :

   1. le passe-partout de la fenêtre, liseré crème et or en `box-shadow`,
      parfaitement net : tant qu'il est là, la photo a beau s'estomper, le
      rectangle reste tracé ;
   2. le fond de la fenêtre, rectangle opaque. Il est maintenant TRANSPARENT :
      la photo meurt sur le parchemin de l'image, avec sa texture et ses
      ombres, au lieu d'un aplat qui ne pouvait que s'en approcher ;
   3. la photo elle-même, qui s'efface du centre vers le bord, sa doublure
      floue prenant le relais sur la lisière.

   Le fond opaque était obligatoire tant que l'image du cadre portait le texte
   imprimé de la carte — il fallait le couvrir. Depuis le 2026-10-20 elle est
   livrée avec un parchemin vierge, ce qui libère aussi `--ei-win-*` : la
   fenêtre peut être resserrée pour dégager une marge de parchemin autour de la
   photo, si on préfère ce cadrage.

   ⚠️ LIRE LES RAYONS. Dans `radial-gradient(ellipse Rx Ry …)`, Rx est le rayon
   rapporté à la LARGEUR ENTIÈRE, pas à la demi-largeur : un rayon de 50 % tombe
   pile sur le bord. Des valeurs au-delà de 100 % dessinent donc une ellipse
   bien plus grande que la fenêtre et ne masquent plus rien — erreur faite ici
   le 2026-10-19. Celles-ci mettent le coin juste au-delà du rayon, donc
   totalement effacé, en laissant le milieu des bords à 40-50 %. */
.ei-cadre {
	/* Le cadre occupe toute la colonne au lieu de s'arrêter à 560 px. L'image
	   fait 737 px de large : on reste en deçà de sa taille native, c'est elle
	   la limite au-delà de laquelle le dessin deviendrait mou. */
	width: min(100%, 620px);
}
.ei-cadre__win {
	box-shadow: none;
	background: transparent;
	/* Coins arrondis : la fenêtre porte déjà `overflow: hidden`, l'arrondi
	   découpe donc les photos d'un seul geste. En proportion plutôt qu'en
	   pixels, pour que le galbe reste le même sur un écran étroit. */
	border-radius: clamp(16px, 7%, 34px);
}
.ei-cadre__flou {
	position: absolute;
	inset: 0;
	/* 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.13);
	filter: blur(20px);
}
.ei-cadre__slide > img:not(.ei-cadre__flou) {
	position: absolute;
	inset: 0;
	-webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 50%, #000 40%, transparent 100%);
	        mask-image: radial-gradient(ellipse 68% 72% at 50% 50%, #000 40%, transparent 100%);
}
.ei-cadre__slide {
	-webkit-mask-image: radial-gradient(ellipse 72% 76% at 50% 50%, #000 55%, transparent 100%);
	        mask-image: radial-gradient(ellipse 72% 76% at 50% 50%, #000 55%, transparent 100%);
}

/* ============================================================================
   LA CARTE DE LA BOUTIQUE — le menu des rayons, posé sur la couverture.

   Même famille que le cadre du café, mais sans photo : c'est du texte qui
   occupe l'ouverture. Le fond est une couverture de carte (roses, bougie,
   encrier, parchemin) dont toute la partie haute est une plage noire libre.

   Aucun shortcode : il suffit de poser la classe `ei-carte` sur un groupe de
   l'éditeur de site et d'écrire dedans. Le contenu reste donc modifiable sans
   toucher au code — c'est du texte de vitrine, il bougera.

   Les marges de la zone de texte sont calées sur le dessin : 20 % en haut pour
   passer sous les roses, 34 % en bas pour rester au-dessus de la bougie et du
   parchemin. Vérifié en traçant la zone sur l'image.
   ========================================================================== */
.ei-carte {
	position: relative;
	width: min(100%, 620px);
	margin-inline: auto;
	aspect-ratio: 738 / 1055;
	background: url("fond-couverture.webp") center / 100% 100% no-repeat;
	box-shadow: 0 26px 70px rgba(0, 0, 0, .5);
}
.ei-carte__texte {
	position: absolute;
	inset: 20% 13% 34%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(6px, 1.1vw, 14px);
	text-align: center;
}
/* Les blocs de l'éditeur reprennent la main sur les styles du thème : cette
   carte est un dessin sombre, pas une section de page. */
.ei-carte__texte > * { margin: 0; }
.ei-carte__texte h2 {
	font-family: var(--wp--preset--font-family--title, "Cormorant", Georgia, serif);
	font-size: clamp(26px, 4.2vw, 44px);
	font-weight: 500;
	line-height: 1.1;
	color: #F4EBDC;
}
.ei-carte__texte p {
	font-family: var(--wp--preset--font-family--title, "Cormorant", Georgia, serif);
	font-size: clamp(16px, 2.1vw, 23px);
	line-height: 1.45;
	color: #EADFC8;
}
/* L'accroche : même traitement que les surtitres du site. */
.ei-carte__texte .ei-carte__k {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: clamp(9px, 1vw, 11px);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #CDA862;
}
/* Filet doré, comme les séparateurs de la carte imprimée. */
.ei-carte__texte hr,
.ei-carte__texte .wp-block-separator {
	width: 38%;
	height: 1px;
	border: 0;
	margin: .2em 0;
	background: linear-gradient(90deg, transparent, #CDA862, transparent);
	opacity: 1;
}
.ei-carte__texte .wp-block-button__link,
.ei-carte__texte a.mc-btn-deep {
	display: inline-block;
	margin-top: .5em;
	padding: .85em 1.6em;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: clamp(9px, .95vw, 11px);
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	color: #1A120E;
	background: #CDA862;
}
@media (max-width: 600px) {
	.ei-carte__texte { inset: 18% 10% 32%; }
}
/* Fleuron de séparation, à la place du bloc Séparateur : WordPress lui impose
   sa largeur et sa bordure depuis trois classes, et le filet n'apparaissait
   pas. Un fleuron se dessine avec du texte, personne ne peut le lui reprendre
   — et il est plus juste sur une carte que deux traits. */
.ei-carte__texte .ei-carte__fleuron {
	font-size: clamp(13px, 1.5vw, 17px);
	line-height: 1;
	letter-spacing: .4em;
	color: #CDA862;
	opacity: .9;
}