/* ==========================================================================
   La tete qui tourne : habillage
   1. Palette et fondations
   2. Typographie
   3. La galerie d'ambigrammes (le coeur du dispositif)
   4. Titres et leur reflet
   5. Boutique : fiches et boutons
   6. Reglages fins et accessibilite
   ========================================================================== */


/* 1. Palette et fondations
   -------------------------------------------------------------------------- */

.ltqt {
	--papier:        #faf7f2;
	--papier-creuse: #f2ece2;
	--encre:         #14110f;
	--encre-douce:   #5a534c;
	--accent:        #b23a2f;   /* vermillon de rubrique */
	--filet:         rgba(20, 17, 15, .14);

	--titre: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
	--texte: "Inter", "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

	--mesure: 65ch;
	--respir: clamp(2.5rem, 6vw, 5.5rem);
	--bascule: .9s cubic-bezier(.65, 0, .35, 1);
}

/* Variante d'encre violette, si le vermillon vous parait trop chaud.
   Pour l'activer, retirez les deux marqueurs de commentaire ci-dessous.

.ltqt {
	--papier:      #f7f5f3;
	--encre:       #14110f;
	--encre-douce: #57515c;
	--accent:      #5b3a7a;
}
*/

/* Caracteres heberges localement (recommande : evite d'appeler les serveurs
   de Google, ce qui transfere l'adresse IP de vos visiteurs).
   Deposez les fichiers .woff2 dans assets/fonts/, puis retirez les
   marqueurs de commentaire.

@font-face {
	font-family: "Fraunces";
	src: url("fonts/Fraunces.woff2") format("woff2-variations");
	font-weight: 300 900;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("fonts/Inter.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-display: swap;
}
*/


/* 2. Typographie
   -------------------------------------------------------------------------- */

body.ltqt {
	background: var(--papier);
	color: var(--encre);
	font-family: var(--texte);
	font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.ltqt :where(h1, h2, h3, h4) {
	font-family: var(--titre);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.012em;
	text-wrap: balance;
}

.ltqt :where(h1) { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); }
.ltqt :where(h2) { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin-top: var(--respir); }
.ltqt :where(h3) { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); }

.ltqt :where(p, li) { max-width: var(--mesure); }

.ltqt :where(a) {
	color: inherit;
	text-decoration-thickness: .06em;
	text-underline-offset: .18em;
	transition: color .25s ease;
}
.ltqt :where(a:hover) { color: var(--accent); }

.ltqt :where(hr) {
	border: 0;
	border-top: 1px solid var(--filet);
	width: 5rem;
	margin: var(--respir) auto;
}

.ltqt :where(blockquote) {
	font-family: var(--titre);
	font-size: 1.25em;
	font-style: italic;
	border: 0;
	padding-inline-start: 1.5rem;
	border-inline-start: 1px solid var(--accent);
}

/* Petites capitales espacees, pour les mentions de service */
.ltqt .capitale {
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--encre-douce);
}


/* 3. La galerie d'ambigrammes
   --------------------------------------------------------------------------
   Posez la classe ltqt-galerie sur le bloc qui contient les images
   (champ « Classe(s) CSS additionnelle(s) » de l'editeur), ou utilisez
   le raccourci [galerie-ambi]. Le script se charge du reste.            */

.ltqt-galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: clamp(1.75rem, 4vw, 3.5rem);
	margin-block: var(--respir);
	max-width: none;
}

.ltqt-galerie .ambi,
.ltqt .ambi {
	margin: 0;
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ltqt .ambi img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
	transform-origin: center;
	transition: transform var(--bascule);
}

.ltqt .ambi figcaption {
	margin-top: 1rem;
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--encre-douce);
	transition: color .25s ease;
}

.ltqt .ambi .ambi-note {
	display: block;
	margin-top: .5rem;
	font-size: .82rem;
	letter-spacing: 0;
	text-transform: none;
	font-style: italic;
	color: var(--encre-douce);
}

/* Etat retourne, obtenu au clic ou au toucher */
.ltqt .ambi.est-retourne img { transform: rotate(180deg); }

/* Survol, uniquement la ou le survol existe reellement */
@media (hover: hover) and (pointer: fine) {
	.ltqt .ambi:not(.est-retourne):hover img { transform: rotate(180deg); }
	.ltqt .ambi:hover figcaption { color: var(--accent); }
}

.ltqt .ambi:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: .6rem;
}

/* Le logo tourne au survol de l'en-tete, une fois, lentement */
.ltqt .custom-logo,
.ltqt .wp-block-site-logo img {
	transition: transform 1.2s cubic-bezier(.65, 0, .35, 1);
}
.ltqt header:hover .custom-logo,
.ltqt header:hover .wp-block-site-logo img {
	transform: rotate(180deg);
}


/* 4. Titres et leur reflet
   --------------------------------------------------------------------------
   Ajoutez la classe titre-ambi a un titre : le script depose son reflet
   sous lui, comme une signature dans l'eau.                              */

.ltqt .titre-ambi {
	position: relative;
	display: inline-block;
}
.ltqt .titre-ambi::after {
	content: attr(data-echo);
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	transform: scaleY(-1);
	transform-origin: top;
	opacity: .10;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}


/* 5. Boutique : fiches et boutons
   -------------------------------------------------------------------------- */

.ltqt-produits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(2rem, 5vw, 4rem);
	margin-block: var(--respir);
	max-width: none;
}

.ltqt-produit {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--filet);
}

.ltqt-produit img { width: 100%; height: auto; display: block; }

.ltqt-produit h3 { margin: 0; }

.ltqt-produit .prix {
	font-family: var(--titre);
	font-size: 1.35rem;
	font-variant-numeric: tabular-nums;
}

.ltqt-produit .detail {
	font-size: .85rem;
	color: var(--encre-douce);
	margin: 0;
}

.ltqt-bouton,
.ltqt .wp-block-button__link {
	display: inline-block;
	padding: .85em 1.6em;
	background: var(--encre);
	color: var(--papier);
	border: 1px solid var(--encre);
	border-radius: 0;
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .3s ease, color .3s ease;
}
.ltqt-bouton:hover,
.ltqt .wp-block-button__link:hover {
	background: transparent;
	color: var(--encre);
}

.ltqt-bouton.discret {
	background: transparent;
	color: var(--encre);
}
.ltqt-bouton.discret:hover {
	background: var(--encre);
	color: var(--papier);
}


/* 6. Reglages fins et accessibilite
   -------------------------------------------------------------------------- */

.ltqt img { max-width: 100%; height: auto; }

.ltqt :focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: .35rem;
}

/* Le pied de page, allege */
.ltqt footer {
	border-top: 1px solid var(--filet);
	margin-top: var(--respir);
	padding-top: 2rem;
	font-size: .85rem;
	color: var(--encre-douce);
}

@media (prefers-reduced-motion: reduce) {
	.ltqt *,
	.ltqt *::before,
	.ltqt *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

@media print {
	.ltqt .ambi img { transform: none !important; }
}